zoukankan      html  css  js  c++  java
  • javascript高级选择器querySelector和querySelectorAll

    querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素。

    目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。

    querySelector 和 querySelectorAll 在规范中定义了如下接口:

    module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements NodeSelector; DocumentFragment implements NodeSelector; Element implements NodeSelector; };

    从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象,querySelectorAll返回的一个集合(NodeList)。

    获取页面I属性D为test的元素:

    1. document.getElementById("test");
    2. //or
    3. document.querySelector("#test");
    4. document.querySelectorAll("#test")[0];

    获取页面class属性为”red”的元素:

    1. document.getElementsByClassName('red')
    2. //or
    3. document.querySelector('.red')
    4. //or
    5. document.querySelectorAll('.red')

    Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)选择器的区别:

    1. <divid="test1"><ahref="http://www.hujuntao.com/">设计蜂巢</a></div>
    2. <pid="bar">111</p>
    3. <script>
    4. var d1 = document.getElementById('test1'),
    5. obj1 = d1.querySelector('div a'),
    6. obj2 = d1.querySelectorAll('div a');
    7. obj3 = $(d1).find('div a');
    8. console.log(obj1)//<a href="http://www.hujuntao.com/">设计蜂巢</a>
    9. console.log(obj2.length)//1
    10. console.log(obj3)//null
    11. </script>

    querySelectorAll 在文档内找全部符合选择器描述的节点包括Element本身
    jQuery(element).find(selector) 在文档内找全部符合选择器描述的节点不包括Element本身

    你对人生迷茫吗? 那就背起行囊,起步远行吧
  • 相关阅读:
    CentOS 6.3 安装 phpmyadmin
    mysql 常用命令
    用PHP将Unicode 转化为UTF-8
    Angularjs通过$http与服务器通信
    话说Angularjs的$resource模块
    AngularCSS--关于angularjs动态加载css文件的方法(仅供参考)
    Angular-ui-router + oclazyload + requirejs实现资源随route懒加载
    移动前端开发之viewport的深入理解
    AngularJS的ng-class切换class
    AngularJS中如何对Controller与Service进行分层设计与编码
  • 原文地址:https://www.cnblogs.com/xuan52rock/p/4434398.html
Copyright © 2011-2022 走看看