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.总结
上面是最常用的四种获取标签(元素)节点的方法，希望对大家有所帮助，谢谢！！！