选在符的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. Android Mms之:深入MMS支持

    Composing and editing MMS在Android Mms应用里面的具体实现形式,或数据结构是SlideshowModel,它是一个每个节点为SlideModel的ArrayList, ...

  2. grafana dashboard的导入导出

    grafana的官方提供了很多社区或者官方设置的漂亮的dashboard,地址如下: 点击打开链接 导入图表大大节省了我们配置监控的时间,非常方便. 以linux host overview为例,首先 ...

  3. Redis学习第八课:Redis高级实用特性(二)

    Redis高级实用特性 4.持久化机制 Redis是一个支持持久化的内存数据库,也就是说Redis需要经常将内存中的数据同步到硬盘来保证持久化.Redis支持两种持久化方式:(1).snapshott ...

  4. top command-linux下用top命令查看cpu利用率超过100%

    1.  这里显示的所有的cpu加起来的使用率,说明你的CPU是多核,你运行top后按大键盘1看看,可以显示每个cpu的使用率,top里显示的是把所有使用率加起来;    2.查看CPU信息; cat ...

  5. [LeetCode&Python] Problem 461. Hamming Distance

    The Hamming distance between two integers is the number of positions at which the corresponding bits ...

  6. Mybatis的mapper文件中$和#的用法及区别详解

    https://www.2cto.com/database/201806/752139.html用了一段时间的Mybatis了,对于$和#的用法老是很迷糊,特此记下加深记忆. 简单来说 #{} 会在将 ...

  7. 【java编程】重写HashCode和equals方法

    [一]重写equals方案的规则 equals方法本来的原则 1.类的每个实例本质上都是唯一的. 2.不关心类是否提供了“逻辑相等”的测试功能 3.超类已经覆盖了equals,从超类继承过来的行为对于 ...

  8. yocto和bitbake

    一.yocto 1.yocto简介 Yocto 是一个开源社区通过它提供模版.工具和方法帮助开发者创建基于linux内核的定制系统,支持ARM, PPC, MIPS, x86 (32 & 64 ...

  9. Make menuconfig生成文件

    1.当我们在执行make menuconfig这个命令时,一共涉及到了以下几个文件: Linux内核根目录下的scripts文件夹 arch/$ARCH/Kconfig文件.各层目录下的Kconfig ...

  10. EditPLus添加到右键图文教程

    最近在研究asp听他们说EditPlus非常适合,于是下了一个,感觉还真不错,EditPlus就是一个文本编辑器,说得通俗点他和WINDOWS自带的记事本差不多,但是功能更强,一般应用于程序员编程,因 ...