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. Video for Linux Two API Specification revision0.24【转】

    转自:http://blog.csdn.net/jmq_0000/article/details/7536805#t136 Video for Linux Two API Specification ...

  2. kvm虚拟机最佳实践系列2-创建KVM及KVM优化

    创建KVM及KVM优化 把KVM优化与KVM创建放在一起,是因为我们创建的KVM是要用在生产环境中,所以基础优化工作是必备的. 创建KVM 创建系统盘, 大小: 操作系统通常都不到10G,所以系统盘2 ...

  3. Selenium2+python自动化16-alert\confirm\prompt【转载】

    前言 不是所有的弹出框都叫alert,在使用alert方法前,先要识别出到底是不是alert.先认清楚alert长什么样子,下次碰到了,就可以用对应方法解决. alert\confirm\prompt ...

  4. 使用dom4j工具包对xml文件解析

    xml文件 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http: ...

  5. 关于asp.net中gridview的问题,关于footer,16aspx上下的英语交流网程序,管理员的添加和修改有问题

    css部分 这是添加用户的方法 但是A.AdminName 和后面的A.取到的都是空值protected void GridView1_RowCommand(object sender,GridVie ...

  6. js 抽奖小案例

    Luck Draw 在线演示:九宫格抽奖 对九宫格形式的抽奖页面进行了一些简单封装.以后有机会再更新其他形式的抽奖.

  7. oracle case else end

    --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END --Case搜索函数 CASE WHEN sex = '1' ...

  8. USACO 4.4.2 追查坏牛奶 oj1341 网络流最小割问题

    描述 Description 你第一天接手三鹿牛奶公司就发生了一件倒霉的事情:公司不小心发送了一批有三聚氰胺的牛奶.很不幸,你发现这件事的时候,有三聚氰胺的牛奶已经进入了送货网.这个送货网很大,而且关 ...

  9. [POI2006]Periods of Words

    题目大意: 给定一个长度为$n(n\leq10^6)$的字符串$S$,定义一个串$S$的最大周期为一个不为$S$的字符串$Q$,满足$Q$为$S$的前缀且$S$为$QQ$的前缀.求字符串$S$的每一个 ...

  10. Linux下分区、格式化、自动挂载

    说明:现在硬盘基本没有了IDE,所以基本是从SCSI开始说起,第一块硬盘标示为sda,第二块为sdb,以此类推.那么第一块硬盘的第一个分区为sda1,也是以此类推. 一.硬盘分区 sudo fdisk ...