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 ...
随机推荐
- 我读过的最好的epoll讲解--转自”知乎“ 【转】
转自:http://blog.csdn.net/xu3737284/article/details/12715963 首先我们来定义流的概念,一个流可以是文件,socket,pipe等等可以进行I/O ...
- nginx 根据url访问次数限制
#获取日期 date=`date +"%y%m%d"` #设置日志路径 data="/data/logs/abc.com/access.log" #配置文件路径 ...
- bisect维护已排序的序列
#!/usr/bin/env python # -*- coding:utf-8 -*- # author:love_cat import bisect # 用来处理已经排序好的序列,升序 # 二分查 ...
- [BZOJ1070][SCOI2007]修车 费用流
1070: [SCOI2007]修车 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 6209 Solved: 2641[Submit][Status] ...
- BZOJ1588 [HNOI2002]营业额统计 splay模板
1588: [HNOI2002]营业额统计 Time Limit: 5 Sec Memory Limit: 162 MB Submit: 16189 Solved: 6482 [Submit][S ...
- html5进阶之canvas图像基础
1.首先还是使用之前讲过的Image()函数来预加载图像. 在调用图像之前,需创建一个事件监听器,为其保证图像已经正确的加载. 如下图: 监听图片已经正确加载 2.把图像显示在画布上面,这里将不再使用 ...
- Codeforces 1027F. Session in BSU
题目直通车:Codeforces 1027F. Session in BSU 思路: 对第一门考试,使用前一个时间,做标记,表示该时间已经用过,并让第一个时间指向第二个时间,表示,若之后的考试时间和当 ...
- 测试工具APPScan安装与使用教程
- zclip笔记:解决zclip失效问题
在一个子页面里想实现一键复制到剪贴版的功能,使用zclip插件,用jquery的方式实现时出现了诡异问题.复制功能平时正常,当页面中所列的内容过多时,一键复制的功能失效. 这个问题相当不好定位,先说结 ...
- JAVA 父类与子类初始化顺序问题
main方法-->子类对象的初始化语句(new className()语句)--->子类构造[因为继承的缘故,它先不会执行]--->父类构造[这一步先不会执行]--->父类静态 ...