Node对象
Node对象的概念
首先了解一下Node对象怎么用。DOM的标准规范中提供了Node对象，该对象主要提供了用于解析DOM节点树结构的属性和方法。
DOM树结构主要是依靠节点进行解析，成为DOM节点树结构。Node对象是解析DOM节点树结构的主要入口。
Node对象提供的属性和方法，可以实现遍历节点、插入节点和替换节点的操作。
继承链关系
Node对象是继承于EvebtTarget对象的，EvebtTarget是一个用于接收事件的对象。
代码示例
console.log(Node.prototype inseabceof EventTarget);DOM的标准规范中的Document对象和Element对象都是继承于Node对象的。
代码示例
console.log(Document.prototype instanceof Node);
console.log(Element.prototype instanceof Node);测试Node对象
由于Node对象是DOM底层封装的对象，所以我们并不能通过直接打印Node对象来查看其属性或方法。
代码示例
console.log(Node.prototype);运行HTML页面后，打开开发者工具就可以看到隐藏的属性或方法。
判断节点类型
判断节点类型
Node对象提供了nodeName、nodeType和nodeValue分别可以用于获取指定节点的节点名称、节点类型和节点的值。
DOM节点树结构中，我们开发常用的节点有：
1.元素节点：表示HTML页面中的标签或结构。
2.属性节点：表示HTML页面中的开始标签包含的属性
3.文本节点：表示HTML页面中的标签所包含的文本内容。
nodeName属性
Node对象的nodeName属性用于获取指定的节点名称。
var str = node.nodeName;针对不同的节点，nodeName返回的节点名称是不同的
1.Document文档节点：#document
2.Element元素节点：元素节点的元素名
3.Attr属性节点：属性节点的属性名
4.Text文本节点：#text
nodeType属性
Node对象的nodeType属性用于获取指定节点的节点类型
var type = node.nodeType;type是一个整数，其代表的是节点类型，对不同的节点类型，nodeType返回的节点类型不同。
nodeValue属性
Node对象的nodeValue属性用于获取节点的节点值
var value = node.nodeValue;value是一个包含当前节点的值的字符串
针对不同的节点类型，nodeValue返回的节点类型是不同的
1.Document文本节点返回null属性值
2.Element元素节点返回null属性值
3.Attr属性节点返回属性节点的属性值
4.Text文本节点返回文本节点的内容
遍历节点
获取父节点
通过HTML页面中指定元素查找父级节点，我们可以使用Node对象的parentNode属性实现
var pNode = node.parentNode;在一个元素节点的父节点，可能是一个元素节点，也可能是一个文档节点。
获取父元素节点
Node对象出了提供了parentNode属性可以获取指定节点的父节点之外，还提供了parentElement属性获取指定节点的父元素节点
在如果一个节点没有父节点，或者父节点不是一个元素节点的话，parentElement属性返回null。
父节点与父元素节点的区别
所谓的父节点，并没有指定某个接待的父节点一定是哪个类型的节点。而父元素节点，指定了某个节点的父节点一定是元素节点
1.parentNode：获取指定节点的父节点，其父节点不一定是元素节点。
2.parentElement：获取指定节点的元素节点，其父几点不许是元素节点
如果我们获取<html>元素的父节点的话，就是document文档节点。而document文档节点并不是一个元素节点。
获取子节点
通过HTML页面中指定元素查找其子节点，我们可以通过以下Node对象的属性实现：
1.chiNode：获取指定节点的所有子节点。
2.firstChild：获取指定节点的第一个子节点。
3.lasrChild：获取指定节点的最后一个子节点
Node对象提供chidNode属性用于获取HTML页面中指定节点的所有子节点。
var ndList = Node.childNode;chidNode属性返回值ndList是一个NodeList对象，并且为只读。该属性获取一个包含指定节点的所有子节点的集合。
获取第一个子节点。
var first_child = node.firstChild;firstChild属性返回的first_child博爱是当前节点的第一个子节点的引用。
获取最后一个子节点
var last_child = node.lastChild;lastChild属性返回的last_Child表示当前节点的最后一个子节点的引用
空白节点的解决方案
在开发中，空白节点的问题将DOM节点树结构的解析及操作增加了不少的难度和麻烦，这里提供了一种比较简单有效的解决方式：
1.弃用DOM中Node对象用于获取指定节点的子节点和兄弟节点的属性。
2.通过使用getElementsByTagName（）方法实现相应功能
删除节点
Node对象提供了removeChild()方法实现从HTML页面中删除之低昂节点。
var oldChild = node.removeChild(child);
element.removeChild(child);调用removeChild（）方法的node表示child参数的父节点。
child参数表示要删除的节点。
注意事项
被删除的节点是否从内存中被销毁，Mozilla社区有这样一段描述；
被溢出的这个子节点仍然存在内存中，只是内有添加到当前文档的DOM树中。因此，你还可以把这个节点重新添加会文档中。
替换节点
Node对象提供了replaceChild（）方法实现HTMLL页面中节点的替换功能
<head>
<meta charset="UTF-8">
<title>替换节点</title>
</head>
<body>
<ul id="parent">
<li>苹果</li>
<li id="mi">小米</li>
<li>锤子</li>
</ul>
<ul id="game">
<li>星际争霸</li>
<li id="ms">魔兽世界</li>
<li>王者荣耀</li>
</ul>
<script>
// 1.获取目标节点的父节点
var parent = document.getElementById('parent');
// 2.获取目标节点
var mi = document.getElementById('mi');
// 3.创建新节点
var newLi = document.createElement('li');
var textNode = document.createTextNode('华为');
newLi.appendChild(textNode);
var ms = document.getElementById('ms');
/*
parentNode.replaceChild(newChild,currentChild)
* 参数
* parentNode - 表示目标(被替换)节点的父节点
* newChild - 表示替换(新)节点
* currentChild - 表示目标节点
* 情况
* 是新创建的节点 -> 替换
* 是页面已存在的节点 -> 移动+替换
*/
parent.replaceChild(ms, mi);
</script>
</body>复制节点
Node对象提供了cloneNode（）方法实现HTML页面中节点的复制功能。
<head>
<meta charset="UTF-8">
<title>复制节点</title>
</head>
<body>
<button id="btn">按钮</button>
<script>
var btn = document.getElementById('btn');
/*
node.cloneNode(deep)
* deep参数 - 是否复制当前节点的后代节点
* true - 表示复制后代节点
* false - 默认值，表示不复制后代节点
* 注意 - 复制操作时，注意ID属性的值
*/
var newBtn = btn.cloneNode(true);
var body = document.body;
body.appendChild(newBtn);
</script>
</body>注意事项
克隆一个元素街二店会拷贝它所有的属性以及属性值，当然也包括属性上绑定的事件，但不会拷贝那些使用addEventListener（）方法或者node.onclick = fn这种JavaScript动态绑定的事件。
在使用Node.appendChild（）或其他类型的方法将拷贝的节点添加到文档中之前，那个拷贝点并不属于当前文档树的一部分。也就是说，他没有父节点。
如果deep参数设置为false，则不会克隆它的任何子节点。该子节点所包含的所有文本也不会被克隆，因为文本本身也是一个或多个的Text节点
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。