JS获取元素的四个方法

一、通过ID名获取元素

• 语法

var element = document.getElementById(id);

• 参数
  element是一个Element对象。如果当前文档中拥有特定ID的元素不存在则返回null.
  id是大小写敏感的字符串，代表了所要查找的元素的唯一ID

• 返回值
  返回一个匹配到的ID的DOM Element对象。若在当前Document下没有找到，则返回null。

• 示例

<!--以下示例都为这个html结构 -->
<ul class="box" id="box">
    <li name="active"></li>
    <li class="show"></li>
    <li name="active"></li>
    <li></li>
</ul>
<input type="text" name="user">
<input type="text" name="user">
<input type="text" name="user">

var oBox = document.getElementById("box");
console.log(oBox); //返回整个ul及后代li的所有子元素

以上示例返回值 效果图

二、通过class类名获取元素

• 语法

var element = document.getElementsByClassName(name);

• 参数
  element是一个即时更新的（live）HTMLCollection
element是文档中的任一Element。
  name是标签的class类名。

• 返回值
  返回拥有指定 class 名称的 document 根节点的后代元素。

• 示例

//通过类名获取元素 IE9及以上
var oClassBox = document.getElementsByClassName("show");
console.log("这打印的是类名为box的结果",oClassBox);

var oClassLi = document.getElementsByClassName("box");
console.log("这打印的是类名为show的结果",oClassLi);

以上示例返回值 效果图

三、通过元素标签获取元素

该方法返回一个动态的包含所有指定标签名的元素的HTML集合HTMLCollection。获取的是一个集合，拥有length长度。要么在获取的时候添加下标，代表获取某一个。要么在使用的时候添加下标，代表使用哪一个

• 语法

var element = document.getElementsByTagName(tagName);

• 参数
  element 搜索到的元素的动态HTML集合HTMLCollection。它们的顺序是在子树中出现的顺序。 如果没有搜索到元素则这个集合为空。
  tagName 要查找的限定名。 字符 "*" 代表所有元素。 考虑到兼容XHTML，应该使用小写。

• 示例

var tagUl = document.getElementsByTagName("ul");
console.log("这打印的是标签名为ul的结果",tagUl);

//标签名获取的元素一定是一个复数,在获取的时候添加下标
console.log("这打印的是获取结果需要添加下标",tagUl[0]);

var tagLi = document.getElementsByTagName("li");
console.log("这打印的是标签名为li的结果",tagLi);
console.log("这打印的是选取列表一的标签",tagLi[0]); //选择列表一标签
console.log("这打印的是选取列表二的标签",tagLi[1]); //选择列表二标签

以上示例返回值 效果图

四、通过Name属性值获取元素

该方法在IE9及IE9以下，是不能通过Name属性获取非表单元素的

• 语法

var elements = document.getElementsByName(name) ;

• 参数
  elements 是一个实时更新的 NodeList集合。
  name 是元素的 name 属性的值。

• 示例

//在IE9及IE9以下，是不能通过Name属性获取非表单元素的，可自行尝试
var oInputName = document.getElementsByName("user");
console.log("这打印的是通过name属性获取表单元素",oInputName);

var oLiName = document.getElementsByName("active");
console.log("这打印的是通过name属性获取非表单元素",oLiName);

以上示例返回值 效果图