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

目录

前言

DOM节点

目标

DOM节点

节点类型

元素节点

属性节点

文本节点

查找节点

目标

节点关系

父节点查找

parentNode属性

子节点查找

childNodes

children属性(重点)

兄弟关系查找

增加节点

目标

创建节点

追加节点

删除节点

目标

语法

克隆节点

总结



前言

There is a girl who was on your side


DOM节点

目标

能说出DOM节点的类型

DOM节点

DOM树中每一个内容都称之为节点

节点类型

元素节点

所有的标签,比如body,div

html是根节点

属性节点

所有的属性,比如href

文本节点

所有的文本

查找节点

目标

能够具备根据节点关系查找目标节点的能力

节点关系

针对的找亲戚返回的都是对象

父节点

子节点

兄弟节点

父节点查找

parentNode属性

返回最近一级的父节点,找不到返回为null

html 复制代码
子元素.parentNode
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>
  <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

相关推荐
The_cute_cat12 分钟前
25.4.22学习总结
学习
冰茶_1 小时前
.NET MAUI 发展历程:从 Xamarin 到现代跨平台应用开发框架
学习·microsoft·微软·c#·.net·xamarin
帅云毅1 小时前
Web3.0的认知补充(去中心化)
笔记·学习·web3·去中心化·区块链
豆豆1 小时前
day32 学习笔记
图像处理·笔记·opencv·学习·计算机视觉
nenchoumi31191 小时前
VLA 论文精读(十六)FP3: A 3D Foundation Policy for Robotic Manipulation
论文阅读·人工智能·笔记·学习·vln
凉、介2 小时前
PCI 总线学习笔记(五)
android·linux·笔记·学习·pcie·pci
SuperSwaggySUP2 小时前
4/25 研0学习日志
学习
码起来呗2 小时前
基于SpringBoot的高校学习讲座预约系统-项目分享
spring boot·后端·学习
Yurko132 小时前
【C语言】全局变量、静态本地变量
c语言·学习
丰锋ff4 小时前
考研英一学习笔记
笔记·学习·考研