全国服务热线:4008-888-888

行业新闻

小程序logo设计_js querySelector() 使用方法

js querySelector() 使用方法     投稿:mdxy-dxy   querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代

querySelector 定义和用法

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

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

语法
document.querySelector(CSS selectors)

String 必须。指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。

对于多个选择器,使用逗号隔开,返回一个匹配的元素。

返回值: 匹配指定 CSS 选择器的第一个元素。 如果没有找到,返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。
function myFunction() { document.querySelector(".example").style.backgroundColor = "red"; /script

3、获取文档中 的第一个 p 元素:

 h2 的标题 /h2 
 p 的段落。 /p 
 p 点击按钮为第一个带有 的 p 元素添加背景颜色。 /p 
 button 点我 /button 
 script 
function myFunction() {
 document.querySelector("p.example").style.backgroundColor = "red";
 /script 

4、获取文档中有 "target" 属性的第一个 a 元素:

 !DOCTYPE html 
 html 
 head 
 meta charset="utf-8" 
 title 凡科 /title 
 style 
a[target] {
 background-color: yellow;
 /style 
 /head 
 body 
 p CSS 选择器 a[target] 确保所有有 target 属性的链接背景颜色为黄色: /p 
 a href="//"  /a 
 a href="//" target="_blank"  /a 
 a href="//" target="_top"  /a 
 p 点击按钮为带有 target 属性的链接添加红色背景。 /p 
 button 点我 /button 
 script 
function myFunction() {
 document.querySelector("a[target]").style.border = "10px solid red";
 /script 
 /body 
 /html 

5、以下实例演示了多个选择器的使用方法。
假定你选择了两个选择器: h2 和 h3 元素。
以下代码将为文档的第一个 h2 元素添加背景颜色:

 h2 h2 元素 /h2 
 h3 h3 元素 /h3 
 script 
document.querySelector("h2,h3").style.backgroundColor = "red";
 /script 

6、但是,如果文档中 h3 元素位于 h2 元素之前, h3 元素将会被设置指定的背景颜色。

 h3 h3 元素 /h3 
 h2 h2 元素 /h2 
 script 
document.querySelector("h2, h3").style.backgroundColor = "red";
 /script 

7、通过获取select的内容实现网址跳转

 select id="language-picker" 
 option value="cs" esky /option 
 option value="en" English /option 
 option value="es" Espa ol /option 
 option value="fr" Fran ais /option 
 option value="jp" 日本語 /option 
 option value="pl" Polski /option 
 option value="pt" Português /option 
 option value="zh" selected 中国的 /option 
 /select 
 script 
 var lang = document.querySelector('#language-picker');
 lang.addEventListener('change', function(e) {
 if (e.target.value === 'en') {
 window.location = '/';
 } else {
 window.location = '/' + e.target.value;
 /script 

凡科小编提醒:因为ie8以上版本才支持querySelector,请大家酌情使用。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服