JavaScript的DOM学习笔记——6、DOM节点操作

最新推荐文章于 2025-11-24 03:12:01 发布

原创最新推荐文章于 2025-11-24 03:12:01 发布 · 991 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #笔记 #dom

H5 专栏收录该内容

46 篇文章

订阅专栏

大家好，我是阿赵。继续学习JavaScript的DOM，这次学习一下DOM节点的操作。
之前介绍过DOM树：
在这里插入图片描述

在DOM树里面，每一个内容，都称为DOM节点。

一、节点类型

1、元素节点

所有的标签节点都是元素节点，比如body、div等。
html是所有元素节点的根节点

2、属性节点

所有的属性，包括href、class、id之类，都是属性节点

3、文本节点

所有的文本，比如标签里面的文字，都是文本节点。

二、查找节点

1、父节点查找

语法：

对象.parentNode

作用：返回最近一级的父节点，如果找不到则返回null
例子：

<body>
  <div id="parent1">
    <div id="parent2">
      <div id="son"></div>
    </div>
  </div>
  <script>
    let parent1 = document.getElementById('parent1');
    let parent2 = document.getElementById('parent2');
    let son = document.getElementById('son');
    console.log(parent1.parentNode); // body
    console.log(parent2.parentNode); // parent1
    console.log(son.parentNode);
    let body = document.body;
    console.log(body.parentNode); // html
    console.log(body.parentNode.parentNode); // #document
    console.log(body.parentNode.parentNode.parentNode); 
  </script>
</body>

结果：
在这里插入图片描述

由于对应关系比较复杂，所以在代码里面就已经通过注释的情况把结果写上去了。
可以看到，它们是一个树形关系，子节点一层一层的往上找，到了parent1的父节点是body，body的父节点是html，然后html的父节点是document，最后document没有父节点了。

2、子节点查找

1. childNodes

例子：

<body>
  <div id="parent">
    <div id="son1">son1
      <div id="son1-1">son1-1</div>
      <div id="son1-2">son1-2</div>
    </div>
    <div id="son2">son2
      <div id="son2-1">son2-1</div>
      <div id="son2-2">son2-2</div>
    </div>
  </div>
  <script>
    let parent1 = document.getElementById('parent');
    console.log(parent1.childNodes); // text 节点
  </script>
</body>

结果：
在这里插入图片描述

从结果可以看出，childNodes会获取父节点下面的所有子节点，包括元素节点、文本节点等。

2. children

举例：

<body>
  <div id="parent">
    <div id="son1">son1
      <div id="son1-1">son1-1</div>
      <div id="son1-2">son1-2</div>
    </div>
    <div id="son2">son2
      <div id="son2-1">son2-1</div>
      <div id="son2-2">son2-2</div>
    </div>
  </div>
  <script>
    let parent1 = document.getElementById('parent');
    console.log(parent1.children); // HTMLCollection(2) [div#son1, div#son2]
  </script>
</body>

结果：
在这里插入图片描述

从结果看，children只返回了2个子节点，因为children只会返回元素节点，不会返回其他类型的节点。

3、兄弟关系查找

例子：

<body>
  <div id="parent">
    <div id="son1">son1</div>
    <div id="son2">son2</div>
  </div>
  <script>
    let son1 = document.getElementById('son1');
    let son2 = document.getElementById('son2');
    console.log(son1.nextElementSibling); // 获取下一个兄弟元素节点
    console.log(son1.previousElementSibling); // 获取上一个兄弟元素节点
    console.log(son2.nextElementSibling); // 获取下一个兄弟元素节点
    console.log(son2.previousElementSibling); // 获取上一个兄弟元素节点
  </script>
</body>

结果：
在这里插入图片描述

从例子里面看出，获取兄弟节点的方法有2个：

1. 下一个兄弟节点

语法：

对象.nextElementSibling

2. 上一个兄弟节点

语法：

对象.previousElementSibling

三、增加节点

1、创建节点

语法：

document.createElement(‘标签名’)

举例：

let newNode = document.createElement('div');

需要注意的是，这个节点已经被创建出来了，但由于没有指定节点需要插入到DOM树的哪个位置，所以我们在页面上是不能看到这个新创建的节点的。

2、追加节点

1.appendChild

语法：

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

作用：插入到父元素最后一个子元素
例子：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #parent {
      width: 400px;
      height: 400px;
      background-color: pink;
    }
    #son1 {
      width: 200px;
      height: 200px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <div id="parent"></div>
  <script>
    let parent = document.getElementById('parent');
    let newNode = document.createElement('div');
    parent.appendChild(newNode);
    newNode.id = 'son1';
  </script>
</body>

显示：
在这里插入图片描述

通过addpendChild指定了新增节点的插入位置，并且改变了他的id，所以就和css样式对应上了，就显示出来了。

2.insertBefore

语法：

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

例子：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #parent {
      width: 400px;
      height: 400px;
      background-color: pink;
    }

    #son1 {
      width: 200px;
      height: 200px;
      background-color: purple;
    }

    #son2 {
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div id="parent">
    <div id="son2"></div>
  </div>
  <script>
    let parent = document.getElementById('parent');
    let son2 = document.getElementById('son2');
    let newNode = document.createElement('div');
    parent.insertBefore(newNode, son2);
    newNode.id = 'son1';
  </script>
</body>

结果：
在这里插入图片描述

3、复制原有节点

语法：

元素对象.cloneNode(布尔值)

作用：复制当前的节点。布尔值为true时，包含后代节点一起克隆，而false时，不包含后代节点。默认为false。
例子：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #parent {
      width: 400px;
      height: 400px;
      background-color: pink;
    }

    #son1 {
      width: 200px;
      height: 200px;
      background-color: purple;
    }

    #son2 {
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div id="parent">
    <div id="son2"></div>
  </div>
  <script>
    let parent = document.getElementById('parent');
    let son2 = document.getElementById('son2');
    let newNode = son2.cloneNode(true);
    parent.insertBefore(newNode, son2);
    newNode.id = 'son1';
  </script>
</body>

四、删除节点

语法：

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

注意，必须通过父元素删除，如果和删除的元素不存在父子关系，则删除不成功。
例子：

<body>
  <div id="parent">
    <div id="son1"></div>
    <div id="son2"></div>
  </div>
  <script>
    let parent = document.getElementById('parent');
    let son2 = document.getElementById('son2');
    parent.removeChild(son2); // 删除子元素
  </script>
</body>