JavaScript获取HTML标签元素

常用方法介绍

方法名	作用
getElementById()	返回对拥有指定 id 的第一个对象的引用,返回值 Element。
getElementsByName()	返回带有指定名称的对象集合。返回值 NodeList/HTMLCollection。
getElementsByTagName()	返回带有指定标签名的对象集合。返回值 NodeList/HTMLCollection。
getElementsByClassName()	返回所有指定类名的对象集合。返回值 NodeList/HTMLCollection。
querySelector()	返回文档中匹配指定 CSS 选择器的一个元素。
querySelectorAll()	返回文档中匹配指定 CSS 选择器的所有元素。

1.1 根据id获取元素

getElementsByName()方法：

元素name属性表示一个元素节点的名字，在同一个网页上，该属性并不要求唯一性，相同的name可以出现在多个标签上。

getElementsByName()方法可以获取相同名称(name)的元素，返回一个元素节点列表。

可以通过下标来访问列表里面的元素。

document.getElementsByName('goods') //获取属性name的值为goods的所有元素

document.getElementsByName('goods')[0]//获取属性name的值为goods的第一个元素

document.getElementsByName('goods')[1]//获取属性name的值为goods的第二个元素

// 根据所有的爱好复选框
var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
console.log(input);
}

1.2 根据标签名获取元素

getElementsByTagName()方法：

getElementsByTagName()方法将返回一个元素节点对象，这个对象保存着所有相同元素名的节点列表。

document.getElementsByTagName('*'); //获取所有元素

document.getElementsByTagName('li'); //获取所有li 元素

document.getElementsByTagName('li')[0]; //获取第一个li元素

document.getElementsByTagName('li').length; //获取所有li元素的数目

// 获取所有div元素
var divs = document.getElementsByTagName('div');
// 遍历
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
console.log(div);
}

注：NodeList不仅可以通过下标访问指定标签元素，还可以通过length属性来查询列表节点数量。

重点: 该方法不仅可以通过document对象调用，还可以通过元素节点Element来访问。

1.3 根据类名获取元素

getElementsByClassName()方法：

getElementsByClassName()方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。

参数为String，需要获取的元素类名，多个类名使用空格分隔。

示范代码1:

//获取包含 "example" 和 "color" 类名的所有元素:
var x = document.getElementsByClassName("example color");

示范代码2:

//查看文档中有多少个样式class="example"的元素(使用 NodeList 对的 length 属性):
var x = document.getElementsByClassName("example").length;

1.4 根据选择器获取元素

querySelector()方法返回文档中匹配指定 CSS 选择器的一个元素。

注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

1.5 封装函数获取元素

function my$(id) {
return document.getElementById(id);
}