JavaScript获取HTML标签元素_js根据标签名获取元素

作者：很楠不爱3 | 2024-02-18 21:09:44

踩

js根据标签名获取元素

常用方法介绍

方法名	作用
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);
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/110589