选在符的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. css 兼容 各类手机的写法 待续

    @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */ .class{} } @m ...

  2. VM VirtualBox虚拟机与物理主机之间的复制

    物理主机: 系统:Ubuntu 11.04 X86_64 虚拟机: 系统:Windows XP Pack3 点击虚拟机的 设备->安装增强功能即可 安装后两系统之间的复制,粘贴可正常使用,如同一 ...

  3. Python判断变量的数据类型的两种方法

    https://www.cnblogs.com/jessicaxu/p/7727264.html

  4. Spring学习(一)--概述

    Spring是什么? 是一个框架,是为了解决企业应用开发的复杂性而创建的框架 是一个框架,是一个轻量级的控制反转和面向切面的容器框架 从大小与开销两方面而言Spring都是轻量的 通过控制反转(IoC ...

  5. 、搭建Android开发环境

    一.搭建Android开发环境 准备工作:下载Eclipse.JDK.Android SDK.ADT插件 下载地址:Eclipse:http://www.eclipse.org/downloads/ ...

  6. HDU 4185

    http://acm.hdu.edu.cn/showproblem.php?pid=4185 两个挨着的'#'可以配成一对,求最多能配成几对 挨着的'#'就连边,然后求一次最大匹配,答案是最大匹配除以 ...

  7. 【c++基础】accumulate

    accumulate // accumulate example #include <iostream> // std::cout #include <functional> ...

  8. BZOJ4475: [Jsoi2015]子集选取【找规律】【数学】

    Description Input 输入包含一行两个整数N和K,1<=N,K<=10^9 Output 一行一个整数,表示不同方案数目模1,000,000,007的值. Sample In ...

  9. vue 钩子

    生命周期总结 这么多钩子函数,我们怎么用呢,我想大家可能有这样的疑问吧,我也有,哈哈哈. beforecreate : 举个栗子:可以在这加个loading事件 created :在这结束loadin ...

  10. Selenium(ThoughtWorks公司开发的web自动化测试工具)

    Selenium也是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7.8.9).Mozilla Firefox.Mozill ...