31js学习第十四天DOM遍历和增删改查_dom 遍历和修改-优快云博客

本文链接：https://blog.youkuaiyun.com/liuyaoshun123456/article/details/124435629

本文详细介绍了如何使用DOM操作进行元素查找、添加、删除和替换，包括`getElementById`、`getElementsByClassName`、`firstChild`等方法，并展示了如何动态创建和插入新的HTML节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<head>
<meta charset="UTF-8">
<title>01DOM的遍历(查找)</title>
<style>
#wrap{
position: relative;
}
</style>
</head>
<body>
<h1>01DOM的遍历(查找)</h1>
<div id="wrap">
最大的盒子
<div class="box box1">
这是盒子01
<p id="text">这是段落标签</p>
<span>这是文本标签</span>
</div>
这是box1与box2之间的文本
<div class="box box2">这是盒子02</div>
<div class="box box3">这是盒子03</div>
<ul class="list">
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
</ul>
最大的盒子末尾的文本
</div>
</body>
<script>
// 01DOM的遍历(查找)

// 获取元素
var oWrap=document.getElementById("wrap");
var oBox1=document.getElementsByClassName("box1")[0];

// 父子元素间的查找
// children 返回（元素）子节点
console.log(oWrap.children);
// childNodes 返回子节点，包含文本(空)节点 text
console.log(oWrap.childNodes);

// firstElementChild 返回第一子（元素）节点
console.log(oWrap.firstElementChild);
// firstChild 返回第一个子节点（包含文本）
console.log(oWrap.firstChild);

// lastElementChild 返回最后一子（元素）节点
console.log(oWrap.lastElementChild);
// lastChild 返回最后一个子节点（包含文本）
console.log(oWrap.lastChild);

// parentNode 返回父级节点
console.log(oBox1.parentNode);
// parentElement 返回父级（元素）节点
console.log(oBox1.parentElement);

// offsetParent 相对关系返回第一个由定位属性的祖先元素如果没有返回body
console.log(oBox1.offsetParent);

// 链式操作
console.log(oWrap.firstElementChild.firstElementChild);

// 兄弟元素同胞元素
// nextElementSibling 返回下一个兄弟元素节点
console.log(oBox1.nextElementSibling);
// nextSibling 返回下一个兄弟节点包含文本
console.log(oBox1.nextSibling);

// previousElementSibling 返回上一个兄弟元素节点
console.log(oBox1.previousElementSibling);
// previousSibling 返回上一个兄弟节点包含文本
console.log(oBox1.previousSibling);

var oText=document.getElementById("text");
console.log(oText.parentElement.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild);

</script>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>02DOM节点的增删改查</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
padding: 30px;
background: pink;
}
p{
color: #fff;
font-size: 35px;
}
.text1{
background: red;
}
.text2{
background: yellow;
}
.text3{
background: blue;
}
.text4{
background: green;
}
</style>
</head>

<body>
<h1>02DOM节点的增删改查</h1>
<div id="box">
<p class="text1">这是段落标签01</p>
<p class="text2">这是段落标签02</p>
<p class="text3">这是段落标签03</p>
<p class="text4">这是段落标签04</p>
</div>
</body>
<script>
// 02DOM节点的增删改查

// 获取元素
var oBox=document.getElementById("box");
var aParas=document.getElementsByTagName('p');

// 增添加节点
// 创建节点 createElement("标签/元素节点名")
var newP1=document.createElement("P");
newP1.innerText="这是新创建的段落标签05";
newP1.style.background="skyblue";
var newP2=document.createElement("P");
newP2.innerText="这是新创建的段落标签06";
newP2.style.background="orange";
var newP3=document.createElement("P");
newP3.innerText="这是新创建的段落标签07";
newP3.style.background="purple";

// appendChild() 向父元素的子节点末尾添加元素追加
// oBox.appendChild(newP1);
// oBox.appendChild(newP2);
// oBox.appendChild(newP3);

// insertBefore(添加的节点,参考的兄弟元素)
// oBox.insertBefore(newP1,aParas[1]);

// 删移除节点 removeChild(要移除的元素)
// oBox.removeChild(aParas[3]);

// 改替换元素 replaceChild(新元素,旧元素)
// oBox.replaceChild(newP1,aParas[1]);

</script>

</html>