DOM知识整理

DOM即文档对象模型 EcmaScript主要的构成就是JS+DOM+BOM。对DOM的操作是很重要的部分，而且不容易理解

获取DOM元素

document.getElementById(docID);//以id获取文档内的元素 *注意getElementById方法只能用在document上
 如otherEle.getElementById(docID);//这样是会出错的
document.getElementsByTagName(tag);//通过TagName获取元素集合(不是数组),如div,span等等
document.getElementsByClassName(className);//这个是HTML5中扩展的相当有用的方法,通过类名获取元素集合
node.parentNode //获取父节点
node.nextSibling //获取同级的下一个节点
node.previousSibling//获取同级的上一个节点
node.firstChild //获取第一个子节点
node.lastChild //获取最后一个子节点
node.hasChildNodes() //判断当前节点是否有子节点
node.childNodes //当前节点的所有子节点
node.children //获取当前节点的除文本节点之外的所有子节点。(区分于node.childNodes)

类操作(HTML5)

node.classList//获取元素的类名集合
node.classList.add(cName)
node.classList.contains(cName)//判断该元素是否含有传入的类名
node.classList.remove(cName)
node.classList.toggle(cName)//if(exist){ remove } else { add }
node.classList[index];//根据索引获取类名
node.classList.item(index);//同上

数据(HTML5)

HTML5规范中可以给元素添加自定义属性：data-前缀 = "xxxdata"
例如：<div data-sex="boy" id="DDD"></div>
var d = document.getElementById("DDD");
d.dataset;//该元素存储的数据集合
d.dataset["sex"]或d.dataset.sex;//去掉前缀 data- 即可获取到数据

操作节点的方法

pNode.appendChild(newNode) //如果传入的节点已经在文档中已经存在，则将该节点从原来的位置转移到新位置。
pNode.insertBefore(node)
pNode.replaceChild(node)
pNode.removeChild(node)
node.cloneNode([Boolean]) //默认为true true为深复制，false为浅复制。IE下存在Bug：它会复制绑定到该元素的事件，所以在复制之前可以根据实际情况提前移除事件绑定。

//将NodeList转换为数组的函数
function nodelistToArray(nodes){
    var array = null;
    try{//非IE
        array=Array.prototype.slice.call(nodes,0);
    }catch(e){//IE
        array = new Array();
        for(var i =0;len = nodes.length;i<len;i++){
            array.push(nodes[i]);
        }
    }
    return array;
}

改变元素内容

ele.innerHTML = "...";//直接改变元素的html。有些文章说这个方法是比插入DOM快，这点是错的。亲测结果是在Chrome下后者比前者快1/5;