在网页开发中，JavaScript 提供了多种访问页面子标签的方法。这些方法可以帮助开发者更灵活地操作DOM元素。以下是一些常见且实用的方法，让我们一起来看看它们各自的用法和适用场景。
通过 children 属性访问子元素
当需要获取一个父元素的直接子元素时，children 属性是一个很好的选择。这个属性返回一个 HTMLCollection 对象，其中包含了父元素的所有子元素。
var parentElement = document.getElementById('parent');
var children = parentElement.children;
这个方法简单直接，适用于获取所有子元素，但不会获取嵌套的子元素。
直接获取所有子元素
如果你想要获取所有具有特定类名的子元素，getElementsByClassName() 或 querySelectorAll() 可以派上用场。
var children = document.getElementsByClassName('parent-class');
或者
var children = document.querySelectorAll('.parent-class > *');
后者使用了CSS选择器语法，可以更精确地选择子元素，包括嵌套的子元素。
获取特定类型的子元素
如果你需要获取特定类型的子元素，比如所有的 <span> 标签，getElementsByTagName() 是一个不错的选择。
var children = parentElement.getElementsByTagName('span');
这个方法与 children 属性类似，但它只返回特定类型的元素。
获取第一个或最后一个子元素
有时候，你可能只需要获取第一个或最后一个子元素。这时，firstElementChild 和 lastElementChild 属性就非常方便。
var firstChild = parentElement.firstElementChild;
var lastChild = parentElement.lastElementChild;
这些属性会返回父元素的第一个和最后一个子元素节点。
获取前一个或后一个兄弟元素
除了子元素，你有时可能还需要访问兄弟元素。previousElementSibling 和 nextElementSibling 属性可以用来获取前一个或后一个兄弟元素。
var previousSibling = childElement.previousElementSibling;
var nextSibling = childElement.nextElementSibling;
获取所有兄弟元素
如果你需要获取某个元素的 所有兄弟元素，可以使用自定义的 siblings 属性。
var siblings = Array.from(childElement.parentNode.children).filter(function (sibling) {
return sibling !== childElement;
});
这个方法通过过滤父元素所有子元素，排除当前元素，从而得到所有兄弟元素。
总结
选择哪种方法访问页面子标签取决于你的具体需求。如果你只需要访问直接子元素，children 属性是最简单的选择。对于更复杂的场景，你可以使用 querySelectorAll()、getElementsByTagName() 或自定义方法来满足需求。掌握这些方法，可以帮助你更高效地操作DOM，构建更加动态和丰富的网页。