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. 三、第一个cocos2d程序的代码分析

    http://blog.csdn.net/q199109106q/article/details/8591706 在第一讲中已经新建了第一个cocos2d程序,运行效果如下: 在这讲中我们来分析下里面 ...

  2. 2.tornado请求与响应

    之前我们介绍了tornado的基础流程,但还遗留了一些问题.今天我们就来解决遗留问题并学习新的内容 settings,使用tornado.web.Application(handler, **sett ...

  3. 51nod 1413 权势二进制【进制思维】

    1413 权势二进制 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题  收藏  关注 一个十进制整数被叫做权势二进制,当他的十进制 ...

  4. Sunscreen

    题目描述 To avoid unsightly burns while tanning, each of the C (1 ≤ C ≤ 2500) cows must cover her hide w ...

  5. Uva 11542 Square

    题目中说数组中的数的最大质因子不超过500,我们筛出≤500的质数,然后考虑对每个质数列一个方程组.. 然后这几乎就是高斯消元求解异或方程组的模板题了.... 注意答案是 2^(自由元数量)-1,因为 ...

  6. 教程:基于Spring快速开发电子邮件发送功能

    在Spring框架的spring-context-support.jar中有对电子邮件发送功能的封装: 基于Spring开发简单省事,而且更稳定.需要mail.jar包支持 @Component pu ...

  7. zookeeper 学习笔记2

    ephemeral 英[ɪˈfemərəl]美[ɪˈfɛmərəl]adj. 朝生暮死; 短暂的,瞬息的; 朝露; 一年生; ZooKeeper Watcher 机制 集群状态监控示例 为了确保集群能 ...

  8. centos下mysql集群初尝试

    原文:http://www.lvtao.net/database/mysql-cluster.html 五台服务器篇 安装要求 安装环境:CentOS-6.3安装方式:源码编译安装软件名称:mysql ...

  9. 遨游maxthon打开页面一片黑色,百度地图等黑屏解决办法

    遨游maxthon使用webkit极速核心,打开百度地图等页面一片黑色,黑屏了. 找了好久,不知道什么问题. 版本一样,都是4.4.xxx版本.另外一台机器又正常. 后来上傲游社区,好多人也有这个问题 ...

  10. C# 下利用ICSharpCode.SharpZipLib.dll实现文件/目录压缩、解压缩

    ICSharpCode.SharpZipLib.dll下载地址 1.压缩某个指定文件夹下日志,将日志压缩到CompressionDirectory文件夹中,并清除原来未压缩日志. #region 压缩 ...