选在符的API的核心有两个方法:querySelector()和querySelectorAll()
querySelector(a):a是一个css选择符,返回与该模式匹配的第一个元素,如果没有匹配的元素,返回null.

  var result = {};
result = document.querySelector("body"); //[object HTMLBodyElement]
result = document.querySelector("#guoDiv").innerHTML; //div里面的内容

css选择符可以简单也可以复杂.如果传入不被支持的选择符,querySelector();会抛出错误.
querySelectorAll(a);
a也是一个css选择符,但是返回的是所有匹配元素而不仅仅是一个元素.返回的是一个NodeList的实例

 result =  document.querySelectorAll(".guoDiv");
alert(result.length); //4

javascript DOM扩展querySelector()和和querySelectorAll()的更多相关文章

  1. 关于javascript dom扩展:Selector API

    众多javascript库中最常用的一项功能,就是根据css选择符选择与某个模式匹配的DOM元素.之前由于对javascript的认识较低,对javascript对DOM操作还停留在getElemen ...

  2. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  3. 《JAVASCRIPT高级程序设计》DOM扩展

    虽然DOM为XML及HTML文档交互制定了一系列的API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商 ...

  4. JavaScript基础笔记(八)DOM扩展

    DOM扩展 一.选择符API Selectors API是由W3C发起制定的一个标准,致力于让浏览器原生支持CSS查询. 一)querySelector() 在Document和Element类型实例 ...

  5. js学习笔记----JavaScript中DOM扩展的那些事

    什么都不说,先上总结的图~   Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...

  6. javascript权威指南第11章 DOM扩展

    //javascript 权威指南 第三版 第11章 DOM扩展 //取得body元素 var body = document.querySelector("body"); //取 ...

  7. 强大的原生DOM选择器querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  8. 原生JS强大DOM选择器querySelector与querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  9. 原生的强大DOM选择器querySelector - querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

随机推荐

  1. python3:xlrd、xlwt、xlutils处理excel文件

    1.xlrd读取excel 请参考上篇博客https://www.cnblogs.com/shapeL/p/9075843.html 2.xlwt生成excel 安装下载:pip install xl ...

  2. TreeMap源码学习

    这是看过的第一个jdk源码(从立下目标以来):TreeMap.说实话断断续续的看了有好几天了,我觉得我犯了一个错误,就像一开始说的那样,我打算完完全全看懂TreeMap关于红黑树的实现方式,后来我想了 ...

  3. Zabbix3.4-部署安装

    Zabbix部署安装: 系统环境:CentOS 7 Zabbix版本:Zabbix 3.4 关闭防火墙和SELINUX systemctl stop firewalld && sete ...

  4. 2018C语言助教总结

    回顾 很荣幸得到各位老师的认可,担任计科3班和4班的C语言课程助教,很感谢车老师和牛老师一学期的帮助,使得我更好的担任助教一职.我班学生59名,很愉快的与同学们度过一个美好的学期,其实作为助教同样从学 ...

  5. mkbootimg hacking

    /********************************************************************** * mkbootimg hacking * 声明: * ...

  6. Windows下C++删除清除map

    清除单map(非嵌套map) #include<map> #include<string> #include<iostream> using namespace s ...

  7. TJU Problem 2520 Quicksum

    注意: for (int i = 1; i <= aaa.length(); i++) 其中是“ i <= ",注意等号. 原题: 2520.   Quicksum Time L ...

  8. 《DSP using MATLAB》Problem 3.20

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  9. spring boot 热部署devtools实现

    1.devtools spring为开发者提供了一个名为spring-boot-devtools的模块来使Spring Boot应用支持热部署,提高开发者的开发效率,无需手动重启Spring Boot ...

  10. Google Review中Zlib.Portable报错的一种排查解决方案

    前几天遇到一个恶心的问题,跟同事一块解决了,在这里记录下过程. 比较懒,直接转他的blog: http://www.cnblogs.com/caochenghua/p/6530053.html 报错信 ...