JavaScript：DOM 操作 增、删、改、查 详解（用法 + 例子 + 代码）

已于 2023-09-06 09:01:40 修改
阅读量916 收藏 2
点赞数 1
分类专栏： HTML + CSS + JS 文章标签： javascript 开发语言 html css 前端
于 2023-08-31 09:55:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cosmoshhhyyy/article/details/132593064
版权

文章目录

DOM 操作

DOM（Document Object Model）： 文档对象模型

作用：增、删、改、查。

查找

根据属性 查找

下边的演示都是基于如下html。

<body>
    <div id="xx1"></div>
    <div class="xx2">1</div>
    <div class="xx2">2</div>
    <p class="xx4">1</p>
    <p class="xx4">2</p>
</body>

getElementById() 以id来查找元素

var xx1 = document.getElementById("xx1")
console.log(xx1)

在这里插入图片描述

getElementsByClassName() 以类名查找
注意：元素class名可以相同，若有多个会返回一个数组，而id有多个相同的只会返回第一个。

var xx2 = document.getElementsByClassName("xx2");
console.log(xx2)
console.log(xx2[0])
console.log(xx2[1])

在这里插入图片描述

getElementsByTagName() 以标签来查找元素

同样也要注意多个标签相同的情况。

var xx3 = document.getElementsByTagName("p")
console.log(xx3)

在这里插入图片描述

querySelector() 选择器来查找元素（也就是css中的那个）
注意：只能返回第一个复合条件的。

var xx4 = document.querySelector(".xx4")
console.log(xx4)

在这里插入图片描述

querySelectorAll() 选择器来查找元素（与上面不同的是，可以查找多个）
注意：与 getElementsByClassName() 不同的是，只有一个符合时，也是返回的数组。（记住它返回的一定是数组即可）

var xx5 = document.querySelectorAll(".xx4")
console.log(xx5)

在这里插入图片描述

例子 点击背景变色

第一种：点第二个的时候前一个点的不会消失

在这里插入图片描述

<!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="xx">hello</div>
    <h3 class="xx">hello</h3>
    <h3 class="xx">hello</h3>
    <h3 class="xx">hello</h3>
</body>
    <script>
        var h = document.querySelectorAll(".xx")

    for (var i = 0; i < h.length; i++){
        h[i].onclick = function() {
            this.style.background = "red"
        }
    }
    </script>
</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="xx">hello</div>
    <h3 class="xx">hello</h3>
    <h3 class="xx">hello</h3>
    <h3 class="xx">hello</h3>
</body>
<script>
    var h = document.querySelectorAll(".xx")

    for (var i = 0; i < h.length; i++){
        h[i].onclick = function() {
            for (var j = 0; j < h.length; j++){
                h[j].style.background = "none"
            }
            this.style.background = "red"
        }
    }
</script>
</html>

根据元素之间的关系 查找：

比较简单，就不再每个都写用法了。
最后给出一个例子，就能明白了。

parentNode 获取当前节点父亲节点

parentElement 与上相同

childNodes 获取当前节点的所以孩子节点（包括文本节点，空白也算，可以通过nodeType过滤）

children 获取当前的所以孩子节点（只包括元素节点）

previousSibling 获取当前节点上一个节点（注意文本节点出存在）

previoudElementSibling 获取当前节点上一个元素节点

nextSibling 获取当前节点的下一个节点（注意文本节点的存在）

nextElementSibling 获取当前节点的下一个元素节点

firstChild 获取当前节点的第一个孩子节点（注意文本节点的存 在）

firstElementChild 获取当前节点的第一个元素孩子节点

lastChild 取当前节点的最后一个孩子节点（注意文本节点的存在）

lastElementChild 取当前节点的最后一个元素孩子节点

例子 点击切换

在这里插入图片描述

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>
    <link rel="stylesheet" href="idx.css">
    <script src="idx.js" defer></script>
</head>
<body>
    <div class="container">
        <ul class="tab">
            <li class="cur" index="0">新闻动态</li>
            <li index="1">学术研究</li>
            <li index="2">人才招聘</li>
        </ul>
        <div class="tabBody">
            <div>新闻动态内容</div>
            <div>学术研究内容</div>
            <div>人才招聘内容</div>
        </div>
    </div>
    
</body>
</html>

css:

*{
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    
}
.container {
    width: 50vh;
}
.container .tab {
    display: flex;
    justify-content: space-between;
}
.container .tab li{
    list-style: none;
    padding: 10px;
    color:blue;
    border: 1px solid red;
    text-align: center;
    border-bottom: 1px solid white;
}
.container .tab .cur{
    position: relative;
    font-weight: 600;
    top: 1px;
}

.container .tabBody{
    padding: 10px;
    border: 1px solid red;
    height: 100px;
}
.container .tabBody div{
    background: pink;
    display: none;
}
.container .tabBody div:nth-child(1) {
    display: block;
}

js:

var li_list = document.querySelectorAll(".container .tab li")
var div_list = document.querySelectorAll(".container .tabBody>div")
for (var i = 0; i < li_list.length; i++){
    li_list[i].onclick = function() {
        var idx = this.getAttribute("index")

        for (var j = 0; j < li_list.length; j++){
            li_list[j].className = "";
        }

        this.className = "cur"

        for (var k = 0; k < div_list.length; k++){
            if (k == idx){
                div_list[k].style.display = "block"
            } else {
                div_list[k].style.display = "none"
            }
        }
    }
}

若有多个tab，为了互不影响:

在这里插入图片描述

css 文件与上面同，不再给出。
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>
    <link rel="stylesheet" href="idx.css">
    <script src="idx.js" defer></script>
</head>
<body>
    <div class="container">
        <ul class="tab">
            <li class="cur" index="0">新闻动态</li>
            <li index="1">学术研究</li>
            <li index="2">人才招聘</li>
        </ul>
        <div class="tabBody">
            <div>新闻动态内容</div>
            <div>学术研究内容</div>
            <div>人才招聘内容</div>
        </div>
    </div>
    <div class="container">
        <ul class="tab">
            <li class="cur" index="0">新闻动态</li>
            <li index="1">学术研究</li>
            <li index="2">人才招聘</li>
        </ul>
        <div class="tabBody">
            <div>新闻动态内容</div>
            <div>学术研究内容</div>
            <div>人才招聘内容</div>
        </div>
    </div>
    <div class="container">
        <ul class="tab">
            <li class="cur" index="0">新闻动态</li>
            <li index="1">学术研究</li>
            <li index="2">人才招聘</li>
        </ul>
        <div class="tabBody">
            <div>新闻动态内容</div>
            <div>学术研究内容</div>
            <div>人才招聘内容</div>
        </div>
    </div>
</body>
</html>

js:

var container_list = document.querySelectorAll(".container")

for (var h = 0; h < container_list.length; h++){
    var item_li_list = container_list[h].querySelectorAll(".container .tab li")
    for (var i = 0; i < item_li_list.length; i++){
        item_li_list[i].onclick = function() {
            var cur_li_list = this.parentNode.children

            for (var j = 0; j < cur_li_list.length; j++){
                cur_li_list[j].className=""
            }

            this.className = "cur"

            var cur_div_list = this.parentNode.parentNode.querySelectorAll(".tabBody>div")
            var idx = this.getAttribute("index")
            for (var k = 0; k < cur_div_list.length; k++){
                if (k == idx){
                    cur_div_list[k].style.display = "block"
                } else {
                    cur_div_list[k].style.display = "none"
                }
            }
        }
    }
}

修改 和 获取

innerHTML 非表单控件，只包含html
innerText 非表单控件，只包含纯文本
value 表单控件

例子 获取输入框内容 修改其他标签内容

在这里插入图片描述

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>
    <script src="test.js" defer></script>
</head>
<body>
    <div class="container">
        abcd
    </div>
    <input type="text" class="ipt">
    <input type="button" value="修改" class="sbt">
</body>
</html>

js:

var container = document.querySelector(".container")
var ipt = document.querySelector(".ipt")
var sbt = document.querySelector(".sbt")

sbt.onclick = function() {
    var txt = ipt.value
    container.innerHTML = txt
}

修改属性

获取到之后，直接加.需要修改的元素进行修改即可。（只能修改它本身有的属性 自定义的不写）
setAttribute(“属性”) 与上不同的是可以获取自定义的属性。
注意在修改style中内容，名字规律是把css中—去掉，后面字母换成大写即可。（如：t.style.borderRadius）

增加

步骤一：创建 或 复制元素
创建 createElement
复制 cloneNode(boolean) true 深度复制（只复制一层） false 浅复制（就复制最外层）
步骤二：添加属性
步骤三: 添加到以有元素中 追加 appendChild
元素3.insertBefore(元素1，元素2) 在元素3中的元素2之前插入
扩展：替换元素 replaceChild

例子 基本使用方法

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>
    <script src="test.js" defer></script>
</head>
<body>
    <div class="container">
        abcd
    </div>
    <input type="text" class="ipt">
    <input type="button" value="修改" class="sbt">
</body>
</html>

js：

var div = document.createElement("div") // 创建
div.innerHTML = "<h3>我是 创建 添加的</h3>"  

var container = document.querySelector(".container")
container.appendChild(div) // 添加

var newcontainer = container.cloneNode(true)  // 克隆
newcontainer.innerHTML = "<h3>我是 克隆 添加的</h3>"
container.appendChild(newcontainer)

var ipt = document.querySelector(".ipt")

var newipt = document.createElement("div")
newipt.innerHTML = "<h3>我是 替换 的</h3>"  
document.querySelector("body").replaceChild(newipt, ipt) // 替换

console.log(document.querySelector("body")) // 打印一下，看结构

js之前的结构：

在这里插入图片描述

js之后的结构：

在这里插入图片描述

删除

removeChild 删除一个子节点。返回删除的节点。

例子 点击按钮把输入框删除

在这里插入图片描述

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>
    <script src="test.js" defer></script>
</head>
<body>
    <div class="container">
        abcd
    </div>
    <input type="text" class="ipt">
    <input type="button" value="修改" class="sbt">
</body>
</html>

js:

var ipt = document.querySelector(".ipt")
var sbt = document.querySelector(".sbt")  
var body = document.querySelector("body")

sbt.onclick = function() {
    body.removeChild(ipt) // 删除ipt
}
Cosmoshhhyyy
关注
专栏目录
Springboot 2 + Element UI + Vue.js实现简单的增删改查系统（IDEA）
originalone的博客
01-30 1183
Java Web开发菜鸟，初学Springboot 2，Element UI，Vue.js，发现三者合用是真的香，因此记录一些浅薄的个人理解，下一篇是代码解析。
JavaScript Dom 绑定事件操作实例详解
10-16
在JavaScript中，DOM绑定事件是实现用户交互的关键部分，允许我们响应用户的操作，如点击按钮、输入文本等。以下是对JavaScript DOM绑定事件的详细讲解，包括几种常见的绑定方式及其应用场景。 1. **直接在HTML中...
【JavaScript】DOM元素操作节点增删改查
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
03-30 2124
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。通过这些DOM接口可以改变网页的内容、结构和样式。网页中的所有内容都是节点（标签、属性、文本、注释等等），在DOM中，节点使用Node来表示。HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。
JavaScript 实现HTML DOM增删改查操作的常见方法详解
10-15
主要介绍了JavaScript 实现HTML DOM增删改查操作,结合实例形式分析了JavaScript针对HTML DOM元素增删改查常见操作技巧与使用注意事项,需要的朋友可以参考下
JavaScript初级——DOM增删改
最新发布
Fan_web的博客
08-25 459
本文主要简单分享了关于DOM 的增删改的一些操作，下一节会补充一个小的知识点。
DOM的增删改查
Always-Learning
11-26 162
1：在id名为city的div下添加一个li标签，标签内容为广州。 # 1：创建li元素 var li = document.createElement("li"); # 2：创建文本节点 var guangzhou = document.createTextNode("广州"); # 3：将li元素与文本绑定在一起 li.appendChild(guangzhou); # 4：获取id为city的节点 var city = document.getElementById("city"); # 5：将组合好
JavaScript之DOM增删改查(重点)
程序猿小九九的博客
02-10 3800
DOM操作：事件、增、删、改查
DOM的操作（增删改查）
weixin_30359021的博客
08-12 380
操作DOM的核心就是增删改查 目录 一、节点创建型API 1.1 createElement 1.2 createTextNode 1.3 cloneNode 1.4 createDocumentFragment 二、页面修改形API（包括删除和添加）（删）（改） 2.1 appendChild(追加为子元素) 2.2 insertBefore(插入...
js中DOM的增删改查
weixin_43735593的博客
11-23 1215
js中DOM的增删改查 常见的Dom、html的操作不外乎查找节点、增加节点（尤其是动态渲染数据的时候）、修改节点内容、删除节点。 查找节点 1、一般就是document.getElement(s)系列，主要有document.getElementById(‘id’)、document.getElementsByClassName(‘classname’)、document.getElements...
JavaScript DOM操作：Window对象的confirm方法详解
"了解JavaScript中的Window对象，特别是confirm方法的使用，以及文档对象模型（DOM）的基本概念和历史" 在JavaScript编程中，Window对象是全局对象，它代表了浏览器的窗口。Window对象包含了许多与浏览器窗口交互的...
JavaScript DOM操作：Window对象的open方法详解
"Window对象的open方法是JavaScript中...`window.open`方法是JavaScript实现页面交互和窗口控制的关键，而DOM则为JavaScript提供了强大的网页操作能力。理解并熟练掌握这两个概念对于编写交互性强的Web应用至关重要。
JavaScript DOM操作：元素、属性和文本节点详解
6. 检查元素子节点数量的例子：在示例代码中，通过遍历`childNodes`并检查`nodeType`为1的节点数量，来获取元素的子元素数量。 属性节点 属性节点与元素节点关联，代表HTML元素的属性，如`id`、`class`等。属性节点...
js操作DOM的增删改查
qq_42972187的博客
07-01 304
1、获取查找DOM元素，getElementById(),document.getElementsByTagName;document.getElementsByClassName; document,querySelector();document.getElementSelectorAll(); 2、增加 元素.appedChild(); 3、改元素：元素。replaceChild（）；第一个...
JavaScript实现DOM增删改查
Hern（宋兆恒）
06-28 510
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">...
js DOM实现增删改查
苏墨
03-15 585
文章目录什么是DOM文档对象模型节点：Node——构成HTML文档最基本的单元。DOM查询获取元素节点 通过document对象调用获取元素节点的子节点获取父节点和兄弟节点DOM 操作内联样式通过JS修改元素的样式：DOM 实现增删改 什么是DOM ​ DOM，全称Document Object Model文档对象模型。 JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的...
DOM 节点的增删改查
M_r_J_的博客
05-02 456
创建DOM元素 •createElement(标签名) 创建一个节点 •appendChild(节点) 追加一个节点 例子：为ul插入li&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt...
js中DOM节点的增删改查
weixin_45017726的博客
11-06 393
js中DOM节点的增删改查 注：后面附有源码，可自行测试。 创建节点： <div id="app2">这是spp2</div> <script> let app2 = document.querySelector('#app2') let span2 = document.createElement('span') span2.innerHTML = 'houdunren你好' app2.append(span2);//最后插入到#app2
精简：Javascript常用DOM操作整理；JS中DOM的增删改查
ChuanyangChen的博客
02-18 417
JS常用DOM操作整理; JS中DOM的增删改查 一、 DOM查询 获取元素节点 通过document对象调用： 方法名 作用 getElementById() 通过id属性获取一个元素节点对象 getElementsByTagName() 通过标签名获取一组元素节点对象 getElementsByName() 通过name属性获取一组元素节点对象 getElementsByClassName() 根据元素的class属性值查询一组元素节点对象 querySelector("
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cosmoshhhyyy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值