当前位置：首页 > news >正文

【前端教程】JavaScript DOM 操作实战案例详解

news 2025/9/6 15:02:49

案例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>