JavaScript中dom操作方法示例详解

更新时间：2025年08月04日 08:31:19 作者：我嘞个ddddd

JavaScript操作DOM（文档对象模型）是前端开发中的一项基本技能,它允许开发者通过编程方式动态地修改网页的内容、结构和样式,这篇文章主要介绍了JavaScript中dom操作方法的相关资料,需要的朋友可以参考下

前言

DOM（文档对象模型）操作是基于面向对象的思想设计的。在浏览器中，HTML 文档被解析为一个由对象组成的树形结构（即 DOM 树），每个 HTML 元素、属性、文本节点都是一个对象，通过对象的属性和方法可以实现对页面内容的动态操作。

一、查找

1.1 获取元素

getElementById() 通过id获取元素获取符合条件的第一个对象

var obj = document.getElementById("aa")

getElementsByClassName() 根据class值查找找到所有符合条件的对象组成的数组

var arr = document.getElementsByClassName("aa")

getElementsByTagName() 根据元素名称查找找到所有符合条件的对象组成的数组

var arr = document.getElementsByTagName("div")

querySelector() 根据元素选择器查找，获取符合条件的第一个对象

var obj = document.querySelector(".aa")

querySelectorAll() 根据元素选择器查找，找到所有符合条件的对象组成的数组

var arr = document.querySelectorAll(".aa")

1.2 通过关系查找(Dom节点)

找父亲 parentNode parentElement

找孩子 childNodes(包含元素节点和文本节点) children(所有子元素节点)

第一个孩子 firstChild firstElementChild

最后一个孩子 lastChild lastElementChild

上一个元素 previousSibling previousElementSibling

下一个元素 nextSibling nextElementSibling

二、修改

2.1 改内容

innerText	以文本形式呈现
innerHTML	解析成标签
value	用于修改收集用户信息的标签(如input)

2.1.1 innerText

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="aa">aa</div>
    <input type="text" value="00" class="bb">
</body>
<script type="text/javascript" src="./00.js"></script>
</html>

js文件代码如下：

var obj = document.querySelector(".aa")
obj.innerText="<a>0000000</a>"

结果如下：

2.1.2 innerHTML

js代码如下：

var obj = document.querySelector(".aa")
obj.innerHTML="<a>0000000</a>"

结果如下：

2.1.3 value

js代码如下：

var obj = document.querySelector(".aa")
obj.innerHTML="<a>0000000</a>"
var bb = document.querySelector(".bb")
bb.value="xxxxx"

结果如下：

2.2 改属性

对象.属性=值

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>
<style>
    .aa{
        width:200px;
        height:200px;
        background-color: aqua;
    }
    .bb{
        width:200px;
        height:200px;
        background-color:yellow;
    }
</style>
<body>
    <div class="aa">aa</div>
</body>
<script type="text/javascript" src="./00.js"></script>
</html>

结果如下：

js文件代码如下：

var obj = document.querySelector(".aa")
obj.className="bb"

结果如下：

2.3 自定义属性

setAttribute("属性名", "属性值")

getAttribute("属性名")

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>
<style>
    .aa{
        width:200px;
        height:200px;
        background-color: aqua;
    }
    .bb{
        width:200px;
        height:200px;
        background-color:yellow;
    }
</style>
<body>
    <div class="aa">aa</div>
</body>
<script type="text/javascript" src="./00.js"></script>
</html>

js文件代码如下：

var obj = document.querySelector(".aa")
obj.setAttribute("index","1")
console.log(obj.getAttribute("index"))

结果如下：

2.4 改样式

obj.style.属性名="属性值"

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>
<style>
    .aa{
        width:200px;
        height:200px;
        background-color: aqua;
    }
    .bb{
        width:200px;
        height:200px;
        background-color:yellow;
    }
</style>
<body>
    <div class="aa">aa</div>
</body>
<script type="text/javascript" src="./00.js"></script>
</html>

js文件代码如下：

var obj = document.querySelector(".aa")
obj.style.backgroundColor='red'

结果如下：

注：修改样式时属性名要采用驼峰式，如 font-size 要变为fontSize。

三、添加

3.1 创建元素

createElement()	创建元素
cloneNode()	复制元素( false浅复制，只复制外壳 true复制全部)

3.2 添加元素

appendChild()	子元素最后位置添加
insertBefore()	某个子元素前添加
replaceChild()	替换掉某个子元素

3.2.1 appendChild()

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>
<style>
    .aa{
        width:200px;
        height:200px;
        background-color: aqua;
    }
    .bb{
        width:100px;
        height:100px;
        background-color:rgb(255, 0, 93);
    }
</style>
<body>
    <div class="aa">
        <div class="bb">子元素</div>
    </div>
</body>
<script type="text/javascript" src="./00.js"></script>
</html>

代码运行结果：

js文件代码：

var obj = document.querySelector(".aa")
var bb = document.querySelector(".bb")
var newNode = document.createElement("h2")
console.log(newNode)
newNode.innerText = "新添加的元素"
newNode.className = "xixi"
newNode.style.background = "purple"
obj.appendChild(newNode,bb)

结果如下：

3.2.2 insertBefore()

js文件代码：

var obj = document.querySelector(".aa")
var bb = document.querySelector(".bb")
var newNode = document.createElement("h2")
console.log(newNode)
newNode.innerText = "新添加的元素"
newNode.className = "xixi"
newNode.style.background = "purple"
obj.insertBefore(newNode,bb)

结果如下：

注：还可以采用prepend()。

3.2.3 replaceChild()

js代码如下：

var obj = document.querySelector(".aa")
var bb = document.querySelector(".bb")
var newNode = document.createElement("h2")
console.log(newNode)
newNode.innerText = "新添加的元素"
newNode.className = "xixi"
newNode.style.background = "purple"
obj.replaceChild(newNode,bb)

结果如下：

3.2.4 cloneNode()

js文件代码如下：

var obj = document.querySelector(".aa")
var bb = document.querySelector(".bb")
var newNode = document.createElement("h2")
console.log(newNode)
newNode.innerText = "新添加的元素"
newNode.className = "xixi"
newNode.style.background = "red"
var cc = newNode.cloneNode(true)
obj.replaceChild(cc,bb)

结果如下：

五、删除

找要删除元素的父级元素，调用removeChild()方法

html文件代码同增加中html文件代码。

js文件代码如下：

var obj = document.querySelector(".aa")
var bb = document.querySelector(".bb")
obj.removeChild(bb)

结果如下：

总结

到此这篇关于JavaScript中dom操作方法的文章就介绍到这了,更多相关js dom操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript使用Fetch的方法详解
Fetch API提供了一个JavaScript接口，用于访问和操纵HTTP管道的部分。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。本文将详解JS如何使用Fetch，感兴趣的可以学习一下
2022-05-05
js 中的柯里化与反柯里化的基础概念和用法
柯里化是将接受多个参数的函数转换成一系列只接受单个参数的函数的过程，而反柯里化是将柯里化函数转换成接受多个参数的函数的过程，本文将带大家理解 js 中的柯里化与反柯里化,需要的朋友可以参考下
2023-07-07
微信小程序实现简易table表格
这篇文章主要为大家详细介绍了微信小程序实现简易table表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-02-02
JavaScript二叉树及各种遍历算法详情
这篇文章主要介绍了JavaScript二叉树及各种遍历算法详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-07-07
JS简单验证上传文件类型的方法
这篇文章主要介绍了JS简单验证上传文件类型的方法,涉及javascript文件遍历及字符串截取、匹配等相关操作技巧,需要的朋友可以参考下
2017-04-04
JavaScript中的50+个实用工具函数小结
JavaScript可以做很多出色的事情，本篇文章给大家整理50+个实用工具函数，可以帮助你提高工作效率并可以帮助调试代码，需要的朋友们下面随着小编来一起学习学习吧
2021-06-06
ie8下修改input的type属性报错的解决方法
当用户勾选显示明文复选框时，要以明文显示用户输入的密码，去掉勾选时要变回密文，问题是ie8中是不允许修改input的type属性
2014-09-09
js 与或运算符 || && 妙用
js 与或运算符 || && 妙用，可用于精简代码，降低程序的可读性。
2009-12-12
js实现上下滑动轮播
这篇文章主要为大家详细介绍了js实现上下滑动轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
JavaScript实现简易计算器功能的两种方法
这篇文章主要为大家详细介绍了JavaScript实现简易计算器功能的两种方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07