JS获取HTML DOM元素的方法

原生JS中获取HTML DOM元素的方法有8种。

• 通过ID获取（getElementById）

• 通过name属性（getElementsByName）

• 通过标签名（getElementsByTagName）

• 通过类名（getElementsByClassName）

• 通过选择器获取一个元素（querySelector）

• 通过选择器获取一组元素（querySelectorAll）

• 获取html的方法（document.documentElement） document.documentElement是专门获取html这个标签的

• 获取body的方法（document.body） document.body是专门获取body这个标签的。

<div class="div0">1</div>
    <div id="diva">
      <div></div>
      <div class="div0">2</div>
      <div></div>
      <div class="div0"></div>
      <div id="div1"></div>
    </div>
    <form id="form1">
        <!-- 所有的表单都必须写name -->
        <input type="text" name="names">
        <input type="password" name="password">
        <input type="radio" name="sex" value="男">
        <input type="radio" name="sex" value="女">
        <input type="submit">
    </form>
    <form id="form2">
        <!-- 所有的表单都必须写name -->
        <input type="text" name="names">
        <input type="password" name="password">
        <input type="radio" name="sex" value="男">
        <input type="radio" name="sex" value="女">
        <input type="submit">
    </form>

1、通过ID获取

var div1 = document.getElementById("div1");

获取id必须使用document调用getElementById。

必须传参数，参数是string类型，是获取元素的id。

返回值只获取到一个元素，没有找到返回null。

2、通过name属性

根据name获取节点列表

var form1=document.getElementById("form1");
var sexs=document.getElementsByName("sex");

getElementsByName 不可以通过父元素获取 var sexs=form1.getElementsByName("sex");//错误

3、通过标签名

var divs = document.getElementsByTagName("div");

getElementsByTagName这个方法除了可以使用document以外，还可以使用元素调用， 如果使用元素调用，就是指当前这个元素的子元素中的标签名是div的

var divs=diva.getElementsByTagName("div");
var divs=document.getElementsByTagName("div");

4、通过类名

var div0 = document.getElementsByClassName("div0");

可以根据元素获取子元素中class是div0的所有元素 如果使用document.getElementsByClassName就是获取整个文档中class是div0

5、通过选择器获取一个元素 根据选择器获取到第一个找到的元素

var div=document.querySelector("div");

6、通过选择器获取一组元素 根据选择器获取到所有的元素

var div=document.querySelectorAll("div");

querySelector、querySelectorAll仅用于IE8以后