基本DOM操作

一、节点类型

最常见节点类型有三类：

元素节点 Node.ELEMENT_NODE nodeType=1

属性节点 Node.ATTRIBUTE_NODE nodeType=2

文本节点 Node.TEXT_NODE nodeType=3

二、获取元素节点

document.getElementById(id);

nodeObject.getElementsByTagName(name);

三、操作属性节点

elementNode.getAttribute(name)

elementNode.setAttribute(name,value)

elementNode.removeAttribute(name)

四、创建元素节点

document.createElement(name)

五、添加节点

parentNodeObject.appendChild(nodeObject) 向节点的子节点列表的结尾添加新的子节点

parentNodeObject.insertBefore(newchild,refchild) 在已有的子节点前插入一个新的子节点

五、节点遍历（下列属性除parentNode,都可能会指向非元素节点）

nodeObject.childNodes 返回指定节点的子节点的节点列表（不含子节点的子节点）

nodeObject.parentNode 返回某节点的父节点

nodeObject.firstChild 返回指定节点的首个子节点

nodeObject.nextSibling 返回某个元素之后紧跟的元素（处于同一树层级中）

nodeObject.previousSibling 返回某节点之前紧跟的节点（处于同一树层级）

DEMO

window.onload = function(){
    
    var container = document.getElementById('container');
    var ul = document.createElement('ul');  //创建一个ul节点
    ul.setAttribute('id', 'cul');  //设置节点属性
    ul.className = 'addul';  //与setSttribute方法作用相同
    ul.innerHTML = '<li>one</li><li>two</li><li>three</li><li>four</li>';  //为ul添加子节点
    ulc = ul.childNodes;  //获取ul子节点列表
    var li = ulc[0];  //获取第一个子节点,在此同 var li = ul.firstChild;注意判断节点类型
    while(li != null){
        li.title = li.innerHTML;
        li = li.nextSibling;  //将li指向其下一个兄弟节点
    }
    var insertLi = document.createElement('li');  //创建一个li节点
    insertLi.innerHTML = 'insertLi';  
    ul.insertBefore(insertLi, ulc[2]);  //在ul的第三个子节点前插入新建的li节点
    container.appendChild(ul);  //将节点ul添加到dom树中
    var ulcl = ul.getElementsByTagName('li');  //获取ul下tagName为li的节点
    for(var i = 0; i < ulcl.length; i++){
        console.log('ulcl[' + i + ']: ' + ulcl[i].innerHTML);
    }

}

　　

　　

相关链接：

http://www.w3school.com.cn/xmldom/dom_document.asp

http://www.w3school.com.cn/xmldom/dom_node.asp