如果您在JavaScript中使用过DOM，您可能已经注意到有多种方法可以访问同一个元素（nextSibling、nextElementSibling）这真的很令人困惑，它们之间的区别并不明显，很难决定该用哪个。在本文中，我将解释一下节点和元素之间的区别。元素vs结点(ElementsvsNodes)在这两者中，元素(Element)是最容易理
如果您在 JavaScript 中使用过 DOM，您可能已经注意到有多种方法可以访问同一个元素（nextSibling、nextElementSibling）这真的很令人困惑，它们之间的区别并不明显，很难决定该用哪个。 在本文中，我将解释一下节点和元素之间的区别。
元素vs结点(Elements vs Nodes)
在这两者中，元素(Element)是最容易理解的，因为它们只是 HTML 元素，例如 div、span 或 body 标签。通常，当您使用 DOM 时，您将使用元素，因为您通常希望与 HTML 元素进行交互。
结点(Nodes)是元素的更通用版本。节点可以是 HTML 元素，但也可以是 HTML 文档中的任何其他内容，例如文本或注释。这使得节点更难使用，因为在使用 DOM 时，您通常不关心文本节点或注释节点之类的东西，而只关心元素节点。由于这个原因，我通常避免使用结点。下面是所有重要结点类型的列表。
- 元素结点 (Element Node)
- 文本结点 (Text Node)
- CData 结点 (CData Section Node)
- 处理指令结点 (Processing Instruction Node)
- 注释结点 (Comment Node)
- 文档结点 (Document Node)
- 文档类型结点 (Document Type Node)
- 文档段结点 (Document Fragment Node)
当你在 DOM 中导航时，总是更喜欢选择元素而不是结点的方法。通常这些方法中包含单词元素，或者选择结点的版本中会包含单词结点，以便您区分它们。
HTMLCollection vs NodeList
在遍历 DOM 时，有时会返回一组元素/结点（querySelector、children）。这将是 HTML Collection 或 NodeList。
HTMLCollection 很容易理解，因为它只能包含元素。 getElementsByClassName 和 children 等方法返回一个 HTMLCollection。这些集合与数组非常相似，因此您甚至可能没有意识到您正在使用 HTMLCollection，但 HTMLCollections 缺少数组所具有的所有高阶函数。诸如 forEach、map 和 reduce 之类的东西在 HTMLCollection 上不可用。此外，HTMLCollections 正在实时更新。这意味着如果你有一个包含所有元素的 HTMLCollection，并且你将一个新元素添加到具有该类的 DOM 中，它将自动添加到刚才已经存在的HTMLCollection。老实说，处理起来有点痛苦，因为它可能会导致意想不到的错误。
另一方面，NodeList 可以包含任何类型的结点，包括元素。 NodeList 也类似于数组，但它们同样缺少大多数高阶函数。 NodeList 上唯一的高阶函数是 forEach 函数。返回 NodeLists 的一些方法示例是 querySelectorAll 和 childNodes。 NodeLists 也类似于 HTMLCollections 实时更新，但仅在某些情况下。例如，querySelectorAll 不是实时更新列表，但 childNodes 是实时更新。一般来说，我会尽量避免使用 NodeList，因为它们可以包含非 HTML 元素。
下面是实时更新的示例：
开始的HTML结构如下：
JavaScript如下：
我们可以看到，getElementsByClassName返回的是HTMLCollection, 第一次children有两个元素，然后我们又新增了一个节点，发现第二次显示之前children的HTMLCollection也自动更新了，它现在包含三个元素。
下面我们就改一行上面的代码，用querySelectorAll替换getElementsByClassName，然后你会发现，两次显示的children(NodeList)在更新前后没有任何变化。
如若转载，请注明出处：https://www.51buycar.cn/135485.html