JavaScript的节点操作

1. 节点操作

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和 nodeValue（节点值）这三个基本属性。

• 元素节点 nodeType 为 1

• 属性节点 nodeType 为 2

• 文本节点 nodeType 为 3 （文本节点包含文字，空格，换行等）

  在实际开发中，节点操作主要操作的是元素节点

1.1 节点层级

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

1.2 父级节点 node.parentNode

• parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
• 如果指定的节点没有返回父节点则返回null

1.3 子节点。

所有子节点 parentNode.childNodes

parentNode.childNodes (标准)
parentNode.childNodes 返回包含指定节点的子节点的集合，该节点为即使更新的集合

注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。

如果只是想要获得里面的元素节点，则需要通过 nodeType 区分处理，所以一般不提倡使用 childNodes

子元素节点 parentNode.children

parentNode.children (非标准)

perentNode.children 是一个只读属性，返回所有的子元素节点，它只返回子元素节点，其余节点不返回。

虽然 children 是一个非标准，但是得到了各个浏览器的支持，所以可以放心使用。

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<script type="text/javascript">
		var ul = document.querySelector('ul');
		console.log(ul.childNodes.length);
		for (var i = 0; i < ul.childNodes.length; i++) {
			if(ul.childNodes[i].nodeType == 1) {
				console.log(ul.childNodes[i])
			}
		}
		console.log("==========");
		console.log(ul.children.length);
	</script>

console

9
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
==========
4

第1个子节点

parentNode.firstChild

• parentNode.firstChild 返回第一个子节点，找不到则返回 null 同样也是包含所有的节点。

最后1个子节点

parentNode.lastChild

• parentNode.lastChild 返回最后一个节点，找不到则返回 null 同样也是包含所有的节点。

第1个子元素节点

parentNode.firstElementChild

• parentNode.firstElementChild 返回第一个子元素节点，找不到则返回 null

最后1个子元素节点

parentNode.lastElementChild

• parentNode.lastElementChild 返回最后一个子元素节点，找不到则返回 null

注意：这两个方法有兼容性问题，ie9以上才支持。

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？

解决方案

1. 如果想要第一个子元素节点，可以使用 parentNode.children[0] 。
2. 如果想要最后一个子元素节点，可以使用 parentNode.children[parentNode.children.length - 1] 。

1.4 兄弟节点。

下一个兄弟节点。

node.nextSibling

• nextSibling 返回当前元素的下一个兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等），找不到返回 null

上一个兄弟节点

node.previousSibling

• node.previousSibling 返回当前元素的上一个兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等），找不到返回 null

下一个兄弟元素节点 （有兼容性问题）

node.nextElementSibling

• nextElementSilbling 返回当前元素的下一个兄弟元素节点，找不到则返回 null

上一个兄弟元素节点 （有兼容性问题）

node.previousElementSibling

• previousElementSilbling 返回当前元素上一个兄弟节点，找不到则返回 null

注意：这两个方法有兼容性问题，ie9以上才支持

解决兼容性问题。

	function getNextElementSibling (element) {
		var el = element;
		while (el = el.nextSibling) {
			if(el.nodeType == 1) {
				return el;
			}
		}
		return null;
	}

1.5 创建节点

document.createElement('tagName')

document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点

1.6 添加节点

node.appendChild(child)

node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾，类似于 css 里面的 after 伪元素。

node.insertBefore(child, 指定元素)

node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面，类似于 css 里面的 before 伪元素。

	<ol>
		<li>li</li>
	</ol>

	<script type="text/javascript">
		var ol = document.querySelector('ol');
		var li = document.createElement('li');
		li.innerText = 'Li'
		ol.insertBefore(li,ol.children[0]);
	</script>

1.7 删除节点

node.removeChild(child)

node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。

	<button type="button">删除</button>
	<ol>
		<li> li1 </li>
		<li> li2 </li>
		<li> li3 </li>
		<li> li4 </li>
		<li> li5 </li>
	</ol>
	<script type="text/javascript">
		var btn = document.querySelector('button');
		var ol = document.querySelector('ol');
		console.log(ol.removeChild(ol.children[4]));
		
		btn.onclick = function() {
			if(ol.children.length>0){
				ol.removeChild(ol.children[ol.children.length-1]);
			}else {
				btn.disabled = true;
			}
		}
	</script>

console

<li>li5</li>

1.8 复制(克隆)节点

node.cloneNode()

node.cloneNode() 方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点。

注意：

1. 如果括号参数为 空，或者为 false，则是 浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
2. 如果括号参数为 true，则是 深度拷贝，会复制节点本身以及里面所有的子节点。

	<ul>
		<li>1111</li>
		<li>2</li>
		<li>3</li>
	</ul>
	
	<script type="text/javascript">
		var ul = document.querySelector('ul');
		// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
		// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
		var lili = ul.children[0].cloneNode(true);
		ul.appendChild(lili);
	</script>

1.9 创建元素的三种方式

document.write()

element.innerHTML

document.createElement()

区别：

1. document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
2. innerHTML 是将内容写入某个 DOM 节点，不会导致页面重绘
3. innerHTML 创建多个元素效率更高，（不要拼接字符串，采用数组形式拼接），结构稍复杂
4. createElement() 创建多个元素效率稍低一点点，但是结构更清晰

总结：不同浏览器下， innerHTML 效率要比 createElement 高

但是文档流执行完毕，则它会导致页面全部重绘

2. innerHTML 是将内容写入某个 DOM 节点，不会导致页面重绘
3. innerHTML 创建多个元素效率更高，（不要拼接字符串，采用数组形式拼接），结构稍复杂
4. createElement() 创建多个元素效率稍低一点点，但是结构更清晰

总结：不同浏览器下， innerHTML 效率要比 createElement 高