js练习5 --- DOM结点操作

漂流の少年

已于 2022-05-30 07:47:46 修改

阅读量424

点赞数 2

分类专栏： HTML+CSS+JavaScript 文章标签： javascript

于 2022-05-20 22:37:55 首次发布

本文链接：https://blog.csdn.net/YINZHE__/article/details/124891645

版权

HTML+CSS+JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

第一题

在页面上设置不同按钮，对右下已有无序列表中分别实现节点的下面操作：
·在列表末端增加新的两个列表项
·在列表第一个节点前插入新的一个节点
·替换列表中第三个列表项
·将列表中第二项移到末尾
·移除倒数第二列表项
·在网页中复制该列表


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <ul id = "myList"><li>Nan Jing</li><li>Bei Jing</li><li>Shang Hai</li></ul>
  <button onclick="addTwoToTail()">在列表末端添加两项</button><br/>
  <button onclick="insertBeforeOne()">在第一个节点前插入一个新节点</button><br/>
  <button onclick="replaceThird()">替换第三个列表项</button><br/>
  <button onclick="shiftSecondToTail()">将第二项移到末尾</button><br/>
  <button onclick="removeLastSecond()">移除倒数第二列表项</button><br/>
  <button onclick="copy()">在网页中复制该列表</button>
  <script>
    let list = document.getElementById("myList");
    // 在列表末端添加两项
    function addTwoToTail() {
      let elem = document.createElement("li");
      let textNode = document.createTextNode("Hang Zhou");
      elem.appendChild(textNode);
      let elem2 = document.createElement("li");
      let textNode2 = document.createTextNode("Guang Zhou");
      elem2.appendChild(textNode2);
      list.appendChild(elem);
      list.appendChild(elem2);
    }
    // 在第一个节点前插入一个新节点
    function insertBeforeOne() {
      let elem3 = document.createElement("li");
      let textNode = document.createTextNode("Tian Jin");
      elem3.appendChild(textNode);
      list.insertBefore(elem3, list.childNodes[0]);
    }
    // 替换第三个列表项
    function replaceThird() {
      let elem4 = document.createElement("li");
      let textNode = document.createTextNode("Wu Han");
      elem4.appendChild(textNode);
      list.replaceChild(elem4, list.childNodes[2]);
    }
    // 将第二项移到末尾
    function shiftSecondToTail() {
      let loc = 1; //第二项的位置
      list.appendChild(list.childNodes[loc]); // append添加的结点如果是文档中的结点，会先将它从文档中删除
    }
    // 移除倒数第二列表项
    function removeLastSecond() {
      let loc = list.childNodes.length -  2;
      list.removeChild(list.childNodes[loc]);
    }
    // 在网页中复制该列表
    function copy() {
      let copyNode = list.cloneNode(true);
      document.body.appendChild(copyNode);
    }
  </script>
</body>
</html>

第二题

在一个网页中，输入任意两个节点，判断两个节点之间的关系：
1.是否是同胞节点
2.是否是父子节点关系
3.查找其最近的一个共同父节点，可以包括节点自身


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div id="node1">编程语言</div>
  <ul id="node2">
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
  </ul>
  <script>
    let node1 = document.getElementById("node1");
    let node2 = document.getElementById("node2");
    let node3 = node2.childNodes[1];
    
    function relation(node1, node2) {
      if(node1.parentNode == node2.parentNode) {
        console.log("是同胞节点关系");
      } else {
        console.log("不是同胞节点关系");
      }
      if(node1.parentNode == node2 || node2.parentNode == node1) {
        console.log("是父子节点关系");
      } else {
        console.log("不是父子节点关系");
      }
    }
    
    // 查找两个节点最近的一个公共父节点
    function findCommonNode(node1, node2) {
      let pNode = node1;
      while(pNode) {
        if(pNode.contains(node2)) {
          return pNode;
        }
        pNode = pNode.parentNode;
      }
    }
    
    relation(node1, node2);
    console.log(findCommonNode(node1, node2));
    relation(node2, node3);
    console.log(findCommonNode(node2, node3));
  </script>
</body>
</html>