我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

把目光转移回传统的网页编程,本文描述在浏览器环境下,查找元素的两个函数querySelectorquerySelectorAll。这两个函数其实和jquery$函数,非常的类似。而且值得说明的是:是jquery$出现在前的。

苏南大叔:对标jquery的$运算符,querySelector和querySelectorAll - queryselector
对标jquery的$运算符,querySelector和querySelectorAll(图6-1)

苏南大叔的程序如此灵动博客,记录苏南大叔的代码所想所看。本文测试环境:chrome@107.0.5304.88

函数对比

querySelector()querySelectorAll()可以完美取代原来的getElement(s)By系列。

  • querySelector()这个返回符合要求的第一个元素。
  • querySelectorAll()这个返回符合要求的一组元素。

下面的例子都是以苏南大叔的首页做例子的,在console里面执行的。

替换byTag

$("p").eq(0)[0].innerText
document.getElementsByTagName("p")[0].innerText
document.querySelector("p").innerText
document.querySelectorAll("p")[0].innerText

苏南大叔:对标jquery的$运算符,querySelector和querySelectorAll - code-0
对标jquery的$运算符,querySelector和querySelectorAll(图6-2)

替换byId

$("#logo").html()
document.getElementById("logo").innerHTML
document.querySelector("#logo").innerHTML
document.querySelectorAll("#logo")[0].innerHTML

苏南大叔:对标jquery的$运算符,querySelector和querySelectorAll - code-1
对标jquery的$运算符,querySelector和querySelectorAll(图6-3)

替换byClassName

$(".nav").eq(0)[0].innerText
document.getElementsByClassName("nav")[0].innerText
document.querySelector(".nav").innerText
document.querySelectorAll(".nav")[0].innerText

苏南大叔:对标jquery的$运算符,querySelector和querySelectorAll - code-2
对标jquery的$运算符,querySelector和querySelectorAll(图6-4)

document.querySelectorAll("*[id^='l']")[0].id
document.querySelectorAll("*[id$='o']")[0].id
document.querySelectorAll("*[id*='og']")[0].id
$("*[id^='l']")[0].id
$("*[id$='o']")[0].id
$("*[id*='og']")[0].id

苏南大叔:对标jquery的$运算符,querySelector和querySelectorAll - code-3
对标jquery的$运算符,querySelector和querySelectorAll(图6-5)

特殊的表述

document.querySelectorAll("*").length
document.head.querySelectorAll("*").length
document.body.querySelectorAll("div").length

苏南大叔:对标jquery的$运算符,querySelector和querySelectorAll - code-5
对标jquery的$运算符,querySelector和querySelectorAll(图6-6)

相关链接

结束语

更多文章,请点击:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   js