在开发前端应用程序时，DOM（文档对象模型）树结构扮演了一个非常重要的角色。在 DOM 树中，元素分为不同的类型，其中最常见的是“父元素”、“孩子元素”和“子节点”。本文将讨论 JavaScript 中的孩子和子节点之间的差异。
孩子元素和子节点的定义
在 DOM 树中，每个元素都可以有零个或多个“孩子元素”，这些孩子元素是该元素的直接后代。同样，每个元素还可以包含零个或多个“子节点”，这些子节点包括元素本身、文本节点、注释等。
换句话说，子节点是指任何一种 DOM 节点，而孩子元素是特定类型的子节点，只能是元素节点。
以下是一个简单的 HTML 示例：
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
在这个示例中，<ul> 是一个父元素，它有三个孩子元素，即 <li> 元素。每个 <li> 元素都是一个子节点，其中包括文本字符串“Item 1”、“Item 2” 和“Item 3”。
如何在 JavaScript 中访问孩子元素和子节点
JavaScript 提供了一些方法，可以让我们轻松地访问 DOM 树中的孩子元素和子节点。其中两个最常用的方法分别是 childNodes 和 children。
childNodes
childNodes 方法返回一个节点列表，其中包含指定节点的所有子节点。这个列表包括所有类型的节点，例如文本节点、注释等。
以下是如何使用 childNodes 方法获得某个元素的所有子节点：
const ulElement = document.querySelector('ul');
const childNodesList = ulElement.childNodes;上面的代码将获取 <ul> 元素的所有子节点，并将它们存储在 childNodesList 变量中。请注意，这个列表包含文本节点和注释。
children
children 方法返回一个 HTML 集合，其中包含指定元素的子元素。这个集合只包含元素节点，不包括其他类型的节点（如文本节点和注释）。
以下是如何使用 children 方法获得某个元素的所有孩子元素：
const ulElement = document.querySelector('ul');
const childrenList = ulElement.children;上面的代码将获取 <ul> 元素的所有孩子元素，并将它们存储在 childrenList 变量中。请注意，这个列表仅包含 <li> 元素，而不包含文本节点或注释。
示例代码
为了更好地理解孩子元素和子节点之间的区别，请考虑以下代码示例。在这个示例中，我们将获取一个列表元素的所有子节点，并使用 childNodes 和 children 方法来展示它们。
-- -------------------- ---- ------- ---- -------- ------ ---- ---- ------- -- -------- -------- ------ -------- ------ ----- ------------ ----- -------------- ------------ -----------------
-- -------------------- ---- ------- ----- --------- - ----------------------------- ----- ---------------- - ----------------------------------------------- ----- -------------- - ---------------------------------------------- ------------------------------------------ -- -- - ----- -------------- - --------------------- ---------------------------- --- ---------------------------------------- -- -- - ----- ------------ - ------------------- -------------------------- ---
在这个示例中，单击“Show Child Nodes”按钮将打印出 childNodes
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9058
