JavaScript中querySelector()获取HTML元素的方法介绍
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript中querySelector()获取HTML元素的方法介绍，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2444字，纯文字阅读大概需要4分钟。
内容图文
QuerySelector()是一种可以从JavaScript 检测和获取任意HTML元素的方法，虽然JavaScript从开始就有可以获得HTML元素的getElemenById()和getElemetnsByClasNamo()等方法，但是，如果使用querySelector()，则可以在jQuery意义上有选择地指定HTML元素，而无需了解id属性值，class属性值等。
简而言之，就是可以使用querySelector()检索任何HTML元素。
我们先来看一下querySelector()的基本语法
通常将在目标范围上执行querySelector()。
document.querySelector( CSS选择器 )
在这种情况下将对整个document执行querySelector()。可以通过为参数指定类似jQuery的CSS选择器来获取任意HTML元素。
需要注意的是，程序在获取第一个匹配的HTML元素时就会结束。
也就是说，如果要获取多个元素就需要来创建一个循环过程，或者使用我们将在后面会说到的querySelectorAll().
我们继续来看如何使用querySelector()？
获取具有ID和Class属性的HTML元素
示例如下
HTML
<h1 class="sample">标题示例</h1> <p id="test">内容示例</p>
JavaScript
var elem1 = document.querySelector('.sample');
var elem2 = document.querySelector('#test');
console.log(elem1);
console.log(elem2);运行结果如下
可以看到querySelector()的每个参数都指定了一个CSS选择器。
由此，同样的querySelector()也可以根据参数的指定方法取得任意的HTML要素。
从执行结果中可以看出元素已被获取。
下面我们就来看querySelectorAll()的使用方法
querySelectorAll()可以获取多个HTML元素。
我们先来看一下它的基本语法
document.querySelectorAll(CSS选择器)
这样，指定参数的方法和目标的范围与querySelector()相同。
最大的区别是你可以获得所有匹配的HTML元素！
由于queryselector()只能检索第一个匹配的元素，所以我们获取多个元素就可以使用querySelectorAll()。
我们来看具体的示例
HTML代码
<ul> <li class="list">列表１</li> <li class="list">列表２</li> <li class="list">列表３</li> </ul>
在该示例中，排列了多个列表元素。
要检索所有此列表元素，可以执行以下操作
JavaScript
var elem = document.querySelectorAll('.list');
console.log(elem);在此示例中，类属性值“list”被指定为querySelectorAll()的参数。
这将指定所有列表元素，因此可以获得所有列表项。
当然，你可以按原样设置“li”元素，但是要注意与其他列表元素的平衡。
querySelectorAll()获取的元素称为NodeList，存储类似于数组的数据结构。
下面我们使用'forEach'一次处理一个元素，它可以有效地重复处理数组。
var elem = document.querySelectorAll('.list');
elem.forEach(function(value) {
console.log(value);
})运行结果如下
在此示例中，使用querySelectorAll()获得的结果由forEach语句循环。
通过指定参数“value”，可以像上述结果一样获得每个HTML元素。
注意：可以对使用querySelectorAll()获取的HTML元素执行任意的处理！
以上就是JavaScript中querySelector()获取HTML元素的方法介绍的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的JavaScript中querySelector()获取HTML元素的方法介绍全部内容，希望文章能够帮你解决JavaScript中querySelector()获取HTML元素的方法介绍所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。