JavaScript中dom操作方法示例详解
作者：我嘞个ddddd
前言
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操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！