Web前端学习第3章 JavaScript基础教程15 DOM操作

原创

学习猿地

修改于 2020-06-17 17:38:20

6450

修改于 2020-06-17 17:38:20

文章被收录于专栏：学习猿地

一、节点的分类

元素节点
属性节点
文本节点上一节课我们讲解了获取元素节点，操作属性节点。本节课我们讲解添加和删除元素节点和编辑文本节点。

二、文本节点

在html中我们有一个h1标签和一个按钮，h1标签内已经有了一段文本。当我们点击按钮的时候，在h1标签中插入“hello world” 示例代码如下:

 1 <h1>内容：</h1>
 2 <button>添加文本节点</button>
 3 <script>
 4     var h1 = document.querySelector("h1");
 5     var btn = document.querySelector("button");
 6 
 7     btn.onclick = function(){
 8         var textNode = document.createTextNode("hello world");
 9         //createTextNode方法可以创建一个文本节点
10         h1.appendChild(textNode);
11         //appendChild方法可以将textNode节点添加到h1标签中。
12     }
13 </script>

在DOM中还有另一个属性可以更方便地获取和设置文本节点，这个属性是innerHTML,我们写一个简单的例子来测试innerHTML属性示例代码如下：

 1 <h1>内容：</h1>
 2 <button>添加文本节点</button>
 3 <script>
 4     var h1 = document.querySelector("h1");
 5     var btn = document.querySelector("button");
 6     btn.onclick = function(){
 7         h1.innerHTML = "hello world";
 8         //设置h1的文本节点，innerHTML的内容会完全覆盖原节点的内容
 9     }
10 </script>

对比着两种方法，第一种方法需要创建文本节点，然后通过appendChild方法将节点追加到之前文本内容的后面，第二种方法则是直接用innerHTML覆盖之前文本节点的内容。如果要实现demo01的功能，需要改写一下事件内的代码

1 var str = h1.innerHTML;//获取文本内容
2 h1.innerHTML =str + "hello world"; //原文本内容与新文本内容连接

三、创建和添加元素节点

上一节我们讲解了如何获取和设置文本节点，本节讲解如何创建和添加元素节点。创建原始节点可以使用createElement方法，添加元素节点仍然可以用appendChild方法。接下来我们来一步一步完成一个任务列表的功能，html代码如下所示：

1 <button>添加节点</button>
2 <ul>
3     <li>香蕉</li>
4     <li>苹果</li>
5     <li>鸭梨</li>
6 </ul>

我们要是先一个功能，当点击按钮的时候，在列表中添加一个li元素代码如下

1 var btn = document.querySelector("button");
2 var ul = document.querySelector("ul");
3 btn.onclick = function(){
4     var li = document.createElement("li"); //创建一个元素节点，li元素
5     ul.appendChild(li); //在ul元素中添加li元素
6 }

在这个案例中，我们已经成功地在ul标签中添加了li元素，但是li元素并没有文本节点，我们进一步改进点击事件中的内容

1 var li = document.createElement("li"); 
2 li.innerHTML = "鸭梨";
3 ul.appendChild(li);

通过上面的代码，我们已经可以在ul中添加带有文本节点的li元素了，但是文本节点是固定的“鸭梨”，我们还可以进一步通过一个文本框，让用户自己填写要插入的内容

 1     <script>
 2         var btn = document.querySelector("button");
 3         var ul = document.querySelector("ul");
 4         var text = document.querySelector("input");
 5         btn.onclick = function(){
 6             var li = document.createElement("li"); //创建一个元素节点，li元素
 7             ul.appendChild(li); //在ul元素中添加li元素
 8             li.innerHTML = text.value
 9         }
10     </script>

四、删除元素节点

我们可以通过removeChild方法删除元素,下面的例子我们来实现点击按钮，删除h1标签的效果示例代码如下:

 1 <button>删除</button>
 2 <div class="box">   
 3     <h1>待删除的内容</h1>
 4 </div>
 5 <script>
 6     var btn = document.querySelector("button");
 7     var box = document.querySelector(".box");
 8     var h1 = document.querySelector("h1");
 9     btn.onclick = function(){
10         box.removeChild(h1);
11     }
12 </script>

通过上面的代码可以知道，删除一个元素需要知道他的父级元素，然后通过父级元素的removeChild方法删除子级元素，那么如果不确定删除的元素的父级是哪有个元素，我们该如何获取元素的父级元素呢，可以使用parentNode方法，我们直接来改写上面的代码

 1 <button>删除</button>
 2 <div>   
 3     <h1>待删除的内容</h1>
 4 </div>
 5 <script>
 6     var btn = document.querySelector("button");
 7     var h1 = document.querySelector("h1");
 8     btn.onclick = function(){
 9         var box = h1.parentNode;
10         box.removeChild(h1);
11     }
12 </script>

下面我们来实现一个删除水果列表中水果的功能，html代码如下示例代码如下:

1 <ul>
2     <li><span>香蕉</span> <span class="del">删除</span></li>
3     <li><span>苹果</span> <span class="del">删除</span></li>
4     <li><span>鸭梨</span> <span class="del">删除</span></li>
5     <li><span>芒果</span> <span class="del">删除</span></li>
6     <li><span>草莓</span> <span class="del">删除</span></li>
7 </ul>

我们要实现点击删除按钮的时候，删除span父级的li元素

1 var aDel = document.querySelectorAll(".del");
2 for(var i = 0;i<aDel.length;i++){
3     aDel[i].onclick = function(){
4         var parent = this.parentNode
5         parent.parentNode.removeChild(parent)
6     }
7 }

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html

jquery

网站

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html

jquery

网站

登录后参与评论

0 条评论

热度