element 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)在更新前后没有任何变化。