document.querySelector()与document.querySelectorAll()
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()的更多相关文章
- document.querySelector()和document.querySelectorAll()
HTML5向Web API新引入了 document.querySelector()和document.querySelectorAll()两个方法,都可以接收三种类型的参数:id(#),class( ...
- 正确地缩写 document.querySelector
北京的夕阳,伴随淡淡的霾殇.从写字楼望去,光线是那么昏黄.没有孤雁,也没有霞光,遥想当年,还是 jQuery 独霸一方.那时的我们,写程序都习惯了使用 $,至少在对美元符号的喜爱上,与 PHP 达成了 ...
- 实现兼容document.querySelector的方法
var querySelector = function(selector) { //TODO 先简单兼容,后续继续扩展: var element = null; if(document.queryS ...
- document.querySelector和querySelectorAll方法
querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2.q ...
- javascript之 原生document.querySelector和querySelectorAll方法
querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2.q ...
- document.getElementById和document.querySelector的区别
zepto中的$(".111")出错,jQuery中$(".111")不出错的原因: zepto用document.querySelector实现,jQuery ...
- document.getElementById & document.querySelector
document.getElementById & document.querySelector https://developer.mozilla.org/en-US/docs/Web/AP ...
- 关于querySelector 和 document.getElementsByTagName 选中集合问题
本文解决的问题是 :运用for..of..循环时,edge浏览器报Object doesn't support property or method 'symbol.iterator'问题 以及 符号 ...
- document.querySelector获取不到html标签对象实例的原因
官方给出的HTML中的ID的命名规范: 1.必须以字母 A-Z 或 a-z 开头2.其后的字符:字母(A-Za-z).数字(0-9).连字符("-").下划线("_&qu ...
随机推荐
- android与PC直连的socket问题
关键字:abdroid 模拟器 socket 突然有人说使用android的模拟器做socket服务器,PC做客户端,使用UDP通信的时候,android端无法收到数据包.反过来没问题,我觉得这怎么可 ...
- Vue全局异常捕获
之前没注意过这么个小技巧 , 可能在Vue文档里也有 暂时先记下了 方便摘要 Vue全局配置 errorHandler可以进行全局错误收集,我们可以根据这个特性对前端异常做这样的处理:业务错误直接写 ...
- 使用overtrue/socialite实现第三方登陆
composer下载包 将申请的配置内容放在.ENV文件中 在services.php文件中引用 控制器 其他第三方登陆同理,拿到client_id,client_secret 和redirect_u ...
- J.U.C并发框架源码阅读(六)ConditionObject
基于版本jdk1.7.0_80 java.util.concurrent.locks.AbstractQueuedSynchronizer.ConditionObject 代码如下 /** * Con ...
- Netty源码学习(六)ChannelPipeline
0. ChannelPipeline简介 ChannelPipeline = Channel + Pipeline,也就是说首先它与Channel绑定,然后它是起到类似于管道的作用:字节流在Chann ...
- Python的网络编程[5] -> BOOTP + TFTP + FTP -> 实现一个简单的文件传输流程
BOOTP-TFTP-FTP 目录 文件传输流程 服务器建立过程 客户端建立过程 1 文件传输流程 / File Transfer Flow 利用BOOTP,TFTP,FTP三种传输协议,建立起客户端 ...
- 【poj1149】 pigs 网络流最大流问题
描述 Description 尼克在一家养猪场工作,这家养猪场共有M间锁起来的猪舍,由于猪舍的钥匙都给了客户,所以尼克没有办法打开这些猪舍,客户们从早上开始一个接一个来购买生猪,他们到达后首先用手中的 ...
- 【CodeForces 830C】奇怪的降复杂度
[pixiv] https://www.pixiv.net/member_illust.php?mode=medium&illust_id=60638239 description 有n棵竹子 ...
- Redis2.8.7配置文件说明
Redis master配置文件说明 daemonize no 默认情况下,redis不是在后台运行的,如果需要在后台运行,把该项的值更改为yes daemonize yes # 当redis在后台运 ...
- 每天一个liunx命令10之nohup和xargs
1上传jar包到服务器/edgewalk/springboot/下 2编写启动脚本start.sh #!/bin/sh APP_HOME=/edgewalk/springboot cd $APP_HO ...