js 节点相关内容介绍创建、删除、复制节点

1、节点介绍

1.为什么要学习节点
可以利用父子兄节点关系获取元素
逻辑性强,但是兼容性差.
2.节点概述
(1)网页中所有内容都是节点,用node表示.
(2)所有的节点都可以被修改,也可以创建或删除.
(3)节点至少拥有三个属性值: nodeType(节点类型) nodeName(节点名称) 和nodeValue(节点值)
(4)文本节点分类
i: 元素节点 nodeType为 1
ii: 属性节点 nodeType为 2
iii: 文本节点 nodeType为 3 (文本节点包含文字、空格、换行等)
(5)实际开发中，节点操作主要是操作元素节点。
3、节点层级
DOM树把节点划分为不同的层级关系，常见的是父子兄层级关系。
（1）父级关系
node.parentNode
得到的是离元素最近的父级节点，如果找不到父节点返回为空。
（1）子级关系
-parentNode.childNodes（标准）
得到所有节点，包含属性节点、文本节点、元素节点。
如果想要获取里面的元素节点，要经过循环处理，所以不提倡使用childNodes。
-parentNode.children（非标准）
实际开发中常用的。
-.firstChild
获取第一个元素节点，包含所有节点类型。
-lastChild
获取最后一个元素节点，包含所有节点类型。
-firstElementChild
返回第一个子元素节点；有兼容问题ie9以上可用
-lastElementChild
返回最后一个子元素节点；有兼容问题ie9以上可用。
-实际开发常用方法：
.children[0] ;获得第一个子元素。
.children[元素名.children.length] ;获得最后一个子元素。

2、案例-下拉菜单

<style>a {text-decoration: none;color: #999;}li {list-style: none;}.nav {width: 300px;height: 250px;margin: 20px auto;}.nav ul {padding-inline-start: 0px;}.nav ul li {float: left;margin-top: 10px;}.nav ul li a {position: relative;width: 50px;height: 30px;background-color: #eee;line-height: 30px;text-align: center;margin: 0 20px;}.nav ul li ul {display: none;position: relative;top: 10px;left: 22px;width: 30px;height: 20px;font-size: 12px;padding-inline-start: 0px;}.nav ul li ul li {width: 30px;height: 20px;border: 1px solid yellow;}</style>

<body><div class="nav"><ul><li><a href="">微博</a><ul class="con"><li>私信</li><li>评论</li><li>@我</li></ul></li><li><a href="">微博</a><ul><li>私信</li><li>评论</li><li>@我</li></ul></li><li><a href="">微博</a><ul><li>私信</li><li>评论</li><li>@我</li></ul></li><li><a href="">微博</a><ul><li>私信</li><li>评论</li><li>@我</li></ul></li></ul></div><script>// 获得元素var nav = document.querySelector('.nav');var ul = nav.querySelector('ul');var lis = ul.children;console.log(lis)//  绑定元素 for (var i = 0; i < lis.length; i++) {lis[i].onmouseover = function() {this.children[1].style.display = 'block';}lis[i].onmouseout = function() {this.children[1].style.display = 'none';}}</script></body>

3、兄弟节点

（1）.nextSibling
获取当前元素的下一个兄弟节点，找不到返回null，同样是包含所有节点。
（2）.previousSibling
获取当前元素的上一个兄弟节点，找不到返回null，同样是包含所有节点。
（3）.nextElementSibling
返回当前元素的下一个兄弟元素节点，找不到返回null。有兼容性问题，ie9以上支持。
（4）.previousElementSibling
返回当前元素的上一个兄弟元素节点，找不到返回null。有兼容性问题，ie9以上支持。
如何解决兼容性问题：
可以自己封装一个函数
function getNextElementSibling（element）{
var el=element；
while （el = el.nextSibling）{
if( el.nodeType===1){
return el;
}
}
return null;
}

4、创建节点

document.createElement(‘tagName’)
根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
步骤：
（1）创建节点
（2）添加节点
node.appendChild(child)
node是父级，child是子级；后面追加元素
（3）添加元素的另一种方式
node.insertBefore(child,指定元素)
在指定元素的前面添加节点

5、案例-简单发布留言

分析：点击按钮后，生成一个li ,把li添加到ul里；添加li的同时，把文本域的内容通过li.innerHTML赋值给li

 <body><textarea name="" id="" cols="30" rows="10"></textarea><button>添加</button><ul></ul><script>//获取元素var text = document.querySelector('textarea');var btn = document.querySelector('button');var ul = document.querySelector('ul');//注册事件 btn.onclick = function() {//创建节点liif(text.value==''){alert('请输入内容!');return false;}else{var li = document.createElement('li');//先有li,才能将文本域的内容赋值给lili.innerHTML = text.value;// ul.appendChild(li);//最新的评论添加到最上面ul.insertBefore(li,ul.children[0])text.value='';}   }</script></body>

6、删除节点

node.removeChild(child)
从DOM中删除一个字节点，返回删除的节点。
案例：

<body><button>删除</button><ul><li>熊大</li><li>熊二</li><li>关头强</li></ul><script>//获取元素var ul= document.querySelector('ul');var btn = document.querySelector('button');//注册事件 btn.onclick = function(){if(ul.children.length==0){this.disabled=true;}else{ul .removeChild(ul.children[0]);}}</script></body>

发布留言并删除留言：
在案例5的基础上，创建li 的同时也要创建个a链接

<body><body><textarea name="" id="" cols="30" rows="10"></textarea><button>添加</button><ul></ul><script>//获取元素var text = document.querySelector('textarea');var btn = document.querySelector('button');var ul = document.querySelector('ul');//注册事件 btn.onclick = function() {//创建节点liif (text.value == '') {alert('请输入内容!');return false;} else {var li = document.createElement('li');//先有li,才能将文本域的内容赋值给lili.innerHTML = text.value + "<a href='javascript:;'>删除</a>";// ul.appendChild(li);//最新的评论添加到最上面ul.insertBefore(li, ul.children[0])text.value = '';}//删除元素 获取a链接var as= document.querySelector('a');//绑定事件as.onclick = function(){ul.removeChild(as.parentNode);}}</script></body>

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

node.cloneNode()
复制之后页面并不存在，要添加后才会在页面中显示。node.appendChild(child)添加节点
注意：
1、如果参数括号为空或者为false，则是浅拷贝，只复制结点本身，不克隆里面的子节点。
2、如果参数括号为空或者为true，则是深拷贝，复制结点本身，并克隆里面的子节点。