JS基礎10-DOM訪問HTML方式
阿新 • • 發佈：2018-03-27
targe blog cti 成對 tab 學習 rev 標題 char
一、DOM
1.DOM是文檔對象模型（Document Object Model）的簡稱。當網頁加載時，可以將結構化文檔在內存中轉換成對象的樹。
簡單的說DOM並不是一種技術，而是一種訪問結構化文檔的一種思想。借助DOM模型，我們可以對DOM樹進行修改、刪除、新增等操作，讓結構化文檔動態化。
DOM模型中的節點——文檔可以說是由節點構成的集合。在DOM模型中有以下3種節點：
- 元素節點：各種標簽就是這些元素節點的名稱，例如<p>、<ul>等
- 文本節點：文本節點總是被包含在元素節點的內部
- 屬性節點：一般用來修飾元素節點就稱之為屬性節點。
二、DOM訪問HTML的方式
DOM主要有兩種方式來訪問HTML。
- 根據ID訪問HTML元素：通過document對象調用getElementById()方法來查找具有唯一id屬性值的元素。
-
<title>無標題文檔</title> <style> </style> <script type="text/javascript"> function show(){ var content1=document.getElementById(‘son1‘).innerText; var content2=document.getElementById(‘grandson2‘).value;var content3=document.getElementById(‘grandson3‘).value; var content4=document.getElementsByClassName(‘grandson4‘).value; alert(content1+"\n"+content2+"\n"+content3+"\n"+content4); } </script> </head> <body> <div id="oldfather"> <div id="son1"> <span>我是div塊</span> </div> <div id="son2"> <textarea name="" id="grandson2" cols="30" rows="10">好好學習，天天向上</textarea> </div> <div id="son3"> <input type="text" id="grandson3" value="上我啊"> </div> <div id="son4"> <input type="button" class="grandson4" value="訪問三個元素的內容" onClick="show()"> </div> </div> </body> </html>第一種方式 - 2.利用節點關系訪問HTML元素。常用的屬性和方法如下：
|
parentNode |
返回當前節點的父節點 |
|
previousSibling |
返回當前節點的前一個兄弟節點 |
|
nextSibling |
返回當前節點的後一個兄弟節點 |
|
childNodes |
返回當前節點的所有子節點 |
|
firstChild |
返回當前節點的第一個子節點 |
|
lastChild |
返回當前節點的最後一個子節點 |
|
getElementsByTagName(tagName) |
返回當前節點的具有指定標簽名的所有子節點 |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用節點關系查找HTML元素</title>
<style type="text/css">
/*以趙六為參照物*/
#n4{color:red}
</style>
</head>
<body>
<ul id="names">
<li id="n1">張三</li>
<li id="n2">李四</li>
<li id="n3">王五</li>
<li id="n4">趙六</li>
<li id="n5">小紅</li>
<li id="n6">小明</li>
</ul>
<input type="button" value="父節點" onClick="showContent(current.parentNode)">
<input type="button" value="第一個子節點" onClick="showContent(current.parentNode.firstChild.nextSibling)">
<input type="button" value="上一個節點" onClick="showContent(current.previousSibling.previousSibling)">
<input type="button" value="下一個節點" onClick="showContent(current.nextSibling.nextSibling)">
<input type="button" value="最後一個子節點" onClick="showContent(current.parentNode.lastChild.previousSibling)">
<input type="button" value="得到所有li的元素個數" onClick="showCount()">
<script type="text/javascript">
var current=document.getElementById("n4");
function showContent(target){
alert(target.innerHTML);
}
function showCount(){
alert(document.getElementsByTagName("li").length);
}
</script>
</body>
</html>
第二種方式
JS基礎10-DOM訪問HTML方式