原生js底层基础（十七）DOM

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
• 文档节点 —9
• DocumentFrame —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不好使）
• innerHTML
• setAttribute
• getAttribute

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);
			}
				
		}
			
	}