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. kvm虚拟机最佳实践系列3-kvm克隆和静态迁移

    KVM克隆和KVM静态迁移 KVM克隆 上一章我们已经有了一个合用的虚拟机镜像,现在我们需要用这个KVM镜像大量的创建和部署 virt-clone就是做这个用的.它简化了我们克隆KVM的步骤. 首先停 ...

  2. php+ajax+jquery分页并显示数据

    参考https://www.helloweba.com/view-blog-195.html html页面 <div class="weui-cells" id=" ...

  3. 用Python抓取指定页面

    #encoding:UTF-8 import urllib.request url = "http://www.baidu.com" data = urllib.request.u ...

  4. hdu 1162(最小生成树)

    Eddy's picture Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  5. 考勤的lua脚本

    ngx.header.content_type = "text/plain;charset=utf-8" local cjson = require "cjson&quo ...

  6. 漂亮的弹窗口插件——sweetAlert的使用

    想必你已经受够了单调的alert弹窗吧? 为了更好的用户体验性,现在介绍一款漂亮的弹窗口插件——sweetAlert,现在就来介绍它的使用 1.首先在官网下载它的CSS和JavaScript文件:ht ...

  7. [BZOJ4760][Usaco2017 Jan]Hoof, Paper, Scissors dp

    4760: [Usaco2017 Jan]Hoof, Paper, Scissors Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 136  Solv ...

  8. adb install 安卓apk的包

    ➜  ~ adb install /Users/jkr/Downloads/QYVideoClient-debug.apk /Users/jkr/Downloads/QYVideoClient-deb ...

  9. react 使用Form组件如何清空上一次操作

    最近在做一个表单联查时候,总是会发现后一个选择器会记住上一次选择的值 ,这会导致前一级选择器已经做出更新后,后一级选择器却还记住上一次的操作, 这里有个方法可以在上级选择器事件操作时清空Form组件的 ...

  10. [python] win7 64位 安装pygame

    1.下载pygame 2.python 下载3.2.*  32位的(电脑64位没关系的) 3.先安装python,再安装pygame 4.验证是否成功 打开IDLE >>>impor ...