从0开始学前端第三十五课：DOM遍历与修改

本文链接：https://blog.csdn.net/weixin_44738632/article/details/135844361

第三十五课：DOM遍历与修改

学习目标

在本课中，你将学习：

如何使用不同的属性遍历DOM树。
如何使用DOM API修改节点。
掌握这些操作的基本用法和注意事项。

学习内容

1. 遍历DOM树

DOM树是由节点构成的，我们可以使用不同的属性来遍历这些节点。

childNodes 属性会返回节点的子节点集合，包括元素节点、文本节点和注释节点。

代码示例:

<ul id="myList">
  <li>第一项</li>
  <li>第二项</li>
</ul>

<script>
  var list = document.getElementById('myList');
  var children = list.childNodes;
  console.log(children.length); // 将根据子节点数量输出不同数字，包括文本节点
  children.forEach(function(node){
    if(node.nodeType === Node.ELEMENT_NODE) {
      console.log(node.textContent); // 输出每个<li>标签的内容
    }
  });
</script>

parentNode 属性返回某个节点的父节点。

代码示例:

var listItem = document.querySelector('li'); // 获取第一个<li>元素
console.log(listItem.parentNode); // 输出<ul id="myList">...</ul>

nextSibling 属性返回同一父节点下的紧接着的下一个节点。

代码示例:

var firstItem = document.querySelector('li'); // 获取第一个<li>元素
console.log(firstItem.nextSibling); // 可能是文本节点或下一个<li>，具体取决于HTML结构

2. 修改节点

replaceChild 方法用于替换节点。它需要两个参数：新节点和将被替换的旧节点。

代码示例:

<ul id="myList">
  <li>第一项</li>
  <li>第二项</li>
</ul>

<script>
  var list = document.getElementById('myList');
  var newLi = document.createElement('li');
  newLi.textContent = '新的列表项';
  list.replaceChild(newLi, list.childNodes[0]); // 替换第一项
</script>

cloneNode 方法用于克隆节点。如果传递true作为参数，它将进行深克隆，包括克隆节点的所有子节点；如果传递false或不传参数，它将进行浅克隆，只克隆节点本身。

代码示例:

var listItem = document.querySelector('li');
var shallowClone = listItem.cloneNode(); // 浅克隆<li>
var deepClone = listItem.cloneNode(true); // 深克隆<li>和它的内容

课后练习

给定一个包含多个<p>元素的<div>，使用childNodes遍历这些<p>元素，然后使用replaceChild将每个<p>元素替换为一个包含相同内容的<article>元素。
找到ID为myList的<ul>元素，克隆其第一个<li>元素，并将克隆出的<li>元素添加到列表的末尾。

练习解析:

练习1:

<div id="myDiv">
  <p>段落1</p>
  <p>段落2</p>
  <p>段落3</p>
</div>

<script>
  var myDiv = document.getElementById('myDiv');
  Array.from(myDiv.childNodes).forEach(function(node) {
    if (node.nodeType === Node.ELEMENT_NODE) {
      var article = document.createElement('article');
      article.textContent = node.textContent;
      myDiv.replaceChild(article, node);
    }
  });
</script>

练习2:

<ul id="myList">
  <li>第一项</li>
  <li>第二项</li>
</ul>

<script>
  var list = document.getElementById('myList');
  var firstLi = list.querySelector('li');
  var clonedLi = firstLi.cloneNode(true);
  list.appendChild(clonedLi);
</script>