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

目录

前言

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

相关推荐
云上艺旅9 小时前
K8S学习之基础七十四:部署在线书店bookinfo
学习·云原生·容器·kubernetes
你觉得2059 小时前
哈尔滨工业大学DeepSeek公开课:探索大模型原理、技术与应用从GPT到DeepSeek|附视频与讲义下载方法
大数据·人工智能·python·gpt·学习·机器学习·aigc
A旧城以西10 小时前
数据结构(JAVA)单向,双向链表
java·开发语言·数据结构·学习·链表·intellij-idea·idea
无所谓จุ๊บ10 小时前
VTK知识学习(50)- 交互与Widget(一)
学习·vtk
FAREWELL0007510 小时前
C#核心学习(七)面向对象--封装(6)C#中的拓展方法与运算符重载: 让代码更“聪明”的魔法
学习·c#·面向对象·运算符重载·oop·拓展方法
吴梓穆11 小时前
UE5学习笔记 FPS游戏制作38 继承标准UI
笔记·学习·ue5
Three~stone11 小时前
MySQL学习集--DDL
数据库·sql·学习
齐尹秦11 小时前
HTML 音频(Audio)学习笔记
学习
瞌睡不来12 小时前
(学习总结32)Linux 基础 IO
linux·学习·io
Moonnnn.12 小时前
运算放大器(四)滤波电路(滤波器)
笔记·学习·硬件工程