標籤：set ... ram asc input script title 子節點 一個
注意:
1、好像只有在IE瀏覽器中才不會計算節點與節點之間的空格
2、document屬於window，所以document可以寫成window.document，window是可以省略的
知識點:
1、parentNode: 擷取指定節點的父節點
2、previousSibling: 返回某個節點緊跟的前一個節點(要處於同一樹層級中)
nextSibling: 返回某個節點緊跟的後一個節點(要處於同一樹層級中)3、firstChild: 訪問子節點的第一項
lastChild: 訪問子節點的最後項
實現:
1、通過id=divs改變第一個大div的顏色
2、通過id=divs改變第二個大div的顏色
3、通過id=divs改變p標籤的背景顏色
代碼如下:
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>DOM案例</title> <script type="text/javascript"> function onClicks(){ var divChild = window.document.getElementById("divs"); // 1. 通過id=divs改變第一個大div的顏色 // divChild.parentNode.style.background="yellow"; // 2. 通過id=divs改變第二個大div的顏色（因為這裡不會忽略空格,所以需要兩次nextSibling） //divChild.parentNode.nextSibling.nextSibling.style.background="yellow"; // 3. 通過id=divs改變 <p> 標籤的背景顏色(因為有空格，所以...) divChild.parentNode.firstChild.nextSibling.style.background="blue"; } </script> </head> <body> <div> <p>段落</p> <!-- 換行，段前段末都有空行 --> <div id="divs">這是div的內容</div> <a>連結</a> </div> <div> abcdefge </div> <input type="button" value="點擊操作" onclick="onClicks()"/> </body></html>
js - 1、DOM操作練習
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
