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é)果是一個數(shù)組晴氨，每一個元素代表一個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ù)組籽前。
(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)簽。得到的也是一個數(shù)組敷钾。
2.總結(jié)
??上面是最常用的四種獲取標(biāo)簽(元素)節(jié)點(diǎn)的方法枝哄，希望對大家有所幫助，謝謝Ｗ杌摹Ｄ幼丁！
