0.前言
上一節(jié)我只和大家分享了DOM,但是也只是說了一些基礎(chǔ)知識，用法還沒給大家分享，今天就和大家分享一下用法：
- 獲取標(biāo)簽(元素)節(jié)點(diǎn)
- 獲取屬性節(jié)點(diǎn)
- 獲取文本節(jié)點(diǎn)
今天主要說一下獲取標(biāo)簽（元素）節(jié)點(diǎn)，剩下的往后說。
1.獲取標(biāo)簽（元素）節(jié)點(diǎn)
??獲取標(biāo)簽（元素）節(jié)點(diǎn)有種方法，接下來一一和大家分享。我用代碼和大家分享，顯得更加直觀。
首先搭出框架：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取標(biāo)簽(元素)節(jié)點(diǎn)</title>
</head>
<body>
<div id="idDiv"></div>
<div class="classDiv"></div>
<div class="classDiv"></div>
<div class="classDiv"></div>
<div class="classDiv"></div>
<input type="text" name="inputText">
<input type="text" name="inputText">
<input type="text" name="inputText">
<script type="text/javascript">
</script>
</body>
</html>
(1)根據(jù)id值獲取元素節(jié)點(diǎn)
在script標(biāo)簽中添加下面代碼:
//1、根據(jù)id值獲取元素節(jié)點(diǎn)
var jsDivId = document.getElementById("idDiv");
console.log(jsDivId);
console.log(typeof jsDivId);
運(yùn)行結(jié)果如下：
捕獲.PNG
可見，通過getElementById()獲取到了id為idDiv的標(biāo)簽節(jié)點(diǎn)，而且是object對象類型。
(2)根據(jù)class值獲取元素節(jié)點(diǎn)
var jsDivsClass = document.getElementsByClassName("classDiv");
for (var i in jsDivsClass) {
console.log(jsDivsClass[i]);
}
for (var j = 0; j < jsDivsClass.length; j++) {
console.log(jsDivsClass[j]);
}
運(yùn)行結(jié)果：
捕獲.PNG
可見通過getElementsByClassName()獲取用class命名的標(biāo)簽節(jié)點(diǎn)，得到的結(jié)果是一個(gè)數(shù)組，每一個(gè)元素代表一個(gè)div標(biāo)簽。
(3)根據(jù)標(biāo)簽名獲取元素節(jié)點(diǎn)
var jsDivTagName = document.getElementsByTagName("div");
for (var m = 0; m < jsDivTagName.length; m++) {
console.log(jsDivTagName[m]);
}
運(yùn)行結(jié)果：
捕獲.PNG
這是用getElementsByTagName()獲取到所有的div標(biāo)簽，同時(shí)返回的也是一個(gè)數(shù)組。
(4)根據(jù)name屬性值獲取元素節(jié)點(diǎn)
var jsDivsName = document.getElementsByName("inputText");
for (var n = 0; n < jsDivsName.length; n++) {
console.log(jsDivsName[n]);
}
運(yùn)行結(jié)果：
捕獲.PNG
可見該方法視同過getElementsByName()方法獲取用name屬性命名的標(biāo)簽。得到的也是一個(gè)數(shù)組。
2.總結(jié)
??上面是最常用的四種獲取標(biāo)簽(元素)節(jié)點(diǎn)的方法，希望對大家有所幫助，謝謝！！！
