HTML的DOM节点

###!!!

已于 2023-05-19 11:39:06 修改

阅读量1.5k

点赞数 1

文章标签： javascript 前端 html

于 2023-05-13 18:14:09 首次发布

本文链接：https://blog.csdn.net/ge_ziye/article/details/130638345

版权

1.DOM Nodes（DOM 节点）

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

2.DOM节点树

3.节点父、子和兄弟（同胞）

节点树中的节点彼此拥有层级关系。

常用父（parent）、子（child）和兄弟/同胞（sibling）等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）。
每个节点都有父节点、除了根（它没有父节点）。
一个节点可拥有任意数量的子节点。
同胞是拥有相同父节点的节点。

4.节点操作

4.1查找节点

查找结点是根据关系来查找的。依据上述关系分为三种查找方式。

第一种：父节点查找

注意：返回最近一级的父节点，找不到返回null

语法：子元素.parentNode

案例如下:

HTML部分:

<div class="box">
    我是广告
    <div class="box1">X</div>
  </div>
  <div class="box">
    我是广告
    <div class="box1">X</div>
  </div>
  <div class="box">
    我是广告
    <div class="box1">X</div>
  </div>

CSS部分：

<style>
    .box {
      position: relative;
      width: 1000px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      text-align: center;
      font-size: 50px;
      line-height: 200px;
      font-weight: 700;
    }

    .box1 {
      position: absolute;
      right: 20px;
      top: 10px;
      width: 20px;
      height: 20px;
      background-color: skyblue;
      text-align: center;
      line-height: 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>

JavaScript部分：

<script>

    // 1. 获取三个关闭按钮
    const closeBtn = document.querySelectorAll('.box1')
    for (let i = 0; i < closeBtn.length; i++) {
      closeBtn[i].addEventListener('click', function () {
        // 关闭我的父亲，所以只关闭当前的父元素
        this.parentNode.style.display = 'none'
      })
    }
  </script>

效果如下：

只要我点击蓝色的叉号键，就可以把元素关闭广告，这是一种关闭广告的代码写法。

第二种：子节点查找

语法一：Node.childNode

作用：获得所有子节点，包括文本节点（空格，换行），注释节点等

小总结（没啥用的，现在都不用）

语法二：父元素.children

作用：仅获得所有元素节点，且返回的是个伪数组。

小总结：重点，现在一直用的方法。

代码示例：

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')  // ul
    console.log(ul.children)  // 得到伪数组  选择的是 亲儿子 
  </script>
</body>

第三种：兄弟节点查找

1：查找下一个兄弟节点：元素.nextElementSibling

2: 查找上一个兄弟节点：元素.previousElementSibling

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <script>
    const li2 = document.querySelector('ul li:nth-child(2)')
    console.log(li2.previousElementSibling)  // 上一个兄弟
    console.log(li2.nextElementSibling)  // 下一个兄弟
  </script>
</body>

4.2 增加节点

应用场景：例如点击发布按钮，可以新增一条信息

语法一：父元素.appendChild(要插入的元素)

作用;插入父元素的最后一个子元素的后面

语法二：父元素.insertBefore(要插入的元素，在哪个元素之前)

作用：插入到父元素中的某个子元素的前面

4.3 克隆节点

语法：元素.cloneNode（布尔值）

注：若为true，则包含子孙后代一起克隆。若为false，则只克隆当前节点，不包含后代。

示例：

var p = document.getElementById("para1"),
var p_prime = p.cloneNode(true);

附注：

克隆一个元素节点会拷贝它所有的属性以及属性值，当然也就包括了属性上绑定的事件 (比如onclick="alert(1)"),但不会拷贝那些使用 addElementListener() 方法或者 node.onclick = fn 这种用 JavaScript 动态绑定的事件。

在使用 Node.appendChild() 或其他类似的方法将拷贝的节点添加到文档中之前，那个拷贝节点并不属于当前文档树的一部分，也就是说，它没有父节点。

如果参数设为false,则不克隆它的任何子节点。该节点所包含的所有文本也不会被克隆，因为文本本身也是一个或多个 Test 节点。

如果参数设为 true,则会复制整棵 DOM 子树 (包括那些可能存在的Test子节点).对于空结点 (例如<img>和<input>元素), 则参数无论设为 true 还是设为 false, 都没有关系，但是仍然需要为它指定一个值。

警告： 为了防止一个文档中出现两个 ID 重复的元素，使用cloneNode() 方法克隆的节点在需要时应该指定另外一个与原 ID 值不同的 ID

如果原始节点设置了 ID，并且克隆节点会被插入到相同的文档中，那么应该更新克隆节点的 ID 以保证唯一性。name 属性可能也需要进行修改，取决于你是否希望有相同名称的节点存在于文档中。

想要克隆一个节点来添加到另外一个文档中，请使用 Docunment.importNode() 代替本方法。

4.4 删除节点

语法：父元素.removeChild(删除元素)

作用：从 DOM 中删除一个子节点。返回删除的节点。

let oldChild = node.removeChild(child);

//OR

element.removeChild(child);

child 是要移除的那个子节点。
node 是child的父节点。
oldChild 保存对删除的子节点的引用。oldChild === child.

被移除的这个子节点仍然存在于内存中，只是没有添加到当前文档的 DOM 树中，因此，还可以把这个节点重新添加回文档中，当然，实现要用另外一个变量比如上例的 oldChild 来保存这个节点的引用。如果使用上述语法中的第二种方法，即没有使用 oldChild 来保存对这个节点的引用，则认为被移除的节点已经是无用的，在短时间内将会被内存管理回收。

以上是我对DOM节点的一些理解，感谢大家的收看！！！