DOM中的节点操作

最新推荐文章于 2023-09-09 22:41:11 发布

FL_csdn1

最新推荐文章于 2023-09-09 22:41:11 发布

阅读量186

点赞数

分类专栏： Web前端 JavaScript 文章标签： js 经验分享其他 javascript

本文链接：https://blog.csdn.net/FL_csdn1/article/details/114495622

版权

Web前端同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

JavaScript

6 篇文章 0 订阅

订阅专栏

为什么要学习节点操作

通常情况下我们利用js获取元素的方式是利用DOM提供的方法获取元素，例如document.getElementById（），document.getElementsByTagName()，document.querySelector（）等类似这样的方法。这样的方式虽然可以操作DOM中的一些元素，但这种获取元素的方式就逻辑性不强，较繁琐，需要用到的元素就要全部都获取过来。那么，节点操作就可以很好的避免以上获取元素的弊端，可以利用父子兄节点的关系获取元素，但是兼容性就会稍微的差一些。总结来说节点操作使我们获取元素时更加简单。

什么是节点

学习节点操作之前我们需要了解一下什么是节点。
网页内容中所有的内容都是节点，例如标签，属性，文本，注释等，在DOM中节点用node来表示。

在这里插入图片描述
这张图就是网页中节点的DOM树
页面中所有的节点都可以被修改，创建，删除。

节点一般有三个基本属性

nodeType(节点类型)

元素节点 nodeType 为1
属性节点弄得Type 为2
文本节点 nodeType 为3（文本节点包括文字，空格，换行）

nodeName（节点名称）
nodeValue（节点值）

总结一下：在页面中所有的元素都可以看作为节点，一般在开发中对元素节点的操作比较多。

节点层级

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系
在这里插入图片描述

获取元素

获取父子节点

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">
      <span class="close">
        <a href="" class="a"></a>
      </span>
    </div>
    <script>
      var son = document.querySelector(".close");
      var parent = document.querySelector(".box");
      var a= document.querySelector(".a");
    </script>
  </body>
</html>

在没有学习节点操作之前，我们获取元素就像上面的方式一样，需要将所用到的元素全部获取过来，上面的案例只有两个元素，如果一个页面的元素有上百个，这种方式就会比较复杂，毫无逻辑可循。但我们使用了节点操作，情况就会大不一样。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">
      <span class="close"></span>
    </div>
    <script>
      var son = document.querySelector(".close");
      son.parentNode;
      son.childNodes;
    </script>
  </body>
</html>

我们只需获取一个节点的元素，然后使用parentNode，childNodes获取这个元素的父节点和子节点

注意：在获取元素子节点时使用childNodes获取节点时会把此节点中的所有节点都会获取过来包括文本节点，所以我们可以用children这个方法，这个方法就可以将所有的子元素节点获取过来（不包括文本节点）

获取子节点中第一个子元素和最后一个子元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <script>
      var ul = document.querySelector("ul");
      ul.firstElementChild;
      ul.lastElementChild;
    </script>
  </body>
</html>

我们可以通过firstElementChild，lastElementChild 获取第一个子节点和最后一个子节点。我们也可用children[0]，children[ul.children.length]这样的伪数组方式获取。(这样的方式兼容性较好)

获取兄弟节点

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
    <script>
      var ul = document.querySelector("ul");
      ul.previousElementSibling;
      ul.nextElementSibling;
    </script>
  </body>
</html>

通过nextElementSibling，previousElementSibling获取上一个兄第节点或者下一个兄弟节点。（如果没有找到兄弟节点返回null）。

创建节点并添加

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul></ul>
    <script>
      var ul = document.querySelector("ul");
      var li = document.createElement("li");
      ul.appendChild(li);
      ul.insertBefore(li,ul.children[0]);//在元素最上面添加
    </script>
  </body>
</html>

通过createElement创建节点，并用appendChild将创建的节点添加到指定元素中。

删除节点

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>diyige</li>
    </ul>
    <script>
      var ul = document.querySelector("ul");
      ul.removeChild(ul.children[0]);
    </script>
  </body>
</html>

利用removeChild删除元素中的子节点。

复制节点（克隆节点）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>diyige</li>
    </ul>
    <script>
      var ul = document.querySelector("ul");
      var li = ul.children[0].cloneNode();
      ul.appendChild(li);
    </script>
  </body>
</html>

通过cloneNode复制指定节点，再将复制的节点放到指定的元素中。cloneNode括号中的参数为true 表示深度拷贝，复制标签中的内容以及子节点；括号中为false或者为空指的是浅拷贝，只复制节点本身，不克隆里面的子节点。

FL_csdn1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM中的节点操作

为什么要学习节点操作通常情况下我们利用js获取元素的方式是利用DOM提供的方法获取元素，例如document.getElementById（），document.getElementsByTagName()，document.querySelector（）等类似这样的方法。这样的方式虽然可以操作DOM中的一些元素，但这种获取元素的方式就逻辑性不强，较繁琐，需要用到的元素就要全部都获取过来。那么，节点操作就可以很好的避免以上获取元素的弊端，可以利用父子兄节点的关系获取元素，但是兼容性就会稍微的差一些。总结来
复制链接

扫一扫

专栏目录