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;