W3C Notes

Appearance

DOM ​

前言: 详解 DOM 中涉及的知识点

概述 ​

该章节详解 DOM 的使用

Node ​

节点类型 ​

html
<style>
  .item {
    width: 100px;
    height: 100px;
    background: gray;
  }
</style>
<div class="item"></div>
<span class="item">1</span>

<script>
  const NodesMap = Object.entries(Node).reduce((res, el) => {
    if (res[el[1]] === undefined) {
      res[el[1]] = el[0];
    }
    return res;
  }, {});
  console.log(NodesMap)
  document.addEventListener("click", (e) => {
    console.log("Node Type", e, NodesMap[e.target.nodeType]);
  });
</script>

节点树结构 ​

html
<div class="parent">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">
    item4
    <div class="nest-children">item4-1</div>
  </div>
</div>

<script>
  const parent = document.querySelector(".parent");
  console.log(
    parent.firstChild.parentNode.lastChild.previousSibling.nextSibling
      .parentNode.childNodes
  );
</script>
  1. childNodes 子节点数组，注意文本节点例如换行导致的 \n 节点
  2. firstChild 第一个子节点
  3. lastChild 最后一个子节点
  4. parentNode 父节点
  5. nextSibling 下一个兄弟节点
  6. previousSibling 上一个兄弟节点

TIP

不是所有节点都有 childNodes 属性，只有 Element 节点才有 childNodes 属性

参考资料 ​