js 获取子元素

// 示例代码：获取子元素

// HTML结构：
// <div id="parent">
//   <p>段落1</p>
//   <span>跨度1</span>
//   <div>嵌套的div</div>
// </div>

// 1. 使用 children 属性获取所有子元素（返回HTMLCollection）
var parent = document.getElementById('parent');
var children = parent.children;
console.log(children); // 返回包含所有子元素的HTMLCollection

// 2. 使用 querySelectorAll 获取特定类型的子元素
var paragraphs = parent.querySelectorAll('p');
console.log(paragraphs); // 返回包含<p>元素的NodeList

// 3. 使用 firstElementChild 和 lastElementChild 获取第一个和最后一个子元素
var firstChild = parent.firstElementChild;
var lastChild = parent.lastElementChild;
console.log(firstChild); // 返回第一个子元素
console.log(lastChild); // 返回最后一个子元素

// 4. 使用 childNodes 获取所有子节点（包括文本节点和其他类型节点）
var allNodes = parent.childNodes;
console.log(allNodes); // 返回包含所有子节点的NodeList，包括文本节点

解释说明：

• children 属性返回一个 HTMLCollection，其中包含父元素的所有子元素（不包括文本节点）。
• querySelectorAll 方法可以根据选择器获取特定类型的子元素，并返回一个 NodeList。
• firstElementChild 和 lastElementChild 分别返回父元素的第一个和最后一个子元素。
• childNodes 返回一个包含所有子节点的 NodeList，包括文本节点和其他类型的节点。