前端学习-节点操作(三十五)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="father">
    <div id="son">son</div>
  </div>
  <script>
    const son = document.querySelector('#son')
    console.dir(son.parentNode);//const father = document.querySelector('.father')
  </script>
</body>

</html>

子节点查找

childNodes

获得所有子节点，包括文本节点（空格，换行），注释节点等

children属性（重点）

仅获得所有元素节点

返回的还是一个伪数组

html 复制代码

父元素.children

兄弟关系查找

下一个兄弟节点：nextElementSibling属性

上一个兄弟节点：previousElementSibling属性

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <p>第一个段落</p>
    <li>
      <p>第二个段落</p>
    </li>
    <li>
      <p>第三个段落</p>
    </li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <script>
    const ul = document.querySelector('ul');
    console.dir(ul.children[1].previousElementSibling);
    console.dir(ul.children[1].nextElementSibling);
  </script>
</body>

</html>

增加节点

目标

能够具备根据需求新增节点的能力

很多情况下，我们需要在页面中增加元素

比如点击按钮可以新增一条信息

一般情况下，新增节点按照以下操作

创建一个新节点

把创建的新的节点放入到指定的元素内部

创建节点

即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后再插入节点

创建元素节点方法：

//创造一个新的元素节点

document.createElement('标签名');

追加节点

要想在界面看到。还得插入到某个父元素中

插入到父元素的最后一个子元素

父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面

父元素.insertBefore(要插入的元素，在哪个元素前面)

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul id="myList"></ul>
  <script>
    const ul = document.querySelector('ul');
    const items = ['我是li1', '我是li2', '我是li3'];
    items.forEach(item => {
      const li = document.createElement('li');
      li.innerHTML = item;
      ul.appendChild(li);
    })
  </script>
</body>

</html>

删除节点

目标

能够具备根据需求删除节点的能力

若一个节点在页面中已不需要时，可以删除它

在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除

语法

父元素.removeChild(要删除的元素)

注：

如不存在父子关系则删除不成功删除节点和隐藏节点(display:none)有区别的: 隐藏节点还是存在的，但是删除，则从html中删除节点

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul id="myList">
    <li>Coffee</li>
  </ul>
  <ul id="myonelist"></ul>
  <script>
    const ul = document.getElementById("myList");
    const ul1 = document.getElementById("myonelist");
    ul.removeChild(ul.firstElementChild);
  </script>
</body>

</html>

克隆节点

特殊情况下，我们新增节点，按照如下操作

复制一个原有的节点

把复制的节点放入到指定的元素内部

元素.cloneNode(布尔值)

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

若为true，则代表克隆时会包含后代节点一起克隆

若为false，则代表克隆时不包含后代节点

默认为false

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul id="myList"></ul>
  <ul id="myonelist"></ul>
  <script>
    const ul = document.querySelector('#myList');
    const items = ['我是li1', '我是li2', '我是li3'];
    items.forEach(item => {
      const li = document.createElement('li');
      li.innerHTML = item;
      ul.appendChild(li);
    })
    const vl = ul.cloneNode(true);
    const ul1 = document.querySelector('#myonelist');
    ul1.innerHTML = '我是ul1';
    ul1.appendChild(vl);
  </script>
</body>

</html>

总结

I was the girl who was on your side