2013-09-05

DOM API querySelector与querySelectorAll的用法

HTML5引入了与jQuery选择器相似的DOM API querySelectorAll(), 这个API用起来比那个getElement**好多了！废话不多说，直接上实例。

index.html

【国内直连ChatGPT 29元起】
国内直连ChatGPT，Plus会员每月29元起，支持最新o1模型探索更多领域，无需注册OpenAI账号。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div class="box"></div>

    <div class="box">
      <p id="lost"></p>
      <p name="qttc"></p>
    </div>        

    <div></div>

    <div></div>

    <div class="box"></div>
  </body>
</html>

querySelectorAll()与querySelector()的区别是querySelectorAll()找出所有匹配的节点并返回数组，querySelector()找到一个后就返回节点对象。

找出所有标签

document.querySelectorAll('*')

full

找出head下所有的标签

`document.head.querySelectorAll('*')`

full

FireFox下居然自动多出一个style标签

找出body标签下的第一个div标签

document.body.querySelectorAll('div')[0]
document.body.querySelector('div')

找出所有class=box的标签

document.querySelectorAll('.box')

找出所有class=box的div标签

document.querySelectorAll('div.box')

找出所有id=lost的标签

document.querySelectorAll('#lost')

找出所有p标签并且id=lost的标签

document.querySelectorAll('p#lost')

找出所有name=qttc的标签

document.querySelectorAll('*[name=qttc]')

找出所有存在name属性的标签

document.querySelectorAll('*[name]')

找出所有class=hot并且存在name属性的p标签

document.querySelectorAll('p.hot[name]')
document.querySelectorAll('p[class=hot][name]')

琼台博客

DOM API querySelector与querySelectorAll的用法

推荐文章