js 子元素

// 示例代码：获取和操作子元素

// HTML 结构
/*
<div id="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>
*/

// 获取父元素
var parent = document.getElementById('parent');

// 获取所有子元素
var children = parent.children;

// 遍历并输出每个子元素的文本内容
for (var i = 0; i < children.length; i++) {
  console.log(children[i].textContent);
}

// 添加一个新的子元素
var newChild = document.createElement('div');
newChild.className = 'child';
newChild.textContent = 'Child 4';
parent.appendChild(newChild);

// 删除第一个子元素
if (children.length > 0) {
  parent.removeChild(children[0]);
}

// 解释说明：
// 1. 使用 `document.getElementById` 获取父元素。
// 2. 使用 `parent.children` 获取所有子元素，返回的是一个 HTMLCollection。
// 3. 使用 `for` 循环遍历子元素并输出其文本内容。
// 4. 使用 `document.createElement` 创建新的子元素，并使用 `appendChild` 将其添加到父元素中。
// 5. 使用 `removeChild` 删除指定的子元素。