在前端开发中，常常需要获取某个元素下的第一级子元素，这在处理 DOM 结构时尤为常见。本文将介绍使用 JavaScript 实现获取元素下第一级子元素的方法，并提供相关示例代码。
方法一：children 属性
DOM 元素有一个 children 属性，该属性返回一个包含所有子元素的 HTMLCollection 对象。我们可以通过遍历该对象来获取第一级子元素。
以下是使用 children 属性的示例代码：
const parent = document.getElementById('parent');
const children = parent.children;
for (let i = 0; i < children.length; i++) {
console.log(children[i]);
}上述代码会输出 parent 的所有子元素。
注意：children 属性只会返回元素节点，而不会返回文本节点或注释节点。如果需要获取所有子节点，可使用 childNodes 属性。
方法二：firstElementChild 和 nextElementSibling 属性
除了 children 属性以外，还可以使用 firstElementChild 和 nextElementSibling 属性来获取元素下的第一级子元素。
firstElementChild 属性返回第一个子元素，即第一级子元素；nextElementSibling 属性返回该元素的下一个兄弟元素，也就是该元素的同级下一个元素。
以下是使用 firstElementChild 和 nextElementSibling 属性的示例代码：
-- -------------------- ---- ------- ----- ------ - ---------------------------------- ----- ---------- - ------------------------- ------------------------ --- ------- - ------------------------------ ----- --------- - --------------------- ------- - --------------------------- -
上述代码会输出 parent 的第一个子元素以及它的所有兄弟元素。
方法三：querySelectorAll 方法
除了以上两种方法，还可以使用 querySelectorAll 方法来获取元素下的第一级子元素。该方法接受一个 CSS 选择器作为参数，并返回一个 NodeList 对象。
以下是使用 querySelectorAll 方法的示例代码：
const parent = document.getElementById('parent');
const children = parent.querySelectorAll(':scope > *');
for (let i = 0; i < children.length; i++) {
console.log(children[i]);
}上述代码会输出 parent 的所有第一级子元素。
需要注意的是，:scope 伪类选择器用于指定当前元素作为查询的起点。如果省略 :scope ，则默认为 document。
结语
以上介绍了三种获取元素下第一级子元素的方法，分别是 children 属性、firstElementChild 和 nextElementSibling 属性以及 querySelectorAll 方法。根据实际情况和需求，可以选择不同的方法进行使用。
在使用这些方法时，需要注意区分元素节点、文本节点和注释节点，并避免出现错误或异常。同时，建议结合相关的 DOM 操作技巧和知识，加深对前端开发中 DOM 操作的理解和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1427