案例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的下一个兄弟元素divvar 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属性修改元素内容
这些基础操作是前端开发的重要基石，掌握它们可以实现各种交互效果和动态页面功能。在实际开发中，可以根据需求灵活组合这些技术，创造出更丰富的用户体验。
