DOM API querySelector与querySelectorAll的用法

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

index.html

<!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]')
分享

TITLE: DOM API querySelector与querySelectorAll的用法

LINK: https://www.qttc.net/371-dom-api-queryselector-all.html

NOTE: 原创内容,转载请注明出自琼台博客