document.querySelector()与document.querySelectorAll()

CreationTime--2018年7月1日10点49分

Author:Marydon

1.说明

  他俩是H5提供的选择器,都可以直接获取页面元素并进行操作。

2.区别

  用法与jQuery里的$()选择器相似;

  querySelector只能选择第一个匹配的节点;

  querySelectorAll可以选择多个节点,返回的是数组形式的页面元素对象。

3.举例

window.onload = function(){
// 获取页面上第一个复选框的值
// 报错
//alert(document.querySelectorAll(':checkbox')[0].value);
// 方式一
alert(document.querySelectorAll('input[type=checkbox]')[0].value);
// 方式二
alert(document.querySelector('input[type=checkbox]').value);
}

相关推荐:

 

document.querySelector()与document.querySelectorAll()的更多相关文章

  1. document.querySelector()和document.querySelectorAll()

    HTML5向Web API新引入了 document.querySelector()和document.querySelectorAll()两个方法,都可以接收三种类型的参数:id(#),class( ...

  2. 正确地缩写 document.querySelector

    北京的夕阳,伴随淡淡的霾殇.从写字楼望去,光线是那么昏黄.没有孤雁,也没有霞光,遥想当年,还是 jQuery 独霸一方.那时的我们,写程序都习惯了使用 $,至少在对美元符号的喜爱上,与 PHP 达成了 ...

  3. 实现兼容document.querySelector的方法

    var querySelector = function(selector) { //TODO 先简单兼容,后续继续扩展: var element = null; if(document.queryS ...

  4. document.querySelector和querySelectorAll方法

    querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.q ...

  5. javascript之 原生document.querySelector和querySelectorAll方法

    querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.q ...

  6. document.getElementById和document.querySelector的区别

    zepto中的$(".111")出错,jQuery中$(".111")不出错的原因: zepto用document.querySelector实现,jQuery ...

  7. document.getElementById & document.querySelector

    document.getElementById & document.querySelector https://developer.mozilla.org/en-US/docs/Web/AP ...

  8. 关于querySelector 和 document.getElementsByTagName 选中集合问题

    本文解决的问题是 :运用for..of..循环时,edge浏览器报Object doesn't support property or method 'symbol.iterator'问题 以及 符号 ...

  9. document.querySelector获取不到html标签对象实例的原因

    官方给出的HTML中的ID的命名规范: 1.必须以字母 A-Z 或 a-z 开头2.其后的字符:字母(A-Za-z).数字(0-9).连字符("-").下划线("_&qu ...

随机推荐

  1. 【IDEA】使用intellij的idea集成开发工具中的git插件

    注意:这里并没有介绍git客户端的安装,如果要安装客户端,大家可以参考如下的链接: http://www.runoob.com/git/git-install-setup.html 1.在使用这个id ...

  2. OpenCV实践之路——人脸检测(C++/Python) 【转】

    转自:http://blog.csdn.net/xingchenbingbuyu/article/details/51105159 版权声明:本文为博主原创文章,转载请联系作者取得授权. 本文由@星沉 ...

  3. 使用timeit模块 测试两种方式生成列表的所用的时间

    from timeit import Timer def test(): li=[] for i in range(10000): li.append(i) def test2(): li=[i fo ...

  4. 【计算机网络】HTTP协议详解

    详见:http://blog.csdn.net/gueter/article/details/1524447 不让转载,但写得很好  

  5. 中控考勤机WEB主动上报接收SERVER程序

    using System; using System.IO; using System.Net; using System.Text.RegularExpressions; namespace Con ...

  6. POJ 1862 Stripies【哈夫曼/贪心/优先队列】

    Stripies Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 18198   Accepted: 8175 Descrip ...

  7. Codeforces Round #447 (Div. 2) B. Ralph And His Magic Field【数论/组合数学】

    B. Ralph And His Magic Field time limit per test 1 second memory limit per test 256 megabytes input ...

  8. 链式前向星DFS

    本文链接:http://www.cnblogs.com/Ash-ly/p/5399057.html 采用链式前向星存图的DFS: #include <iostream> #include ...

  9. servlet方法

    1.每一个Servlet都必须要实现Servlet接口,GenericServlet是个通用的.不特定于任何协议的Servlet,它实现了Servlet接口,而HttpServlet继承于Generi ...

  10. #424 Div2 E

    #424 Div2 E 题意 给出一个 n 个数的数列,从前往后取数,如果第一个数是当前数列的最小值,则取出,否则将它放到数列尾端,问使数列为空需要多少步操作. 分析 用数据结构去模拟. 线段树维护区 ...