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 ...
随机推荐
- 【IDEA】IDEA中更新Maven的索引与像Eclipse那样搜索坐标
1.添加坐标,像Eclipse那样搜索: 右击项目中pom.xml中,然后选择Generate(快捷键是Alt+Insert)->Dependency之后输入关键字查询 或者在pom.xml中直 ...
- 【Tomcat】Tomcat下设置项目为默认项目
项目的实际使用中经常需要将当前项目设为tomcat的默认项目,而不是进入到tomcat的页面,有几种方法可以实现,注意第二种.第三种情况需要先删除webapps下的ROOT目录,否则会失败. 一. 将 ...
- MFC 将 '当前工作路径' 改为 'exe所在路径'(转)
原文转自 https://blog.csdn.net/morewindows/article/details/8683519 调整进程当前目录为程序可执行文件所在目录是个非常实用的方法.为了更加的让代 ...
- js5秒后自动关闭本页面及5秒钟后自动跳转指定页面的方法
5秒钟后自动关闭 <!DOCTYPE HTML> <html> <head> <title>倒计时自动关闭/跳转页面</title> < ...
- java中数组有没有length()方法?string没有lenght()方法?
java中数组有没有length()方法,求数组的长度可以使用数组的length属性. int[] arr={1,2,3,4,5}; int length=arr.length;//求数组的长度 -- ...
- windows下xampp安装PHP的pthreads多线程扩展
我的运行环境: 系统:windows10 ,64位 PHP:5.6.8 TS,VC11 ,32位 Apache: 2.0 我安装的是xampp集成环境 pthreads的windows扩展文件下载地址 ...
- [BZOJ2038] [2009国家集训队]小Z的袜子(hose) 莫队算法练习
2038: [2009国家集训队]小Z的袜子(hose) Time Limit: 20 Sec Memory Limit: 259 MBSubmit: 10299 Solved: 4685[Sub ...
- git提交代码出现错误fatal: Unable to create '项目路径/.git/index.lock': File exists.
git提交代码出现错误fatal: Unable to create '项目路径/.git/index.lock': File exists. 具体出错代码如下: 具体原因不详,在stackoverf ...
- HDU 6396 Swordsman --------2018 Multi-University Training Contest 7 (模拟+读入挂)
原题地址: 打怪升级 一开始有N个怪物:主角有K个能力:只有K个能力都击败怪物才能斩杀怪物并获得K个能力的增值:问最多能杀几个怪物: 做法: 用优先队列把怪物能力装进去:能力小放前面: 最重要的是数据 ...
- FZU-2214 Knapsack problem(DP使用)
Problem 2214 Knapsack problem Accept: 863 Submit: 3347Time Limit: 3000 mSec Memory Limit : 327 ...