如何在 JavaScript 中获取子元素

在 JavaScript 中获取子元素可以通过 DOM（文档对象模型）方法来实现。DOM 是 HTML 和 XML 的编程接口，通过 DOM 我们可以访问和操作 HTML 页面上的所有元素。

1. 通过父元素获取子元素

可以通过父元素来获取其下的所有直接子元素，可以使用 parentNode 属性和 childNodes 属性来实现。

1.1 parentNode 属性

parentNode 属性用于获取当前元素的父节点元素，可以通过 parentNode 属性获取父元素下的所有子元素。

const parent = document.getElementById('parent');
const children = parent.childNodes;

在上述代码中，document.getElementById 方法用于获取元素 ID 为 parent 的元素，childNodes 属性用于获取其下的所有子元素。

1.2 children 属性

与 childNodes 属性不同，children 属性用于获取当前元素的直接子元素，也就是不包含子元素的子元素。可以通过 children 属性获取所有子元素。

const parent = document.getElementById('parent');
const children = parent.children;

在上述代码中，children 属性用于获取元素 ID 为 parent 的元素下的所有直接子元素。

2. 通过子元素获取子元素

除了通过父元素获取子元素，也可以通过子元素来获取其下的子元素。

2.1 parentNode 属性

如上所述，parentNode 属性用于获取当前元素的父节点元素，因此也可以通过 parentNode 属性获取父元素下的所有子元素。

const child = document.getElementById('child');
const parent = child.parentNode;
const siblings = parent.childNodes;

在上述代码中，document.getElementById 方法用于获取元素 ID 为 child 的元素，parentNode 属性用于获取其父元素，childNodes 属性用于获取其兄弟元素。

2.2 children 属性

和上述代码类似，对于直接子元素，我们可以使用 children 属性来获取 sibling 元素。

const child = document.getElementById('child');
const parent = child.parentNode;
const siblings = parent.children;

在上述代码中，children 属性用于获取元素 ID 为 parent 的元素下的所有直接子元素。

3. 通过选择器获取子元素

除了通过元素 ID 或指定父子关系来获取子元素，也可以通过选择器来获取子元素。可以使用 querySelectorAll 方法或 getElementsByTagName 方法来获取符合选择器条件的所有子元素。

3.1 querySelectorAll 方法

querySelectorAll 方法用于返回符合选择器条件的所有元素，可以通过选择器来获取子元素。

const children = document.querySelectorAll('#parent > .child');

在上述代码中，document.querySelectorAll 方法用于返回符合选择器条件 #parent > .child，即 ID 为 parent 的元素下所有类名为 child 的子元素。

3.2 getElementsByTagName 方法

getElementsByTagName 方法用于获取指定标签名称的元素集合，可以通过标签名称来获取子元素。

const children = document.getElementsByTagName('div');

在上述代码中，getElementsByTagName 方法用于返回指定标签名称 div 的所有子元素。

总结

以上就是获取 JavaScript 子元素的方法，我们可以通过父元素、子元素或选择器来获取子元素，进而进行操作和修改元素内容，达到更好的网页展示效果。