0.前言
上一节我只和大家分享了DOM,但是也只是说了一些基础知识，用法还没给大家分享，今天就和大家分享一下用法：
- 获取标签(元素)节点
- 获取属性节点
- 获取文本节点
今天主要说一下获取标签（元素）节点，剩下的往后说。
1.获取标签（元素）节点
获取标签（元素）节点有种方法，接下来一一和大家分享。我用代码和大家分享，显得更加直观。
首先搭出框架：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取标签(元素)节点</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)根据id值获取元素节点
在script标签中添加下面代码:
//1、根据id值获取元素节点
var jsDivId = document.getElementById("idDiv");
console.log(jsDivId);
console.log(typeof jsDivId);
运行结果如下：
捕获.PNG
可见，通过getElementById()获取到了id为idDiv的标签节点，而且是object对象类型。
(2)根据class值获取元素节点
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]);
}
运行结果：
捕获.PNG
可见通过getElementsByClassName()获取用class命名的标签节点，得到的结果是一个数组，每一个元素代表一个div标签。
(3)根据标签名获取元素节点
var jsDivTagName = document.getElementsByTagName("div");
for (var m = 0; m < jsDivTagName.length; m++) {
console.log(jsDivTagName[m]);
}
运行结果：
捕获.PNG
这是用getElementsByTagName()获取到所有的div标签，同时返回的也是一个数组。
(4)根据name属性值获取元素节点
var jsDivsName = document.getElementsByName("inputText");
for (var n = 0; n < jsDivsName.length; n++) {
console.log(jsDivsName[n]);
}
运行结果：
捕获.PNG
可见该方法视同过getElementsByName()方法获取用name属性命名的标签。得到的也是一个数组。
2.总结
上面是最常用的四种获取标签(元素)节点的方法，希望对大家有所帮助，谢谢！！！
网友评论