700字范文 > DOM（三）：节点操作——获取父子兄节点（查）添加和删除元素节点

DOM（三）：节点操作——获取父子兄节点（查）添加和删除元素节点

时间：2020-10-10 07:58:16

一、节点之间的层级：父子兄

节点主要有父子兄关系

1.父节点操作

语法：子节点.parentNode，得到的是一个元素不是集合

比如我选了一个类名叫zzy的元素

var zzy = document.querySelector('.zzy');

那么要获取zzy 的父节点，只需要zzy.parentNode

console.log(zzy.parentNode);

注意，得到的时离该元素最近的父节点（亲爹），如果找不到父节点，就返回null

2.子节点操作

（1）父节点.childNodes（目测用的不多）

这个得到的是所有的子节点，除了我们想要的元素节点，还有换行、空格等文本节点，所以要想拿到元素，就要循环遍历，因为元素节点nodeType是1，属性2，文本3。这个真的是麻烦的一塌糊涂

（2）父节点.children（这个才是常用的）

这个只返回子元素节点，其他的都滚蛋，不错

3.获取第一个子元素和最后一个子元素

父节点.firstChild和父节点,lastChild，和父节点.childNodes差不多，返回的是所有类型节点中的第一个和最后一个，所以这两个用的不多，真正带劲的是：

父节点.firstElementChild和父节点.lastElementChild，这俩都是返回的第一个和最后一个元素节点，不错

但是！这个不错的方法，只有IE9以上支持。

这可咋办！

不要怕，在实际开发中，我们都会用父元素.children[i]，既没有兼容问题，又能返回首尾元素节点

比如这里有这么几个东西

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

那么首尾元素分别是：

var ul = document.querySelector('ul');console.log(ul.children[0]);console.log(ul.children[ul.children.length - 1]);

案例：下拉菜单

下拉菜单的常用布局：头部放个ul,ul里有几个li,每个li里面上边a,下边放ul包几个li

先放html和css

* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}a {color: black;text-decoration: none;}.box {margin: 100px auto;width: 400px;height: 50px;}.box>li {float: left;/* position: relative; */width: 100px;height: 50px;line-height: 50px;text-align: center;}.box>li a {display: inline-block;width: 100px;height: 50px;}.box>li a:hover {background-color: #ccc;}.box ul {display: none;/* position: absolute; */left: 0;top: 50px;border-left: 1px solid red;border-right: 1px solid red;}.box ul li {border-bottom: 1px solid red;}.box li ul li:hover {background-color: rgb(247, 149, 149);}

<ul class="box"><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><li><a href="#">微博</a><ul><li>私信</li><li>评论</li><li>@我</li></ul></li></ul>

然后是JavaScript，其实这部分代码比较好理解，就是我第一步获取元素老写错

var box = document.querySelector('.box'); //这个地方老写错……var lis = box.children; //得到4个lifor (var i = 0; i < lis.length; i++) {lis[i].onmouseover = function () {//鼠标放上去，这个li的第二个孩子（ul）显示this.children[1].style.display = 'block';}lis[i].onmouseout = function () {this.children[1].style.display = 'none';}}

4.获取兄弟节点

和父子一样，有个获取下一个（全部中的下一个）节点和上一个节点的方法，没什么p用

真正有用的是下面这个，但是又有兼容性问题

那咋办呢？实际上兄弟节点用的少，了解下就行了

二、节点的增删

1.创建和添加元素节点

先创建，再添加

比如我要创建一个li的元素节点

var myli = document.createElement('li');

（1）父元素.appendChild(要添加的元素)

先获取它的父元素，然后把我创建的li添加进去，默认是添加到父元素的尾部

var ul = document.querySelector('ul');//把我创建的li放到ul里面去,默认添加到尾部ul.appendChild(myli);

（2）父元素.insertBefore(要添加的元素节点，添加到谁前面)

下面这个代码就是在ul的第一个孩子前添加我创建的li

ul.insertBefore(myli, ul.children[0]);

（3）简单添加留言案例

<textarea name="" id="content" cols="30" rows="10"></textarea> <button>发布</button><ul class="my"><li></li></ul>

注意获取textarea和input里面的值是.value

//简单留言案例var content = document.querySelector('textarea');//获取文本域var my = document.querySelector('.my'); //获取ulvar btn = document.querySelector('button'); //获取button//点击按钮就生成一个li，添加到ul里btn.onclick = function () {if (content.value == '') {alert('您没有输入任何内容');} else {var li = document.createElement('li');li.innerHTML = content.value;// my.appendChild(li);my.insertBefore(li, my.children[0]);}}

2.删除元素节点

（1）使用父元素.removeChild(子元素)

<button>删除</button><ul><li>zzy</li><li>aoaoao</li><li>3213</li></ul>

var ul = document.querySelector('ul');var btn = document.querySelector('button');btn.onclick = function () {if (ul.children.length != 0) {ul.removeChild(ul.children[0]);} else {//如果删完了就禁用按钮this.disabled = true;}}

（2）添加留言和删除留言（上面案例的升级版）

这里遇到个问题就是删除留言的代码要放到btn.onclick里面，要不然会先执行下面这段（注意代码的执行顺序），等点击btn的时候才添加a标签，那样先获取的as就是空了

//简单添加删除留言案例var content = document.querySelector('textarea');//获取文本域var my = document.querySelector('.my'); //获取ulvar btn = document.querySelector('button'); //获取button//1.添加留言：点击按钮就生成一个li，添加到ul里btn.onclick = function () {if (content.value == '') {alert('您没有输入任何内容');} else {var li = document.createElement('li');//把textarea里面的内容取过来，然后再添加一个a标签li.innerHTML = content.value + "<a href='javascript:;'>删除</a>";//卧槽，还能这么写// my.appendChild(li);my.insertBefore(li, my.children[0]);}//2.删除留言//先获取a标签//这段代码要放到btn.onclick里面，要不然会先执行下面这段，等点击btn的时候才添加a标签，那样as就是空了var as = document.querySelectorAll('a');for (var i = 0; i < as.length; i++) {as[i].onclick = function () {my.removeChild(this.parentNode);}}}

3.复制元素节点

（1）语法：node.cloneNode()

<ul><li>1</li><li>2</li><li>3</li></ul>

把ul里的第一个孩子复制过来，放到ul的尾部

var ul = document.querySelector('ul');var li1 = ul.children[0].cloneNode();ul.appendChild(li1);

（2）浅拷贝和深拷贝

node.cloneNode()括号里默认是false，也就是浅拷贝，只copy元素不copy内容

node.cloneNode(true)，如果括号里是true就是深拷贝，copy元素和内容

三、动态生成表格

创建html和css

table {width: 400px;margin: 100px auto;text-align: center;border-collapse: collapse;}th,td {border: 1px solid #333;}thead tr {height: 40px;background-color: #ccc;}tbody tr {height: 30px;}

<table cellspacing="0"><thead><tr><th>姓名</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody></tbody>

1.先准备好学生的数据,以对象形式存储在数组中

var datas = [{names: '彭于晏',subject: 'javascript',score: 87},{names: '小婷',subject: 'javascript',score: 100}, {names: '张大仙',subject: 'javascript',score: 99}, {names: '刘亦菲',subject: 'javascript',score: 60}]

2.创建行tr

var tbody = document.querySelector('tbody');for (var i = 0; i < datas.length; i++) {//先创建，再添加，二者要绑定在一起var tr = document.createElement('tr');tbody.appendChild(tr);}

3.创建行里面的单元格td

var tbody = document.querySelector('tbody');for (var i = 0; i < datas.length; i++) {//先创建，再添加，二者要绑定在一起var tr = document.createElement('tr');tbody.appendChild(tr);//3.行里面创建单元格tdfor (var k in datas[i]) {//遍历对象，k是属性的个数，有几个属性就循环几次var td = document.createElement('td');tr.appendChild(td);}

4.添加td里面的数据

每个单元格的数据可以用对象里的datas[i][k]来获取

我的写法：

我一开始想获取所有的td元素数组，然后设置一个flag来获取相应的td，但是我发现这样的话因为每次循环td个数都在增加，所以td的数组也在变化，所以intd[flag]并不能添加每一行的数据，每次添加都是添加到第一行，除非flag=3*i。后来想了个办法，可以使用tr.children[flag]，这样就可以实现给每行的每个单元格添加相应的数据

var tbody = document.querySelector('tbody');for (var i = 0; i < datas.length; i++) {//先创建，再添加，二者要绑定在一起var tr = document.createElement('tr');tbody.appendChild(tr);//3.行里面创建单元格tdvar flag = 0;for (var k in datas[i]) {//遍历对象，k是属性的个数，有几个属性就循环几次var td = document.createElement('td');tr.appendChild(td);// var intd = document.getElementsByTagName('td'); //这是获取所有的td，包括前几行，不对// intd[flag].innerHTML = datas[i][k];tr.children[flag].innerHTML = datas[i][k];flag++;}}

看了老师的写法，我才知道我想多了……

其实只需要每次添加完td后，直接往td塞数据，然后再添加到tr里就行

5.添加删除操作的链接

var tbody = document.querySelector('tbody');for (var i = 0; i < datas.length; i++) {//先创建，再添加，二者要绑定在一起var tr = document.createElement('tr');tbody.appendChild(tr);//3.行里面创建单元格tdfor (var k in datas[i]) {//遍历对象，k是属性的个数，有几个属性就循环几次var td = document.createElement('td');//4.给每个单元格先塞数据，再放到tr里td.innerHTML = datas[i][k];tr.appendChild(td);}//5.添加删除操作的链接var tdend = document.createElement('td');tdend.innerHTML = "<a href='javascript:;'>删除</a>";tr.appendChild(tdend);}

6.最后一步，给删除操作添加删除事件

//2.先创建行tr，有几个人就创建几行var tbody = document.querySelector('tbody');for (var i = 0; i < datas.length; i++) {//先创建，再添加，二者要绑定在一起var tr = document.createElement('tr');tbody.appendChild(tr);//3.行里面创建单元格tdfor (var k in datas[i]) {//遍历对象，k是属性的个数，有几个属性就循环几次var td = document.createElement('td');//4.给每个单元格先塞数据，再放到tr里td.innerHTML = datas[i][k];tr.appendChild(td);}//5.添加删除操作的链接var tdend = document.createElement('td');tdend.innerHTML = "<a href='javascript:;'>删除</a>";tr.appendChild(tdend);}//6.给删除按钮添加事件var as = document.querySelectorAll('a'); //这里一定要是Allfor (var i = 0; i < as.length; i++) {as[i].onclick = function () {tbody.removeChild(this.parentNode.parentNode);}}