案例1：操作div子节点并修改样式与内容
功能说明
获取div下的所有子节点，设置它们的背景颜色为红色；如果是p标签，将其内容设置为"我爱中国"。
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
a{text-decoration: none;}
</style>
<script>
window.onload=function(){
// 用getElementsByTagName标签选择器获取div下的所有的元素节点
var ziJieDianDivShuZu = document.getElementsByTagName("div")[0].children;
// 用for of遍历元素节点，用.style.backgroundColor将每个节点的背景颜色修改为红色
for(var i of ziJieDianDivShuZu){
i.style.backgroundColor="red";
}
// 标签选择器可以获取div下的所有的标签，所以用标签选择器去获取div下的所有的p标签
var jieDianPShuZu=document.getElementsByTagName("div")[0].getElementsByTagName("p");
// 遍历得到的p数组，让每个p内容修改为我爱中国
for(var i of jieDianPShuZu){
i.innerHTML="我爱中国";
}
}
</script>
</head>
<body>
<div>
<img src="./img/1.jpg" width="100px" height="100px">
<a href="#">a href诗书画唱超链接</a>
<p>P点赞</p>
<ul>
<li>li投币</li>
</ul>
<p>p大家好</p>
</div>
</body>
</html>
关键技术点解析
- 使用
getElementsByTagName("div")[0]获取页面中第一个div元素 - 通过
children属性获取div的所有子元素节点 - 使用
for of循环遍历子节点，通过style.backgroundColor设置背景颜色 - 针对p标签，使用
getElementsByTagName("p")单独获取，再通过innerHTML修改内容
案例2：UL列表隔行换色效果
功能说明
获取ul下的所有子节点，实现鼠标移入时li元素的背景颜色隔行换色效果。
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
ul{
list-style: none;
width: 666px;
height: 23px;
margin: 0px auto;
text-align: center;
}
ul li{
float: left;
width:100px ;
background-color: yellow;
}
ul li a{
text-decoration: none;
}
</style>
<script>
window.onload=function(){
// 用标签选择器把ul等标签看作重上到下排序的数组，获取ul的下标为0的第一个的内容
var ulFirstNeiRong=document.getElementsByTagName("ul")[0];
// 分别获取奇数和偶数项的li元素
var jiShuZu=ulFirstNeiRong.getElementsByClassName("jiID");
var ouShuZu=ulFirstNeiRong.getElementsByClassName("ouID");
// 为奇数项添加鼠标事件
for(var i of jiShuZu){
i.onmouseover=function(){
this.style.backgroundColor="red";
}
i.onmouseout=function(){
this.style.backgroundColor="yellow";
}
}
// 为偶数项添加鼠标事件
for(var i of ouShuZu){
i.onmouseover=function(){
this.style.backgroundColor="green";
}
i.onmouseout=function(){
this.style.backgroundColor="yellow";
}
}
}
</script>
</head>
<body>
<ul>
<!--jiID:奇ID，ouID:偶ID-->
<li class="jiID"><a href="#">诗书画唱</a></li>
<li class="ouID"><a href="#"> UP主</a></li>
<li class="jiID"><a href="#">三连</a></li>
<li class="ouID"><a href="#">关注</a></li>
</ul>
</body>
</html>
关键技术点解析
- 使用
getElementsByClassName按类名获取不同的li元素 - 为元素添加
onmouseover和onmouseout事件实现鼠标悬停效果 - 通过
this关键字引用当前触发事件的元素 - 使用CSS float属性实现水平菜单布局
案例3：节点类型统计
功能说明
制作一级菜单，当鼠标移动到ul上时，在div中显示ul包含的子节点、元素节点、属性节点和文本节点的数量。
方法一实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
ul {
list-style: none;
width: 666px;
height: 23px;
margin: 0px auto;
text-align: center;
}
ul li {
float: left;
width: 100px;
background-color: yellow;
}
ul li a {
text-decoration: none;
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
margin: 0px auto;
}
</style>
<script>
window.onload = function() {
// 获取第一个ul元素
var ulFirstNeiRong = document.getElementsByTagName("ul")[0];
// 获取ul的下一个兄弟元素div
var divAllNeiRong = ulFirstNeiRong.nextElementSibling;
// 为ul添加鼠标移入事件
ulFirstNeiRong.onmouseover = function() {
// 子节点总数
var ziJieDanShuZuZongChangDu = ulFirstNeiRong.childNodes.length;
// 元素节点总数
var yuanSuJieDianShuZuZongChangDu = ulFirstNeiRong.children.length;
// 属性节点总数
var shuXingJieDianShuZuZongChangDu = ulFirstNeiRong.attributes.length;
// 统计文本节点数量
var wenBenJieDianShuZuZongChangDu = 0;
var allJieDianShuZu = ulFirstNeiRong.childNodes;
for(var i of allJieDianShuZu) {
// 节点类型为3表示是文本节点
if(i.nodeType == 3) {
wenBenJieDianShuZuZongChangDu++;
}
}
// 在div中显示统计结果
divAllNeiRong.innerHTML = "子节点" + ziJieDanShuZuZongChangDu
+ "个<br>元素节点" + yuanSuJieDianShuZuZongChangDu +
"个<br>属性节点" + shuXingJieDianShuZuZongChangDu + "个<br>文本节点"
+ wenBenJieDianShuZuZongChangDu + "个";
}
}
</script>
</head>
<body>
<ul>
<li>
<a href="#">诗书画唱</a>
</li>
<li>
<a href="#">UP主</a>
</li>
<li>
<a href="#">三连</a>
</li>
<li>
<a href="#">关注</a>
</li>
</ul>
<div></div>
</body>
</html>
关键技术点解析
childNodes属性获取所有类型的子节点（包括文本节点、元素节点等）children属性只获取元素类型的子节点attributes属性获取元素的所有属性节点nodeType属性判断节点类型（3表示文本节点）nextElementSibling获取下一个兄弟元素
案例4：图片轮播效果
功能说明
实现图片自动轮播效果，鼠标移入时停止轮播，鼠标移出时继续轮播。
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
// 页面加载完成后执行
window.onload=function(){
// 图片路径数组
window.imgShuZu = ["./img/1.jpg", "./img/2.jpg", "./img/3.jpg"];
// 控制图片的索引下标
window.indexXiaBiao = 0;
// 获取img元素
window.img = document.getElementsByTagName("img")[0];
// 定时器变量
window.start = null;
// 鼠标移入时停止轮播
window.img.onmouseover = function() {
clearInterval(window.start);
}
// 鼠标移出时继续轮播
window.img.onmouseout = function() {
// 每666毫秒执行一次gaiBianFunction函数
window.start = setInterval(gaiBianFunction, 666);
}
}
// 切换图片的函数
function gaiBianFunction() {
// 控制索引下标，实现循环效果
if (window.indexXiaBiao <= 2) {
indexXiaBiao++;
}
if (window.indexXiaBiao > 2) {
indexXiaBiao = 0;
}
// 切换图片
window.img.src = window.imgShuZu[window.indexXiaBiao];
}
</script>
</head>
<body>
<img src="./img/1.jpg" width="666px" height="666px" />
</body>
</html>
关键技术点解析
- 使用
setInterval创建定时器实现自动轮播 - 使用
clearInterval清除定时器实现停止轮播 - 通过控制数组索引实现图片循环切换
- 全局变量存储图片路径、当前索引和定时器ID
- 鼠标事件
onmouseover和onmouseout控制轮播状态
总结
以上四个案例涵盖了DOM操作的核心知识点：
- 元素获取：
getElementsByTagName、getElementsByClassName等 - 节点操作：
childNodes、children、attributes等属性 - 样式修改：通过
style属性修改元素样式 - 事件处理：鼠标事件、定时器事件等
- 内容修改：
innerHTML属性修改元素内容
这些基础操作是前端开发的重要基石，掌握它们可以实现各种交互效果和动态页面功能。在实际开发中，可以根据需求灵活组合这些技术，创造出更丰富的用户体验。