JavaScript中获取节点——获取标签(元素)节点

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.总结

  上面是最常用的四种获取标签(元素)节点的方法，希望对大家有所帮助，谢谢！！！

posted @ 2017-01-11 15:32  天涯海角路  阅读(19389)  评论(0)    收藏  举报