JS中DOM三级列表（代码分享）

在HTML中，可以通过嵌套使用<ul>和<li>标签来创建无序列表，也可以嵌套使用<ol>和<li>标签来创建有序列表。除此之外，还可以通过嵌套使用<dl>、<dt>和<dd>标签来创建说明列表。在JavaScript中，可以使用DOM操作来创建、修改和删除这些列表。

创建三级列表

首先，我们需要创建一个包含三级列表的HTML结构。代码如下：

<ul id="list">
  <li>
    <span>第一项</span>
    <ul>
      <li>
        <span>子项1</span>
        <ul>
          <li><span>孙子项1</span></li>
          <li><span>孙子项2</span></li>
        </ul>
      </li>
      <li><span>子项2</span></li>
    </ul>
  </li>
  <li><span>第二项</span></li>
  <li><span>第三项</span></li>
</ul>

该HTML结构包含一个id为list的无序列表，其中嵌套使用了三层<ul>和<li>标签。为了让列表更加清晰，我们使用<span>标签来包裹列表项的文本内容。

接下来，我们需要在JavaScript中获取该列表元素，并添加事件监听器，代码如下：

var list = document.getElementById("list");
list.addEventListener("click", handleClick);

在上面的代码中，我们使用document.getElementById方法获取id为list的元素，并使用addEventListener方法为它添加了一个click事件监听器，该监听器的回调函数是handleClick。

现在，我们需要实现handleClick函数。该函数的作用是根据点击的元素类型，判断点击的是列表项还是列表项中的子元素，并在控制台输出相应的提示信息。代码如下：

function handleClick(event) {
  var target = event.target;
  if (target.tagName === "LI") {
    console.log("点击了列表项：" + target.firstElementChild.innerHTML);
  } else if (target.tagName === "SPAN") {
    console.log("点击了子元素：" + target.innerHTML);
  }
}

在上面的代码中，我们首先获取触发事件的元素，并使用tagName属性来判断该元素的标签类型。如果元素是一个<li>标签，说明点击的是列表项，我们可以通过firstElementChild属性获取该列表项的第一个子元素<span>，并使用innerHTML属性获取该元素的文本内容。如果元素是一个<span>标签，说明点击的是列表项中的子元素，我们可以直接使用innerHTML属性获取该元素的文本内容，并添加相应的提示信息到控制台中。

修改列表项

除了添加事件监听器外，我们还可以使用DOM操作来修改列表项。例如，我们可以为列表项添加一些样式，使其在被选中时呈现明显的高亮效果。代码如下：

function handleClick(event) {
  var target = event.target;
  if (target.tagName === "LI") {
    console.log("点击了列表项：" + target.firstElementChild.innerHTML);
    target.classList.add("active");
  } else if (target.tagName === "SPAN") {
    console.log("点击了子元素：" + target.innerHTML);
    target.parentNode.classList.add("active");
  }
}

在上面的代码中，我们使用了classList属性来为选中的列表项添加了一个名为active的类，以便对其进行样式设置。如果点击的是子元素，我们还需要使用该元素的parentNode属性获取其父节点（即列表项），然后对其进行样式设置。

总结

通过以上的示例，我们可以看到如何在JavaScript中使用DOM操作来创建、修改和删除三级列表。其中，添加事件监听器以及样式设置是比较常见的DOM操作。在实际应用中，我们还需要了解更多的DOM操作方法以及浏览器的兼容性问题，以便开发出更加高效和稳定的网页。

本文链接：http://task.lmcjl.com/news/10242.html