DOM节点的相关操作

最新推荐文章于 2024-09-14 19:44:09 发布

阿里小阿希

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量180

点赞数

分类专栏： js 文章标签： javascript dom

本文链接：https://blog.csdn.net/qq_41186565/article/details/115715549

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了DOM（Document Object Model）中的节点操作，包括如何创建新节点、在文档中插入节点（如在末尾或参照元素前插入）、删除节点、替换节点，以及获取父节点和子节点的方法。这些基本操作对于网页动态更新和DOM遍历至关重要。

摘要由CSDN通过智能技术生成

前言

提示：

提示：以下是本篇文章正文内容

一、DOM的节点操作

1.创建dom节点

代码如下（示例）：

var img=document.createElement('img')
	img.src='img/1.png'
	console.log(img)

2.末尾插入dom节点

代码如下（示例）：

document.body.appendChild(img)
document.querySelector('.box1')appendChild(img)

3.参照之前插入dom节点

代码如下（示例）：

document.querySelector('.box1')..insertBefore(img,document.querySelector)
document.body.insertBefore(img,document.querySelector('h1')))

4.末尾插入dom节点

代码如下（示例）：

document.body.appendChild(img.cloneNode(ture))
document.body.insertBefore(img,document.querySelector('h1'))

Ture 深度拷贝每层都克隆默认浅度 ,浅克隆只克隆第一层标签

5.删除dom节点

代码如下（示例）：

document.querySelector('h1').remove()

6.替换dom节点

代码如下（示例）：

document.body.replaceChild(img,document.querySelector())
document.querySelector('h1').replaceChild()

7.获得一个父dom节点

代码如下（示例）：

document.body.appendChild(img)
document.querySelector('.box1')appendChild(img)

8.获得子节点

代码如下（示例）：

获得所有孩子
document.querySelector('box1').children
获得第一个直接孩子
document.querySelector('box1').firstElementChild
获得最后一个孩子			
document.querySelector('box1').lastElementChild
下一个兄弟节点
document.querySelector('box1').nextElementSibling
前一个兄弟节点
document.querySelector('box1').previousElementSibling