Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

浏览器自带的元素选择器

  从IE8开始就支持了Selectors API,一直没被重视是因为IE6这个幽灵迟迟无法消散。终于目前国内的IE6已经渐渐退出市场,取而代之的是IE8和其它现代浏览器。所以很多之前不流行的东西也可以流行起来。
  浏览器自带的元素选择器是querySelector和querySelectorAll这两个方法,用法和一般的选择器类似。querySelector得到的是一个元素,而querySelectorAll得到的是一个列表,把它们区分开是非常明智的。如果用过jQuery就会发现jQuery本身就有一个逻辑上的大问题。虽然我们东亚的语言对名词单复数似乎没有特别的强调,但这并不代表单复数问题不重要。单复数丢失就是一个逻辑漏洞,jQuery为了使代码更简洁而放弃了单复数的强调,因此存在这个逻辑漏洞。而浏览器自带的选择器中对单复数的强调是很明确的。querySelector的返回值是元素,即使选择器找到了多个匹配也之返回第一个。querySelectorAll则返回的是列表,即使没找到元素也返回一个长度为0的列表。
  其实这篇文章也没啥内容,只是喷下jQuery对逻辑完整性的破坏而已。下面是querySelector和querySelectorAll的使用实例 <div>
  <span class="a">1</span>
  <span class="b">2</span>
  <span class="c">3</span>
</div>
<span class="a">4</span>
<span class="b">5</span>
<span class="c">6</span>
<script>
var r,div;
//搜索所有class为a的元素
r=document.querySelectorAll(".a");
console.log(r);
//搜索所有DIV中的SPAN
r=document.querySelectorAll("div span");
console.log(r);
//搜索一个DIV
div=document.querySelector("div");
//从div中搜索一个SPAN
r=div.querySelector("span");
console.log(r);
</script>

参考:
  MDN Document.querySelector
  MDN document.querySelectorAll
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^