JS（15）节点操作

1.节点

-- 网页中的所有内容都是节点（标题、属性、文本、注释等），在Dom中，节点使用node来表示。
-- Dom树中所有节点可以通过JS来访问，所有节点可被修改，创建删除。
-- 一般，节点至少有，nodeType，nodeName，nodeValue这三个基本属性
	-- 元素节点	nodeType 为 1
	-- 属性节点  nodeType 为 2
	-- 文本节点  nodeType 为 3 （包括文字，空格，换行）
	在实际开发中，节点操作的是元素节点

2.父级节点

-- node.parentNode
	-- parentNode 属性可以返回某节点的父级节点，最近的父级节点（亲爸爸）
	-- 如果指定的节点没有父级节点则返回null

3.子节点

3.1.parentNode.childNodes

-- 返回包含指定节点的子节点的集合
-- 注意：返回值里面包含来所有的子节点，包括元素节点，文本节点等。
-- 如果只想要获得里面的元素节点，则需要专门处理，不推荐子元素节点。

3.2.parentNode.children

-- 只读属性，返回所有的子元素节点，只返回子元素节点。

3.3.parentNode.firstChild （第一个子节点）

-- 返回第一个子节点，找不到返回null，同样，也是包含所有的节点。

3.4.parentNode.lastChild （最后一个子节点）

-- 返回一个子节点，找不到返回null，同样，也是包含所有的节点。

3.5.第一个子元素节点（IE9+）

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

3.6.最后一个子元素节点（IE9+）

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

注意⚠️：
实际开发：
第一个子元素节点：parentNode.children[0]
最后一个子元素节点：parentNode.children[parentNode.children.length-1]

4.兄弟节点

4.1.下一个兄弟节点

举个🌰：div.nextSibling

4.2.上一个兄弟节点

举个🌰：div.previousSibling
包括元素节点或者文本节点

4.3.下一个兄弟元素节点 （IE9+）

举个🌰：div.nextElementSibling

4.4.上一个兄弟节点（IE9+）

举个例子：div.previousElementSibling

4.5.可以封装：

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

5.创建节点

-- document.createElement('tagName')
-- 创建有tagName指定的HTML元素，因为这些元素原本不存在，是动态生成的，所以也被称为动态创建元素节点。

6.添加节点

6.1.node.appendChild(child)

将一个节点添加到指定父级节点的子节点列表末尾，类似于css里的after伪元素

6.2.node.insertBefore(child,指定元素)

将一个节点添加到父节点的指定子节点的前面，类似于css里的before伪元素

7.复制节点（克隆节点）

node.cloneNode()
返回调用该方法的节点的一个副本
注意：
	1.如果括号参数为空或者false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
	2.如果括号参数为true，则是深拷贝，会复制节点本身以及里面所有的子节点。

8.三种动态创建元素区别

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