HTML DOM 如何输出列表中每行的姓名与年龄

在网页开发中，使用 HTML DOM（文档对象模型）来操作和获取页面元素信息是一项重要技能。当我们面对一个包含姓名和年龄的列表，需要将每行的姓名与年龄输出时，该如何实现呢？

我们要创建一个 HTML 列表结构。可以使用 <ul>（无序列表）或 <ol>（有序列表）标签。例如：

<ul id="personList">
  <li>张三, 25</li>
  <li>李四, 30</li>
  <li>王五, 28</li>
</ul>

这里，每个 <li> 元素都包含了一个人的姓名和年龄，中间用逗号隔开。

接下来，就是使用 JavaScript 通过 HTML DOM 来提取并输出这些信息。我们可以通过以下步骤实现：

1. 获取列表元素：使用 document.getElementById() 方法获取包含所有列表项的 <ul> 元素。代码如下：

const personList = document.getElementById('personList');

2. 获取所有列表项：通过列表元素的 childNodes 属性可以获取到所有的 <li> 元素。不过需要注意的是，childNodes 会包含文本节点等其他节点类型，所以我们要过滤出真正的 <li> 元素。可以使用如下代码：

const listItems = [];
for (let i = 0; i < personList.childNodes.length; i++) {
  if (personList.childNodes[i].nodeType === 1) {
    listItems.push(personList.childNodes[i]);
  }
}

3. 提取并输出姓名与年龄：遍历每个列表项，通过字符串的 split() 方法将姓名和年龄分开，然后进行输出。示例代码如下：

listItems.forEach((item) => {
  const parts = item.textContent.split(', ');
  const name = parts[0];
  const age = parts[1];
  console.log(`姓名: ${name}, 年龄: ${age}`);
});

这段代码会在控制台输出每个列表项中的姓名和年龄。如果想在页面上显示，可以创建新的 <p> 元素或者修改已有元素的 innerHTML 来展示这些信息。

通过以上步骤，我们利用 HTML DOM 成功实现了从列表中提取并输出每行的姓名与年龄。掌握这种技巧，对于处理类似的网页数据展示需求非常有帮助，无论是简单的信息呈现还是复杂的动态页面交互，都能为开发者提供有效的解决方案。