DOM對HTML元素的兩種訪問操作
阿新 • • 發佈：2019-01-04
1.通過ID訪問，即document.getElementById();
id具有唯一性
例如如下程式碼：
<!DOCTYPE html> <html> <head> <title>使用getElementById方法查詢元素</title> <script type="text/javascript"> function showContent(){ var myDiv,textName,btn_show; with(document){ myDiv=getElementById("myDiv"); textName=getElementById("textName"); btn_show=getElementById("btn_show"); } alert(myDiv.innerHTML+"\n"+textName.value+"\n"+btn_show.value); } </script> </head> <body> <div id="myDiv">我的div塊</div> <textarea id="content" rows="2",cols="16">秋水共長天一色</textarea><br/> <input type="text" id="textName" value="Daisy"><br/> <input type="button" id="btn_show" value="輸出以上三個元素的內容" onclick="showContent()"/> <!--onclick給按鈕繫結一個事件--> </body> </html>
2.利用節點關係訪問HTML元素
常用的屬性及方法如下所示:
| parentNode | 返回當前節點的父節點 |
| previousSibling | 返回當前節點的前一個兄弟節點 |
| nextSibling | 返回當前節點的後一個兄弟節點 |
| childNodes | 返回當前節點的所有子節點 |
| firstChild | 返回當前節點的第一個子節點 |
| lastChild | 返回當前節點最後一個子節點 |
| getElementByTagName(tagName) | 返回當前節點的指定節點的所有子節點 |
示例如下：
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #a4{color: pink;} </style> </head> <body> <ul id="names"> <li id="a1">可愛的</li> <li id="a2">樂觀的</li> <li id="a3">自信的</li> <li id="a4">堅強的</li> <li id="a5">努力的</li> <li id="a6">認真的</li> </ul> <input type="button" value="父節點" onclick="showContent(rr.parentNode)"/> <input type="button" value="第一個子節點" onclick="showContent(rr.parentNode.firstChild.nextSibling)"/> <input type="button" value="上一個節點" onclick="showContent(rr.previousSibling.previousSibling)"/> <input type="button" value="下一個節點" onclick="showContent(rr.nextSibling.nextSibling)"/> <input type="button" value="最後一個子節點" onclick="showContent(rr.parentNode.lastChild.previousSibling)"/> <input type="button" value="得到所有的li元素的個數" onclick="showCount()"/> <!--js是一種弱型別語言，從上而下執行，這段程式碼要放在要操作的html內容下面--> <script type="text/javascript"> var rr=document.getElementById("a4"); function showContent(target){ alert(target.innerHTML); } function showCount(){ alert(document.getElementsByTagName("li").length); } </script> </body> </html>