一、节点的分类
元素节点
属性节点
文本节点
上一节课我们讲解了获取元素节点，操作属性节点。本节课我们讲解添加和删除元素节点和编辑文本节点。
二、文本节点
在html中我们有一个h1标签和一个按钮，h1标签内已经有了一段文本。当我们点击按钮的时候，在h1标签中插入“hello world”
示例代码如下:
1
内容：
2添加文本节点 3 4varh1 = document.querySelector("h1"); 5varbtn = document.querySelector("button"); 6 7btn.onclick =function(){ 8vartextNode = document.createTextNode("hello world"); 9//createTextNode方法可以创建一个文本节点10 h1.appendChild(textNode);11//appendChild方法可以将textNode节点添加到h1标签中。12 }13在DOM中还有另一个属性可以更方便地获取和设置文本节点，这个属性是innerHTML,我们写一个简单的例子来测试innerHTML属性
示例代码如下：
1
内容：
2添加文本节点 3 4varh1 = document.querySelector("h1"); 5varbtn = document.querySelector("button"); 6btn.onclick =function(){ 7h1.innerHTML = "hello world"; 8//设置h1的文本节点，innerHTML的内容会完全覆盖原节点的内容 9 }10对比着两种方法，第一种方法需要创建文本节点，然后通过appendChild方法将节点追加到之前文本内容的后面，第二种方法则是直接用innerHTML覆盖之前文本节点的内容。如果要实现demo01的功能，需要改写一下事件内的代码
1varstr = h1.innerHTML;//获取文本内容2h1.innerHTML =str + "hello world";//原文本内容与新文本内容连接
三、创建和添加元素节点
上一节我们讲解了如何获取和设置文本节点，本节讲解如何创建和添加元素节点。创建原始节点可以使用createElement方法，添加元素节点仍然可以用appendChild方法。接下来我们来一步一步完成一个任务列表的功能，html代码如下所示：
1添加节点2
- 3
- 香蕉 4
- 苹果 5
- 鸭梨 6
我们要是先一个功能，当点击按钮的时候，在列表中添加一个li元素
代码如下
1varbtn = document.querySelector("button");2varul = document.querySelector("ul");3btn.onclick =function(){4varli = document.createElement("li");//创建一个元素节点，li元素5ul.appendChild(li);//在ul元素中添加li元素6}
在这个案例中，我们已经成功地在ul标签中添加了li元素，但是li元素并没有文本节点，我们进一步改进点击事件中的内容
1varli = document.createElement("li"); 2li.innerHTML = "鸭梨";3ul.appendChild(li);
通过上面的代码，我们已经可以在ul中添加带有文本节点的li元素了，但是文本节点是固定的“鸭梨”，我们还可以进一步通过一个文本框，让用户自己填写要插入的内容
1 2varbtn = document.querySelector("button"); 3varul = document.querySelector("ul"); 4vartext = document.querySelector("input"); 5btn.onclick =function(){ 6varli = document.createElement("li");//创建一个元素节点，li元素 7ul.appendChild(li);//在ul元素中添加li元素 8li.innerHTML = text.value 9 }10
四、删除元素节点
我们可以通过removeChild方法删除元素,下面的例子我们来实现点击按钮，删除h1标签的效果
示例代码如下:
1删除 2
3待删除的内容
4 5 6varbtn = document.querySelector("button"); 7varbox = document.querySelector(".box"); 8varh1 = document.querySelector("h1"); 9btn.onclick =function(){10 box.removeChild(h1);11 }12通过上面的代码可以知道，删除一个元素需要知道他的父级元素，然后通过父级元素的removeChild方法删除子级元素，那么如果不确定删除的元素的父级是哪有个元素，我们该如何获取元素的父级元素呢，可以使用parentNode方法，我们直接来改写上面的代码
1删除 2
3待删除的内容
4 5 6varbtn = document.querySelector("button"); 7varh1 = document.querySelector("h1"); 8btn.onclick =function(){ 9varbox = h1.parentNode;10 box.removeChild(h1);11 }12下面我们来实现一个删除水果列表中水果的功能，html代码如下
示例代码如下:
1
- 2
- 香蕉 删除 3
- 苹果 删除 4
- 鸭梨 删除 5
- 芒果 删除 6
- 草莓 删除 7
我们要实现点击删除按钮的时候，删除span父级的li元素
1varaDel = document.querySelectorAll(".del");2for(vari = 0;i
网友评论