DOM

1.基于节点树的遍历

parentNode父节点，最顶端的是#document,每个节点只有一个父节点parentNode父节点，最顶端的是#document,每个节点只有一个父节点childNodes子节点，每个父节点可以有多个节点firstChild第一个子节点lastChild最后一个子节点nextSibling下一个兄弟结点previousSibling前一个兄弟节点

2.基于元素节点树的遍历（IE9以下不兼容，除了children）

parentElement当前节点的父元素children当前元素的元素子节点firstElementChild第一个元素子节点lastElementChild最后一个元素子节点nextElementSibling下一个元素兄弟子节点previousElementSibling

3.节点类型 nodeType

元素节点 —1 记住属性节点 —2文本节点 —3 记住注释节点 —8文档节点 —9DocumentFrame —11

4.节点的4个属性

nodeName 只读nodeValue 可读可写nodeType 类型（重要）attributes

5.操作节点

（1）创建

document.createElement —创建元素节点 （常用）documnet.createTextNode —创建文本节点 var div = document.createElement('div'); var text = document.createTextNode('hehe'); div.appendChild(text) document.body.appendChild(div);

（2）插入

父节点.appendChild —增加子节点至子元素尾，相当于数组的push（常用）

被插入节点的父节点.isnertBefore （a,b） —将a元素插入到b前面, ( 常用 )

var div = document.createElement('div'); var p = document.createElement('p'); div.appendChild(p) document.body.appendChild(div); var em = document.createElement('em') div.insertBefore(em,p);

（3）删除

parentNode.removeChild(“a”); —删除子节点a，相当于剪切，会返回删除的元素node.remove() —把自己删了，不返回值 var div = document.createElement('div'); var p = document.createElement('p'); div.appendChild(p) document.body.appendChild(div); div.removeChild(p) //删除子元素，返回删除元素 div.remove() //删除自己，不返回

（4）替换

parent.replaceChild(new,origin); （不常用）innerText （老版本火狐不兼容，火狐有特定的方法textContent,但是对老版本IE不好使）innerHTMLsetAttributegetAttribute var div = document.createElement('div'); div.innerHTML='<p><span></span></p>'; document.body.appendChild(div); var p = document.getElementsByTagName('p')[0]; var span = document.getElementsByTagName('span')[0]; p.setAttribute('class','p') span.innerText = 'hello！！';

HTML结构

<div> <p class="p"> <span></span> </p> </div>

扩展面试题：

1.封装函数insetAfter();功能类似insertBefore(); 提示：可以忽略老版本浏览器，直接在Element.prototype上编程

2.将目标节点内部的节点顺序逆序 例如：

<div><a></a><em></em></div> <div><em></em><a></a></div>

答案： 1.

var div2 = document.getElementsByClassName("d2")[0]; var span = document.getElementsByTagName("span")[0]; var strong = document.getElementsByTagName("strong")[0]; var b = document.getElementsByTagName("b")[0]; Element.prototype.insertAfter = function(node, afterNode){ var beforenode = afterNode.nextElementSibling; if(beforenode){//如果不是最后一个节点 this.insertBefore(node,beforenode); }else{ //如果是最后一个节点 this.appendChild(node); } }

注：原型链封装的好处，可以使用this指代调用的节点，不需要把调用节点当参数传入 2.

<!-- 实现目标节点内部的节点逆序) --> var div = document.getElementsByTagName("div")[0]; Element.prototype.reverse = function(){ var len = this.children.length; var lastNode = this.lastElementChild; var secondNode =lastNode.previousElementSibling; var pre = null; for(var i = 0;i < len;i++){ pre = secondNode.previousElementSibling; console.log("pre:"+secondNode.innerText); this.appendChild(secondNode); if(pre){ secondNode = pre; console.log("post"+secondNode.innerText); }else{ console.log(1111111111111); } } }