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 ...
随机推荐
- Linux下Nginx使用
1. 安装 CentOS 7上Nginx的安装和启动方法如下 # yum install nginx # firewall-cmd --permanent --zone=public --add-se ...
- OpenCV实践之路——人脸检测(C++/Python) 【转】
转自:http://blog.csdn.net/xingchenbingbuyu/article/details/51105159 版权声明:本文为博主原创文章,转载请联系作者取得授权. 本文由@星沉 ...
- zabbix ssh登录ip监控,登录ip归属地查询
#!/usr/local/zabbix/scripts/src/bin/python # -*- coding: UTF-8 -*- from bs4 import BeautifulSoup as ...
- 初学springMVC的拦截器
springMvc拦截器的执行顺序! 拦截器的各个方法的作用: /** * 登录验证拦截器 */ public class Intercepter implements HandlerInt ...
- 探究堆喷射(heap spray)
博客园的自动保存系统真心不咋地,写的差不多的文章蓝屏之后就没有了,醉了! 浏览器是互联网世界最主要的软件之一,从IE6到IE11安全攻防在不断升级,防御措施的实施促使堆喷射技巧不断变化.写这篇博文想好 ...
- luogu P1122 最大子树和
题目描述 小明对数学饱有兴趣,并且是个勤奋好学的学生,总是在课后留在教室向老师请教一些问题.一天他早晨骑车去上课,路上见到一个老伯正在修剪花花草草,顿时想到了一个有关修剪花卉的问题.于是当日课后,小明 ...
- 用gulp+webpack构建多页应用——记一次Node多页应用的构建过程
通过参考网上的一些构建方法,当然也在开发过程中进行了一番实践,最终搭建了一套适用于当前多页应用的构建方案,当然该方案还处于draft版本,会在后续的演进过程中不断的优化. 个人觉得该方案的演进过程相对 ...
- linux PHP 安装及 GD库安装
linux GD库安装 GD 安裝 第一部需要做的是先要安裝 GD 到系統內,而安裝 GD 前需要安裝 jpeg-6b, libpng, zlib, freetype.以下是下载网址:GD 2.0.3 ...
- 写了一个远程桌面管理的Visual Studio扩展程序
最近看了写Visual Studio扩展相关的一些资料,周末写了一个远程桌面管理器的扩展程序来练练手,由于和VisualStudio集成了,无需切换窗口,用起来还是觉得挺方便的. 关于远程桌面管理器的 ...
- Visio中如何让重叠图形都显示
如图,两个矩形重叠部分的边框都显示了,是拆分操作,不是组合.