整理一下DOM遍历的API

为什么会创作这个文章

很简单，因为历史包袱，DOM遍历API的命名极为混乱，所以通过借这个文章方便自己和大伙查阅

1. 子节点遍历

• parentNode.childNodes:
  • 返回当前节点的所有子节点集合（NodeList），包括元素节点、文本节点、注释节点等。
• parentNode.children:
  • 返回当前节点的所有子元素节点集合（HTMLCollection），仅包括元素节点，不包括文本和注释节点。

2. 特定子节点

• parentNode.firstChild/ parentNode.lastChild:
  • 返回当前节点的第一个或最后一个子节点，可以是任何类型的节点（包括文本和注释节点）。
• parentNode.firstElementChild/ parentNode.lastElementChild:
• 返回当前元素的第一个或最后一个子元素，仅是元素节点。

3. 兄弟节点遍历

• node.nextSibling/ node.previousSibling:
  • 返回当前节点的下一个或前一个兄弟节点，可以是任何类型的节点。
• node.nextElementSibling/ node.previousElementSibling:
• 返回当前元素的下一个或前一个兄弟元素，仅是元素节点。

4. 父节点访问

• node.parentNode:
  • 返回当前节点的父节点，可以是任何类型的节点。
• node.parentElement:
• 返回当前节点的父元素，仅是元素节点。如果父节点不是元素节点（例如，父节点是文档节点），则返回 null。

5. 在特定条件下查找祖先和后代

• element.closest(selector):
  • 返回与给定CSS选择器匹配的最近祖先元素。如果没有找到匹配的元素，则返回 null。
• element.querySelector(selector)/ element.querySelectorAll(selector):
• 返回当前元素后代中匹配给定CSS选择器的第一个元素或所有元素。

6. 文档范围内的搜索

• document.getElementById(id):
  • 返回具有指定ID的元素。
• document.getElementsByTagName(tagName):
  • 返回所有具有指定标签名的元素。
• document.getElementsByClassName(className):
• 返回所有具有指定类名的元素。