天行健，君子以自强不息；地势坤，君子以厚德载物。
每个人都有惰性，但不断学习是好好生活的根本，共勉！
文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
------《侠客行》
文章目录
JS（JavaScript）入门指南
JS（JavaScript）入门指南（二）
JS（JavaScript）学习专栏
DOM操作
1. DOM介绍
DOM全称为dom document object model 文档对象模型
- dom树
浏览器加载html页面时，会将html文档解析为一个树形结构，称为dom树
html文档和dom树是一一对应的
dom树被改变时，与之对应的html文档也会随之改变
当需要对html中的内容进行动态改变时，可以使用dom进行操作
dom提供了一组用来操作html文档的api，即提供一套属性、方法和事件
树上的每一个节点都是一个dom对象，树的顶层为document对象，表示整个文档
2. 查询操作
查询就是获取dom对象
2.1 查询方法
查询的方法和含义如下表
| 方法或属性 | 含义 |
|---|---|
| document.getElementById("id") | 根据id属性来查询节点，返回匹配的第一个节点 |
| document.getElementsByName("name") | 根据name属性查询，并返回所有匹配的节点集合 |
| document.getElementsByTagName("tagName") | 根据标签名来查询，返回所有匹配的节点集合 |
| documnet.querySelector("selector") | 根据css选择器来查询，返回匹配的第一个节点 |
| document.querySelectorAll("selector") | 根据css选择器来查询，返回所有匹配的节点集合 |
| parentNode属性 | 查询当前节点的父节点 |
| previous Sibing属性 | 查询当前节点的上一个节点 |
| nextSibing属性 | 查询当前节点的下一个节点 |
| firstChild属性 | 查询当前节点的第一个子节点 |
| lastChild属性 | 查询当前节点的最后一个子节点 |
2.2 查询示例
示例代码共分为以下几种：根据id获取dom对象、根据标签tag获取dom对象、根据css样式获取dom对象、根据已有节点获取其他节点dom对象
2.2.1 根据id获取dom
根据id获取dom对象方法：document.getElementById("id")
2.2.1.1 示例
示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作-查询</title>
<script>
function query(){
console.log(12345);
console.log("根据id获取dom对象");
//根据id获取dom对象，返回单个值
var objDiv = document.getElementById("d1");
//获取对象的类型
console.log(typeof objDiv);
//打印对象
console.log(objDiv);
}
</script>
</head>
<body>
<input type="button" value="获取页面中的元素" onclick="query()">
<div id="d1" class="c">
hello!
</div>
</body>
</html>
2.2.1.2 结果
使用浏览器打开代码，点击获取页面中的元素
浏览器控制台输出如下
2.2.2 根据tag获取dom
根据标签tag获取dom对象，示例如下
2.2.2.1 示例
示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作-查询</title>
<script>
function query(){
console.log(12345);
console.log("根据name获取dom对象");
//根据name获取dom对象，返回数组
var objDivs = document.getElementsByName("hobby");
//获取对象的类型
console.log(typeof objDivs);
//打印对象
console.log(objDivs);
//遍历数组对象
for(var index in objDivs){
console.log(objDivs[index])
}
}
</script>
</head>
<body>
<input type="button" value="获取页面中的元素" onclick="query()">
hobbies:
<input type="checkbox" value="eat" name="hobby">吃饭
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="kingplay" name="hobby">打王者
name: <input type="text" name="username">
</body>
</html>
2.2.2.2 结果
使用浏览器打开代码，点击获取页面中的元素
浏览器控制台输出如下
2.2.3 根据css样式获取dom
通过css样式style获取dom对象
2.2.3.1 示例
示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作-查询</title>
<script>
function query(){
console.log(12345);
console.log("根据css选择器获取单个dom对象");
//根据css选择器获取单个dom对象
var objCss = document.querySelector("#d1");
console.log(objCss);
//根据css选择器，使用标签获取对象，只会取第一个input标签的对象
var objCss2 = document.querySelector("input");
console.log(objCss2);
//根据css选择器，使用class获取对象，只会取第一个div标签的class为c的对象
var objCss3 = document.querySelector(".c");
console.log(objCss3);
//根据css选择器，使用标签和class获取对象，只会取第一个p标签的class为c的对象
var objCss4 = document.querySelector("p.c");
console.log(objCss4);
//根据css选择器获取多个dom对象
//根据css选择器，使用标签和class获取对象，只会取第一个p标签的class为c的对象
var objCss5 = document.querySelectorAll(".c");
console.log(objCss5);
}
</script>
</head>
<body>
<input type="button" value="获取页面中的元素" onclick="query()">
<div id="d1" class="c">
hello!
</div>
<div id="d2" class="c">
world!
</div>
<p class="c">test</p>
</body>
</html>
2.2.3.2 结果
使用浏览器打开代码，点击获取页面中的元素
浏览器控制台输出如下
2.2.4 根据已有节点获取其他节点dom
根据已有节点获取其他节点的dom对象，示例如下
2.2.4.1 示例
示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作-查询</title>
<script>
function query(){
console.log(12345);
//根据已有节点获取其他节点
var objId = document.getElementById("id-du");
//获取li标签的父类标签的对象
console.log(objId.parentNode);
//获取指定标签的上一个同级标签
console.log(objId.previousSibling);
//获取指定标签的下一个同级标签
console.log(objId.nextSibling);
//注意：获取上一个和下一个同级标签时，换行符和空格也算是一个内容称为文本节点，所以前后都是text类型的值
//如果有text类型的值，则需要取两次才能取到
//获取指定标签的上一个同级标签
console.log(objId.previousSibling.previousSibling);
//获取指定标签的下一个同级标签
console.log(objId.nextSibling.nextSibling);
//获取当前节点下子节点的第一个节点，如先从li子节点获取父节点ul，再取ul节点下的第一个子节点，这里获取到的是第一个li节点前的文本内容
console.log(objId.parentNode.firstChild);
//获取当前节点下子节点的最后一个节点
console.log(objId.parentNode.lastChild);
}
</script>
</head>
<body>
<input type="button" value="获取页面中的元素" onclick="query()">
<ul>a
<li id="id-li">李白</li>
<li id="id-du">杜甫</li>
<li>王维</li>
<li>杜牧</li>b
</ul>
</body>
</html>
2.2.4.2 结果
使用浏览器打开代码，点击获取页面中的元素
浏览器控制台输出如下
2.3 查询示例代码汇总
以上方法的示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作-查询</title>
<script>
function query(){
console.log(12345);
console.log("根据id获取dom对象");
//根据id获取dom对象，返回单个值
var objDiv = document.getElementById("d1");
//获取对象的类型
console.log(typeof objDiv);
//打印对象
console.log(objDiv);
console.log("根据name获取dom对象");
//根据name获取dom对象，返回数组
var objDivs = document.getElementsByName("hobby");
//获取对象的类型
console.log(typeof objDivs);
//打印对象
console.log(objDivs);
//遍历数组对象
for(var index in objDivs){
console.log(objDivs[index])
}
console.log("根据tag获取dom对象");
//根据tag标签名获取dom对象
var objIput = document.getElementsByTagName("input");
for(var index in objIput){
console.log(objIput[index]);
}
console.log("根据css选择器获取单个dom对象");
//根据css选择器获取单个dom对象
var objCss = document.querySelector("#d1");
console.log(objCss);
//根据css选择器，使用标签获取对象，只会取第一个input标签的对象
var objCss2 = document.querySelector("input");
console.log(objCss2);
//根据css选择器，使用class获取对象，只会取第一个div标签的class为c的对象
var objCss3 = document.querySelector(".c");
console.log(objCss3);
//根据css选择器，使用标签和class获取对象，只会取第一个p标签的class为c的对象
var objCss4 = document.querySelector("p.c");
console.log(objCss4);
//根据css选择器获取多个dom对象
//根据css选择器，使用标签和class获取对象，只会取第一个p标签的class为c的对象
var objCss5 = document.querySelectorAll(".c");
console.log(objCss5);
//根据已有节点获取其他节点
var objId = document.getElementById("id-du");
//获取li标签的父类标签的对象
console.log(objId.parentNode);
//获取指定标签的上一个同级标签
console.log(objId.previousSibling);
//获取指定标签的下一个同级标签
console.log(objId.nextSibling);
//注意：获取上一个和下一个同级标签时，换行符和空格也算是一个内容称为文本节点，所以前后都是text类型的值
//如果有text类型的值，则需要取两次才能取到
//获取指定标签的上一个同级标签
console.log(objId.previousSibling.previousSibling);
//获取指定标签的下一个同级标签
console.log(objId.nextSibling.nextSibling);
//获取当前节点下子节点的第一个节点，如先从li子节点获取父节点ul，再取ul节点下的第一个子节点，这里获取到的是第一个li节点前的文本内容
console.log(objId.parentNode.firstChild);
//获取当前节点下子节点的最后一个节点
console.log(objId.parentNode.lastChild);
}
</script>
</head>
<body>
<input type="button" value="获取页面中的元素" onclick="query()">
<div id="d1" class="c">
hello!
</div>
<div id="d2" class="c">
world!
</div>
<p class="c">test</p>
hobbies:
<input type="checkbox" value="eat" name="hobby">吃饭
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="kingplay" name="hobby">打王者
name: <input type="text" name="username">
<ul>a
<li id="id-li">李白</li>
<li id="id-du">杜甫</li>
<li>王维</li>
<li>杜牧</li>b
</ul>
</body>
</html>
使用浏览器打开，点击获取页面中的元素
控制台输出如下
3. 访问和修改操作
访问和修改操作包括：访问和修改属性、访问和修改内容、访问和修改样式
3.1 访问和修改属性
即获取或者设置dom对象的属性
dom对象的属性和html标签的属性几乎是一样的，一般情况下dom对象都会存在一个与对应html标签同名的属性
3.1.1 语法
访问用法如下
dom对象.属性
修改用法如下
dom对象.属性=值
3.1.2 示例代码
示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作-访问和修改</title>
<script>
// 1 访问属性
function getProperty(){
let obj = document.getElementById("baidu");
//获取超链接的href属性值
console.log(obj.href);
//获取超链接的target属性值
console.log(obj.target);
//获取指定对象的内容
let objs = document.getElementById("username");
console.log(objs.value);
//获取指定对象的是否选中值，这里的checked返回的是false或ture，选中为true
let obj3 = document.getElementById("male");
console.log(obj3.checked);
//设置属性值
//将超链接百度的地址修改为别的，设置后刷新页面，点访问属性然后再点链接即可跳转到新的网址
obj.href = "https://blog.csdn.net/mo_sss";
//将跳转规则修改为当前页面跳转
obj.target = "_self";
//修改性别单选值的默认选项，将男性该位默认
obj3.checked = "true";
}
</script>
</head>
<body>
<!-- 1 访问属性 -->
<br><br><br>
<!-- 定义按钮，绑定事件，点击后触发事件，执行函数 -->
<input type="button" value="访问属性" onclick="getProperty()">
<br>
<!-- <hr> -->
<br>
<a href="https://www.baidu.com" target="_blank" id="baidu">baidu</a>
<br><br><br>
username: <input type="text" name="username" id="username">
sex: <input type="radio" name="sex" value="male" id="male">男
<input type="radio" name="sex" value="female" id="female" checked>女
<br><br><br>
</body>
</html>
3.1.3 浏览器输出
使用浏览器打开，点以下访问属性，可以看到默认勾选的女已经换成了男
控制台输出如下，可以看到dom对象的参数输出
3.2 访问和修改内容
即获取或设置标签中的内容
两种方式：使用innerHTML、使用innerText
3.2.1 语法
访问用法如下，将内容解析为HTML
dom对象.innerHTML
或，将内容作为纯文本
dom对象.innerText
修改值用法如下
dom对象.innerHTML = "内容"
或
dom对象.innerText = "内容"
3.1.2 示例代码
相关示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作-访问和修改</title>
<script>
// 2 访问内容
function getContent(){
var obj = document.getElementById("d11");
//获取指定标签的内容
//获取标签内的所有内容，包括标签、空格和换行符等
console.log(obj.innerHTML);
//只获取标签内的文本内容
console.log(obj.innerText);
//设置内容
//设置标签内的内容，使用innerTEXT只能设置文本内容
obj.innerText = "同居长干里，两小无嫌猜。";
console.log(obj.innerText);
//设置标签内的内容，使用innerHTML可设置标签等特殊内容
obj.innerHTML = "<h2>朝如青丝暮成雪</h2>";
console.log(obj.innerHTML);
}
</script>
</head>
<body>
<!-- 2 访问内容 -->
<br>
<hr>
<!-- 定义按钮，绑定事件，点击后触发事件，执行函数 -->
<input type="button" value="访问内容" onclick="getContent()">
<br><br><br>
<div id="d11">
高堂明镜悲白发
</div>
</body>
</html>
3.1.3 浏览器输出
使用浏览器打开，
点一下访问内容，内容修改为
控制台输出如下
3.3 访问和修改css
即获取或设置css样式
两种方式：使用style属性、使用className属性
3.3.1 语法
访问css用法如下
使用style属性用法
dom对象.style.样式属性
使用className属性用法
dom对象.className
注意：
如果css属性中又短横线-，需要去掉短横线，然后将其后的单词首字母改成大写
对象标签中的class，需要使用className访问
修改css用法如下
使用style属性用法
dom对象.style.样式属性 = "值"
使用className属性用法
dom对象.className = "值"
3.3.2 示例代码
相关示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作-访问和修改</title>
<script>
// 3 访问CSS
function getStyle(){
var obj = document.getElementById("d22");
//获取CSS样式的宽度
console.log(obj.style.width);
//获取CSS样式的字体大小，这里需要注意，样式的键带短杠的需要将短杠去掉将短杠后的首字母大写
console.log(obj.style.fontSize);
//获取CSS样式的字体
console.log(obj.style.fontFamily);
//获取CSS样式的左上角的半角像素
console.log(obj.style.borderTopLeftRadius);
//设置CSS样式的值
obj.style.background = "lightgreen";
// console.log(obj.style.borderTopLeftRadius);
//另一种访问CSS的方式，className方式，需要配合CSS样式标签<style>
var obj2 = document.getElementById("d33");
//获取标签的class值
console.log(obj2.className);
//设置样式标签中class属性的值，设置后，调用该函数后样式即可被修改，这里需要注意，对象没有标签中的class，需要使用className访问
obj2.className = "c11";
//获取CSS样式的宽度
console.log(obj2.style.width);
}
</script>
<style>
/* 原始的样式 */
.ccc{
background: brown;
font-size: 30px;
}
/* 修改后的样式 在函数中调用修改样式 */
.c11{
width: 150px;
height: 20px;
background: red;
font-size: 10px;
}
</style>
</head>
<body>
<!-- 3 访问css -->
<br>
<hr>
<!-- 定义按钮，绑定事件，点击后触发事件，执行函数 -->
<input type="button" value="访问CSS" onclick="getStyle()">
<br><br><br>
<div id="d22" style="width: 1000px; height: 40px; background: lightblue; font-size: 30px; font-family: 'Courier New', Courier, monospace;border-top-left-radius: 15px;">
却下水晶帘，玲珑望秋月。
</div>
<br><br><br>
<!-- 由于行内样式的优先级较高，无法演示引入样式，故新加一个div模块 -->
<div id="d33" class="ccc">
却下水晶帘，玲珑望秋月。
</div>
</body>
</html>
3.3.3 浏览器输出
使用浏览器打开
点一下访问CSS，效果如下
控制台输出如下
4. 添加替换操作
添加元素节点的方法如下表，包含了新建节点、添加节点、替换节点
| 方法 | 含义 |
|---|---|
| document.createElement("tagName") | 创建一个元素节点，即标签 |
| document.createTextNode("textContent") | 创建一个文本节点，即标签中的文本内容 |
| node.appendChild(newNode) | 将一个新的节点newNode添加到指定的节点node中子节点的末尾 |
| node.insertBefore(newNode,refNode) | 将一个新的节点newNode插入到node节点的子节点refNode之前 |
| node.replaceChild(newNode,refNode) | 用一个新的节点newNode替换原有的node节点中的子节点refNode |
4.1 示例代码
示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作-添加</title>
<!-- dom document object model 文档对象模型
浏览器加载html页面时，会将html文档解析为一个树形结构，称为dom树
html文档和dom树是一一对应的
dom树被改变时，与之对应的html文档也会随之改变
当需要对html中的内容进行动态改变时，可以使用dom进行操作
dom提供了一组用来操作html文档的api，即提供一套属性、方法和事件
树上的每一个节点都是一个dom对象，树的顶层为document对象，表示整个文档-->
<script>
function add(){
//1 创建元素节点
var li = document.createElement("li");
//2 设置文本内容
// var content = document.createTextNode("baijuyi");
//添加到节点中
// li.appendChild(content);
li.innerText="add";
// console.log(li);
//3 设置属性
li.setAttribute("id","f4")
//4 添加到节点中
var ul = document.getElementById("u11");
ul.appendChild(li)
}
function insert(){
//1 创建元素节点
var li = document.createElement("li");
//2 设置文本内容
// var content = document.createTextNode("baijuyi");
//添加到节点中
// li.appendChild(content);
li.innerText="insert-s2";
// console.log(li);
//3 设置属性
li.setAttribute("id","f4")
//4 添加到节点中
var ul = document.getElementById("u11");
//5 添加到某个节点的前面
ul.insertBefore(li, document.getElementById("s2"));
}
function replace(){
//1 创建元素节点
var li = document.createElement("li");
//2 设置文本内容
// var content = document.createTextNode("baijuyi");
//添加到节点中
// li.appendChild(content);
li.innerText="replace-t3";
// console.log(li);
//3 设置属性
li.setAttribute("id","f4")
//4 添加到节点中
var ul = document.getElementById("u11");
//6 替换某个节点
ul.replaceChild(li, document.getElementById("t3"))
}
</script>
</head>
<body>
<input type="button" value="add" onclick="add()">
<input type="button" value="insert" onclick="insert()">
<input type="button" value="replace" onclick="replace()">
<ul id="u11">
<li id="f1">libai</li>
<li id="s2">dufu</li>
<li id="t3">dumu</li>
</ul>
<!-- 添加操作：
方法---含义
document.createElement("tagName") 创建一个元素节点，即标签
document.createTextNode("textContent") 创建一个文本节点，即标签中的文本内容
node.appendChild(newNode) 将一个新的节点newNode添加到指定的节点node中子节点的末尾
node.insertBefore(newNode,refNode) 将一个新的节点newNode插入到node节点的子节点refNode之前
node.replaceChild(newNode,refNode) 用一个新的节点newNode替换原有的node节点中的子节点refNode
-->
</body>
</html>
4.2 效果展示
使用浏览器打开页面，如下
元素界面
分别点击添加、插入、替换按钮进行查看效果
4.2.1 添加
点击add按钮后的页面
元素界面新增add
4.2.2 指定位置添加
点击insert按钮，页面如下
元素界面如下
4.2.3 替换
点击replace替换元素，页面如下
元素界面如下
5. 删除操作
| 方法 | 含义 |
|---|---|
| node.remove() | 删除当前节点 |
| node.removeChild(refNode) | 删除当前节点中指定的子节点 |
5.1 示例代码
示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作-删除</title>
<!-- dom document object model 文档对象模型
浏览器加载html页面时，会将html文档解析为一个树形结构，称为dom树
html文档和dom树是一一对应的
dom树被改变时，与之对应的html文档也会随之改变
当需要对html中的内容进行动态改变时，可以使用dom进行操作
dom提供了一组用来操作html文档的api，即提供一套属性、方法和事件
树上的每一个节点都是一个dom对象，树的顶层为document对象，表示整个文档-->
<script>
function del1(){
//1 删除节点
document.getElementById("f1").remove();
}
function del2(){
//2 删除节点的另一种方式，上面可能更简单
var ul = document.getElementById("u11");
ul.removeChild(document.getElementById("s2"));
}
function del_last(){
//2 删除节点的另一种方式，上面可能更简单
var ul = document.getElementById("u11");
//删除最后一个节点（使用这一行代码时请将上面的remove方法注掉），注意，需要删除两次才能删掉，因为文本内容的空格和换行符也是一个节点内容
ul.removeChild(ul.lastChild);
}
</script>
</head>
<body>
<input type="button" value="del1" onclick="del1()">
<input type="button" value="del2" onclick="del2()">
<input type="button" value="del_last" onclick="del_last()">
<ul id="u11">
<li id="f1">libai</li>
<li id="s2">dufu</li>
<li id="t3">dumu</li>
<li id="t4">zhaosi</li>
<li id="t5">wangwu</li>
<li id="t6">wanger</li>
<li id="t7">qiansun</li>
<li id="t8">zhusi</li>
<li id="t9">huanwu</li>
</ul>
<!-- 删除操作：
方法---含义
node.remove() 删除当前节点
node.removeChild(refNode) 删除当前节点中指定的子节点
-->
</body>
</html>
5.2 效果演示
使用浏览器打开页面，如图
5.2.1 remove方法删除
点击del1
使用remove直接指定某个元素删除，删除id为f1的元素
删除后如下
5.2.2 removeChild方法删除
使用removeChild方法删除元素
点击del2
删除id为s2的元素
删除后如下
然后删除最后一个元素，点击del_last，这里需要注意，要点两次才能删除成功，因为第一次删除的是标签外的空格和换行符（也会被作为一个元素）
删除后的结果如下
删除最后一个元素的方法的好处是可以一直删除，直到全部删除
6. 示例代码下载
本文示例代码均已上传至CSDN资源库
下载地址：JavaScript DOM操作 示例代码
感谢阅读，祝君暴富！
原文链接: https://hanshan.blog.csdn.net//article/details/139959285