位置: 编程技术 - 正文
推荐整理分享js querySelector() 使用方法,希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!
querySelector 定义和用法
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。
语法document.querySelector(CSS selectors)
参数值参数 类型 描述 CSS 选择器 String 必须。指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。 对于多个选择器,使用逗号隔开,返回一个匹配的元素。
技术细节
DOM 版本: Selectors Level 1 Document Object 返回值: 匹配指定 CSS 选择器的第一个元素。 如果没有找到,返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。
实例
获取文档中 id="demo" 的第一个元素:
更多实例
1、获取文档中第一个 <p> 元素:
2、获取文档中 class="example" 的第一个元素:
3、获取文档中 class="example" 的第一个 <p> 元素:
4、获取文档中有 "target" 属性的第一个 <a> 元素:
5、以下实例演示了多个选择器的使用方法。假定你选择了两个选择器: <h2> 和 <h3> 元素。以下代码将为文档的第一个 <h2> 元素添加背景颜色:
6、但是,如果文档中 <h3> 元素位于 <h2> 元素之前,<h3> 元素将会被设置指定的背景颜色。
7、通过获取select的内容实现网址跳转
积木网小编提醒:因为ie8以上版本才支持querySelector,请大家酌情使用。
原生的强大DOM选择器querySelector介绍 在传统的JavaScript开发中,查找DOM往往是开发人员遇到的第一个头疼的问题,原生的JavaScript所提供的DOM选择方法并不多,仅仅局限于通过tag,name,id等方式
关于javascript事件响应的基础语法总结(必看篇) 1、onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件。同时onclick事件调用的程序块就会被执行,通常与按钮一起使用//例子htmlheadscripttype
javascript prototype原型详解(比较基础) javascript的prototype原型简单介绍:prototype原型是javascript中特别重要的概念,属于必须要掌握,如果没有良好的掌握的话,进一步用好或者学好js基本是不可
上一篇:JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)(javascript如何输出变量)
下一篇:关于javascript事件响应的基础语法总结(必看篇)
友情链接: 武汉网站建设