zoukankan      html  css  js  c++  java
  • javascript之querySelector和querySelectorAll

    其实关于querySelector和querySelectorAll的介绍说明很多。

    在此主要是做个记录。

    一开始很多人都会拿jquery的选择器来跟这两个api做对比(我也是),比较异同本来没事,但却使一些同学对这两个api在浏览器中的实现产生了误解,特别是再dom element上调用此api时。

    下面是我的jsFiddle示例,我就以此展开说明:

    误解就在于对$('inner').querySelectorAll('#main h4.inside')的实现理解,不少人一开始几乎都认为是直接从div[id='inner']的孩子中进行查找(我也是),这个#main有点碍眼。实际上它还是根据selector string从整个document上查找,再返回属于div[id='inner']的子节点。很多人会疑惑,那么为什么不按照直接按父节点找子节点的方式来实现呢?就像elem.getElementsByTagName,我的想法是灵活selector string吧。

    querySelector只返回匹配的第一个元素,如果没有匹配项,返回null。

    querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组)。

    并且返回的结果是静态的,之后对document结构的改变不会影响到之前取到的结果。

    目前IE8+,ff,chrome都支持此api(IE8中的selector string只支持css2.1的)。

  • 相关阅读:
    go-elasticsearch 来自官方的 golang es client
    nginx unit nodejs 模块试用(续)
    WebSocket-Over-HTTP Protocol
    pushpin Server-sent events && openresty 集成试用
    Rendering on the Web
    pushpin openresty 集成试用
    100 webhook implementations
    streamdataio 实时数据分发平台
    Generic Realtime Intermediary Protocol
    Pushpin How it works
  • 原文地址:https://www.cnblogs.com/AndyWithPassion/p/javascript_querySelector_querySelectorAll.html
Copyright © 2011-2022 走看看