javascript DOM基础

标签：javascriptdom

DOM树

html为父节点(parentNode) 有俩个子节点(childNodes) 

firstChild(第一个节点)->head 

lastChild(最后一个节点)->body

nextSibling 表示下一个同级节点 

previousSibling 表示上一个同级节点 

childNodes->返回一个数组(并且数组中包含所有节点)(但是ie中值包括元素节点)

nodeType  元素节点nodeType值是1 属性节点是2 文本节点是3

nodeValue 节点的值(针对于文本节点)

nodeName 节点名

createElement 创建元素节点

createTextNode 创建文本节点

appendChild() 把child插入到parentDOM树中

insertBefore(newElement,targetElement) 把一个节点插入到另一个节点前面(但是没有insertAfter)

可以自己编写insertAfter

function insertAfter(newElement,targetElement){

    var parent = targetElement.parentNode;

    if(targetElement == parent.lastChild){

        parent.appendChild(newElement);

    }else{

        parent.insertBefore(newElement,targetElement.nextSibling)

    };

}

获得下一个元素节点

function getNextElement(node){   //node的写法一般是node.nextSibling

    if(node.nodeType == 1){

        return node;

    };

    if(node.nextSibling){

        return getNextElement(node.nextSibling);

    };

    return null;

}

getElementById()  根据id值来获取Element

getElementsByTagName   根据元素名来获取Element->返回数组

getElementsByClassName   根据class值来获取Element->返回数组

getAttribute()   获取属性值

setAttribute()   设置属性值

className  class的名字

innerHTML  html内容

innerText  文本内容

document.write() 里面的内容将呈现在html的界面中

element.title  -> element的title属性 

element.tagName ->element的标签名字

javascript DOM基础

标签：javascriptdom

原文地址：http://9865481.blog.51cto.com/9855481/1658646