JavaScript——DOM方法
·
根据第一篇DOM基础版文章，我们学习了如何获取对应的DOM元素以及操作DOM元素的内容样式或结构，下面继续对如何操作DOM进行深入研究。
首先给出一个基础代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: #87CEFA;
}
.www{
font-size: 30px;
}
.box1{
color: #F0E68C;
}
</style>
</head>
<body>
<div class="box"></div>
<p class="qqq">你好</p>
<h2 class="www">你好</h2>
</body>
</html>
得到的结果是这样的：
1、类名操作
不同于基础篇的类名操作：
p.className="ap ap1"
p.setAttribute("class","ap")
我们可以不仅仅只将原类名进行覆盖，我们还可以添加、删除、存在则删除，不存在则添加类名、替换原有类名操作，如下：
<script>
let box=document.querySelector(".box");
let h2=document.querySelector("h2");
box.onclick=function (){
// h2.setAttribute("class","box1")
//h5 类名处理
h2.classList.add("box1");//添加新类名
h2.classList.remove("www");//删除对应类型
h2.classList.toggle("box1");//存在则删除，不存在则添加类名
h2.classList.replace("www","box1");//替换原有类名
}
</script>
2、DOM详情
有很多节点类型，比如文本节点、元素节点、注释节点等等，
每个节点都代表一个数字
就好比，文本节点 => 3，元素节点 => 1，注释节点 => 8
元素节点.childNodes 获取元素所有子级节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
6
<p>666</p>
<!-- 你好-->
</div>
<script>
let div=document.querySelector("div");
console.log(div.childNodes[0]);
console.log(div.childNodes[1]);
console.log(div.childNodes[2]);
console.log(div.childNodes[3]);
</script>
</body>
</html>
元素节点.nodeType 输出节点类型
let time=div.childNodes
console.log(time[0].nodeType);
输出结果为3，代表文本节点
节点.nodeName 获取名称
console.log(time[0].nodeName);
console.log(time[1].nodeName);
console.log(time[2].nodeName);
console.log(time[3].nodeName);
控制台得到结果是这样的：
元素节点.nodeValue 获取节点内容
console.log(time[0].nodeValue);
得到结果：
3、DOM进阶操作
（1）探究子父级节点
给定初始框架：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 300px;
background-color: #F0E68C;
margin: 100px auto 0;
position: relative;
}
</style>
</head>
<body>
<div class="box">
<h2>你好</h2>
<p class="box_base">123</p>
<div>666</div>
</div>
</body>
</html>
如图显示：
元素.childNodes 获取元素的所有子级节点
元素.children 获取元素的所有子级元素节点
let box=document.querySelector(".box");
let childNodes=box.childNodes;
let children=box.children;
console.log(childNodes);//子节点
console.log(children[0]);//子元素节点
console.log(children[1]);//子元素节点
console.log(children[2]);//子元素节点
最终得到的结果，如图：
元素.parentNode 通过子级获取父级节点
let box_base=document.querySelector(".box .box_base");
console.log(box_base.parentNode);
得到结果如图：
元素.offsetParent 获取元素的定位父级
会根据是否有position而变化
console.log(box_base.offsetParent)
若是将最一开始的style中的position删去：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 300px;
background-color: #F0E68C;
margin: 100px auto 0;
/*position: relative;*/
}
.box_base{
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<h2>你好</h2>
<p class="box_base">123</p>
<div>666</div>
</div>
<script>
let box=document.querySelector(".box");
let childNodes=box.childNodes;
let children=box.children;
console.log(childNodes);//子节点
console.log(children[0]);//子元素节点
console.log(children[1]);//子元素节点
console.log(children[2]);//子元素节点
let box_base=document.querySelector(".box .box_base");
console.log(box_base.parentNode);
//获取元素的定位父级
console.log(box_base.offsetParent)
</script>
<!--
元素.childNodes 获取元素的所有子级节点
元素.children 获取元素的所有子级元素节点
元素.parentNode 获取元素的父节点
元素.offsetParent 获取元素的定位父级元素节点
-->
</body>
</html>
最终的结果就变成了：
（2）通过document 创建节点
document.createElement（“标签名”） 创建元素节点
let div1=document.createElement("div");
let div2=document.createElement("div");
let p=document.createElement("p");
document.createTextNode（“文本节点内容”） 创建文本节点
let txt1=document.createTextNode("文本节点内容");
let txt2=document.createTextNode("222");
document.createComment("注释内容") 创建注释节点
let com=document.createComment("注释内容")
document.createDocumentFragment() 创建节点容器（把它当成一个div一样的存储） 文档代码片段
let frm=document.createDocumentFragment()
console.log(frm.nodeType);
我们创建的节点与之前一样，我们也可以对其进行之前类似的操作：
div1.classList.add("qqq");
div1.setAttribute("id","app");
div1.style.background="red";
div1.innerText="6666";
（3）将创建的元素 文本 注释 内容添加到页面中 或对应容器
元素.appendChild（元素节点||文本节点||注释节点）；添加到元素的子节点的最后位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
border:10px solid greenyellow;
}
</style>
</head>
<body>
<div class="box">
<p>哈哈哈哈哈</p>
</div>
<script>
//添加到页面中
let box=document.querySelector(".box");
//创建元素节点
let div=document.createElement("div");
let p=document.createElement("p");
div.classList.add("qqq");
div.setAttribute("id","app");
div.style.background="red";
div.innerText="6666";
let span=document.createElement("span");
span.innerText="通过js创建的span标签";
box.appendChild(div);
box.appendChild(span);
</script>
</body>
</html>
最后结果如下图所示：
这个方式是一次只能添加一个，如果想要一次性添加多个的话可以使用：
元素.append(元素节点,文本节点,注释节点)
注意：顺序会影响！！！
box.append(div,span);
元素.insertBefore(添加的元素节点，获取的元素节点||文本节点||注释节点)：添加到子级指定位置（在某个元素之前）
let h=document.createElement("h2");
h.innerText="学习创建与添加";
box.insertBefore(h,box.children[0]);
（4）删除与替换
设定初始框架为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 300px;
background-color: #F0E68C;
margin: 100px auto 0;
}
.box .box_base{
color: #87CEFA;
}
</style>
</head>
<body>
<div class="box">
<h2>你好</h2>
<p class="box_base">123</p>
<div>666</div>
</div>
</body>
</html>
所展示的结果为：
元素节点.remove（） 删除自身元素
let box=document.querySelector(".box");
let box_base=document.querySelector(".box .box_base")
box_base.remove();// 删除自身元素
元素节点.replaceChild(新节点内容，旧节点内容) 替换元素的子元素节点
let dom=document.createElement("div")
dom.innerText="我爱你"
dom.style.color="red"
box.replaceChild(dom,box_base)
最后得到的结果是：
（5）注意点
延续上述例子是否可以box.innerHTML =dom？
答：不可以。因为InnerHTML是能解析字符串渲染到页面，但是并不能解析DOM元素节点对象
更多推荐
23
0- 0
已为社区贡献2条内容
所有评论(0)