文章导航

querySelector() 方法

2018-11-8 12:07| 作者: admin| 查看: 75| 评论: 0|来自: 蚂蚁部落

JavaScript主要功能是用来操作DOM元素,查找DOM元素则是首要工作。

考虑到浏览器兼容性,过去常用的方法有如下几个:

(1).document.getElementById()一章节。

(2).document.getElementsByName()一章节。

(3).getElementsByTagName()一章节。

上述三个方法分别通过元素的id属性、name属性或者标签名称获取元素对象。

它们虽然在一定程度上能够满足查找DOM元素的需求,但是灵活度很差。

如果能有像CSS选择器一般强大的方法查询DOM元素,开发效率将会得到很大提升。

querySelector方法与querySelectorAll方法满足了上述需求。

虽然当前有一定浏览器兼容问题,但是随着软硬件的更新,它们强大的查询能力将得以展现。

文本着重介绍querySelector方法的使用,原理与querySelectorAll相同,只是获取元素的数量不同而已。

querySelector方法可以返回与选择器匹配的第一个元素。

如果没有匹配到任何元素,返回null。

语法结构:

[JavaScript] 纯文本查看 复制代码
dom.querySelector(selectors)

参数解析:

(1).selectors:必需,是一个CSS选择器字符串。

特别说明:如果要使用多个选择器,使用逗号分隔。

浏览器支持:

(1).IE8+浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).opera浏览器支持此方法。

(5).火狐浏览器支持此方法。

(6).safria浏览器支持此方法。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
ul,li { 
  list-style:none; 
} 
</style> 
<script> 
window.onload=function() { 
  let odiv=document.querySelector("#show");
  let li=document.querySelector("li");
  odiv.innerHTML=li.innerHTML; 
} 
</script> 
</head> 
<body> 
<div id="show"></div>
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
</ul>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/121015wzoi6oxy9ozf6f6k.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

虽然选择器li可以匹配5个li元素,但是querySelector方法值返回第一个匹配的li元素。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
ul,li { 
  list-style:none; 
} 
</style> 
<script> 
window.onload=function() { 
  let odiv=document.querySelector("#show");
  let li=document.querySelector(".ant");
  odiv.innerHTML=li.innerHTML; 
} 
</script> 
</head> 
<body> 
<div id="show"></div>
<ul id="box">
  <li>蚂蚁部落一</li>
  <li class="ant">蚂蚁部落二</li>
  <li class="ant">蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
</ul>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/121047y6g0mjjyaem22d4e.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

方法的参数是样式类选择器,有两个li元素具有指定的样式类。

但只会获取第一个,并将将其内容写入div中。

选择器还可以更加强大一些,看如下代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
ul,li { 
  list-style:none; 
} 
</style> 
<script> 
window.onload=function() { 
  let odiv=document.querySelector("#show");
  let li=document.querySelector("li:last-child");
  odiv.innerHTML=li.innerHTML; 
} 
</script> 
</head> 
<body> 
<div id="show"></div>
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
</ul>
</body> 
</html>

li:last-child可以匹配最后一个li元素,于是将"蚂蚁部落五"写入div中。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
ul,li { 
  list-style:none; 
} 
</style> 
<script> 
window.onload=function() { 
  let odiv=document.querySelector("#show");
  let li=document.querySelector("li[ant='abc']");
  odiv.innerHTML=li.innerHTML; 
} 
</script> 
</head> 
<body> 
<div id="show"></div>
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li ant="abc">蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
</ul>
</body> 
</html>

querySelector参数中的属性选择器,能够匹配第三个li元素,然后将其中的内容写入div。

特别说明:如果选择器中包含伪元素选择器,那么此方法不会返回任何元素。

再来看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
ul,li { 
  list-style:none; 
} 
</style> 
<script> 
window.onload=function() { 
  let odiv=document.querySelector("#show");
  let li=document.querySelector("#ant\zone");
  odiv.innerHTML=li.innerHTML; 
} 
</script> 
</head> 
<body> 
<div id="show"></div>
<ul id="box">
  <li>蚂蚁部落一</li>
  <li id="ant\zone">蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
</ul>
</body> 
</html>

上述代码并不能够将第二个li元素中的内容写入div中,原因分析如下:

(1).li元素的id属性值中带有斜杠,它在JavaScript具有转义功能,但在HTML中它就是斜杠。

(2).所以querySelector方法参数值要修改为"#ant\\zone"。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
ul,li { 
  list-style:none; 
} 
</style> 
<script> 
window.onload=function() { 
  let odiv=document.querySelector("#show");
  let obox=document.querySelector("#box");
  let li=obox.querySelector(".ant");
  odiv.innerHTML=li.innerHTML; 
} 
</script> 
</head> 
<body> 
<div id="show"></div>
<ul id="box">
  <li>蚂蚁部落一</li>
  <li class="ant">蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
</ul>
</body> 
</html>

上述代码可以将第二个li元素内容写入div中.

可见querySelector方法调用者可以是其他dom元素,没必要必须是document。

再来看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script> 
window.onload=function() { 
  let oshow=document.querySelector("#show");
  let oant=document.querySelector("#ant");
  let odiv=oant.querySelector("div div div div");
  oshow.innerHTML=odiv.innerHTML;
} 
</script> 
</head> 
<body> 
<div id="show"></div>
<div id="wrap">
  <div id="ant">
    <div></div>
    <div>
      <div>蚂蚁部落</div>
    </div>
  </div>
</div>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/121455k90505em059m15mm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

看到上面结果,肯定有不少朋友感觉很意外,"div div div div"多层嵌套的选择器怎么会匹配到最内层的div。

出现上述疑问的原因是此方法中选择器的匹配范围有误解,分析如下:

(1).方法由ant元素对象调用,误以为选择器是以ant元素限定的范围进行匹配,自然无法匹配到内层的div。

(2).其实选择器的匹配范围并不受调用元素限定,依然是整个页面,但是匹配到的元素必须受到调用元素限定。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部