1.在JS中节点可分为父节点、子节点、兄弟节点。 又可分为元素节点、属性节点、文本节点
2.节点至少拥有三个基本属性，nodeType(节点类型）、nodeName(节点名称）、nodeValue(节点值）
以往获取节点只能通过一次一次的输入，利用节点进行操作可以一步获取。获取方法为node.parentNode
具体例子如下
<body>
<div class="grandfather">
<div class="father">
<span class="son">×</span>
</div>
</div>
<script>
// 1. 以往获取节点方法
var son= document.querySelector('.son');
var father = document.querySelector('.father');
var grandfather = document.querySelector('.grandfather');
// 1. 利用节点操作获取父节点方法
console.log(son.parentNode);
//得到的是离元素最近的父级节点 注意：如果找不到父节点就返回为 null
</script>
</body>
运行结果如下
记录八个子节点获取方法
实例如下所示
<body>
<ul>
<li>son1</li>
<li>son2</li>
<li>son3</li>
</ul>
<script>
// 以往获取节点的方法
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 1. 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等
console.log(ul.childNodes);
// 2. 子节点 childNodes[i] 获取第i-1个子节点
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
console.log(ul.childNodes[2].nodeType);
// 3. children 获取所有的子元素节点（常用）
console.log(ul.children);
// 4. children[i] 获取第i-1个子元素节点（常用）
console.log(ul.children[0]);
// 5. node.firstChild 获取第一个子节点 不管是文本节点还是元素节点
console.log(ul.firstChild.nodeType);
// 6. node.lastChild 获取最后一个子节点 不管是文本节点还是元素节点
console.log(ul.lastChild.nodeType);
// 7. node.firstElementChild 获取第一个子元素节点，ie9才支持
console.log(ul.firstElementChild);
// 8. cnode.lastElementChild 获取最后一个子元素节点，ie9才支持
console.log(ul.lastElementChild);
</script>
</body>
运行结果如下
记录四个兄弟节点获取方法
实例如下所示
<body>
<div>brother1</div>
<span>brother2</span>
<script>
var div = document.querySelector('div');
// 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
console.log(div.nextSibling);
// 2.previousSibling 上一个兄弟节点 包含元素节点或者 文本节点等等
console.log(div.previousSibling);
// 3. nextElementSibling 得到下一个兄弟元素节点,如果不存在，则返回null
console.log(div.nextElementSibling);
// 4. previousElementSibling 得到上一个兄弟元素节点,如果不存在，则返回null
console.log(div.previousElementSibling);
</script>
</body>
运行结果如下
创建节点：document.createElement(‘tagName’)
添加节点：
1.node.appendChild(child) 其中node 父级 child 是子级 后面追加元素，此操作类似数组中的push
2.node.insertBefore(child, 指定元素) 该方法是将节点添加到指定元素的前面
具体实例如下所示
<body>
<ul>
<li>添加节点</li>
</ul>
<script>
// 1. 创建节点元素节点
var li = document.createElement('li');
// 2. 添加节点方法1 node.appendChild(child) node 父级 child 是子级 后面追加元素 类似于数组中的push
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加节点方法2 node.insertBefore(child, 指定元素);该方法是将节点添加到指定元素的前面
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
// 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
</script>
</body>
运行结果如下
删除节点：node.removeChild(child)
具体实例如下图所示
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// 1.获取元素
var ul = document.querySelector('ul');
// 2. 删除元素 node.removeChild(child)
ul.removeChild(ul.children[1]);
console.log(ul);
</script>
</body>
运行结果如下
浅拷贝：node.cloneNode() 浅拷贝的意思是只复制标签不复制里面的内容
深拷贝：node.cloneNode(true) 深拷贝的意思是复制标签以及里面的内容
具体实例如下图所示
<body>
<ul>
<li>1</li>
</ul>
<script>
var ul = document.querySelector('ul');
// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
var li1 = ul.children[0].cloneNode();
var li2 = ul.children[0].cloneNode(true);
ul.appendChild(li1);
ul.appendChild(li2);
console.log(ul);
</script>
</body>
运行结果如下
