節點分爲:元素節點、文本節點和屬性節點等。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.4 節點</title>
</head>
<body>
<h1>what to buy</h1>
<p title="a genele reminder">don't forgrt to buy this stuff</p>
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">cheese</li>
<li class="sale important">milk</li>
</ul>
</body>
</html>
- 標籤的名字就是元素的名字,即元素節點可以理解爲html中的標籤。
- 在上面的代碼中,p標籤包含的內容是“don’t forgrt to buy this stuff”,這就是一個文本節點,即元素節點之間的文本。
- 屬性節點用來對元素做出更具體的描述,如代碼中title=”a genele reminder”就是一個屬性節點,即html標籤中的屬性值。
獲取元素
有三種DOM方法可以獲取元素節點,分別是通過元素ID、通過標籤名和通過類名來獲取。
1.getElementById |
方法返回一個與那個給定id屬性值的元素節點對應的對象。
例如下面的代碼:
<script type="text/javascript">
var oUl = document.getElementById("purchases");
console.log(oUl);
</script>
輸出的結果是:
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">cheese</li>
<li class="sale important">milk</li>
</ul>
2.getElementsByTagName |
該方法返回的是一個對象數組
<script type="text/javascript">
var oLi = document.getElementsByTagName("li");
console.log(oLi);
</script>
輸出的結果是:
獲取元素的個數:
var length = document.getElementsByTagName("li").length; //3
上面的代碼有多少個元素節點:
console.log(document.getElementsByTagName("*").length); //12
3.getElementsByClassName |
返回類型與getElementsByTagName相似,返回一個具有相同類名的元素的數組。
<script type="text/javascript">
var cheese = document.getElementsByClassName("sale");
console.log(cheese);
</script>
輸出結果:
由於低版本的ie瀏覽器不支持getElementsByClassName方法,可用以下函數來代替:
<script type="text/javascript">
function getElementsByClassName(node, classname) {
if (node.getElementsByClassName) {
return node.getElementsByClassName(classname);
} else {
var results = new Array;
var tag = node.getElementsByTagName("*");
for (var i = 0; i < tag.length; i++) {
if (tag[i].className.indexOf(classname) != -1) {
results[results.length] = tag[i];
}
}
return results;
}
}
var oUl = document.getElementById("ul");
var oLi = getElementsByClassName(oUl, "sale");
console.log(oLi);
</script>
兩個參數:node表示DOM樹中的搜索起點,即上下文;classname就是要搜索的類名
一份文檔就是一顆節點樹。
每個節點都是一個對象。