案例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屬性修改元素內容
這些基礎操作是前端開發的重要基石，掌握它們可以實現各種交互效果和動態頁面功能。在實際開發中，可以根據需求靈活組合這些技術，創造出更豐富的用戶體驗。
