document.querySelector()与document.querySelectorAll()

CreationTime--2018年7月1日10点49分

Author:Marydon

1.说明

  他俩是H5提供的选择器,都可以直接获取页面元素并进行操作。

2.区别

  用法与jQuery里的$()选择器相似;

  querySelector只能选择第一个匹配的节点;

  querySelectorAll可以选择多个节点,返回的是数组形式的页面元素对象。

3.举例

  1. window.onload = function(){
  2. // 获取页面上第一个复选框的值
  3. // 报错
  4. //alert(document.querySelectorAll(':checkbox')[0].value);
  5. // 方式一
  6. alert(document.querySelectorAll('input[type=checkbox]')[0].value);
  7. // 方式二
  8. alert(document.querySelector('input[type=checkbox]').value);
  9. }

相关推荐:

 

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. sqlmap注入一般步骤

    1. 找到注入点url2. sqlmap -u url -v 1--dbs 列出数据库或者 sqlmap -u url -v 1 --current-db 显示当前数据库3. sqlmap -u ur ...

  2. Duplicate the UIButton and Move it

    http://stackoverflow.com/questions/19241208/duplicate-the-uibutton-and-move-it/26438692#26438692 1do ...

  3. Java中如何去除List中的重复的值?

    package com.test; import java.util.*; public class Test { /** AAAA AAAA BBBB BBBB CCCC CCCC CCCC CCC ...

  4. super真的是调用父类吗?

    #!/usr/bin/env python # -*- coding:utf-8 -*- # author:love_cat class A: def __init__(self): print(&q ...

  5. windows下修改Mysql5.7.11初始密码的图文教程

    参考:http://www.jb51.net/article/98481.htm [摘要:1.my-default.ini 更名my.ini 正在解压的目次上面复造my-default.ini一份更名 ...

  6. Fiddler抓包2-只抓APP的请求【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/p/6582437.html 前言 fiddler抓手机app的请求,估计大部分都会,但是如何只 ...

  7. centos7使用tomcat部署javaweb项目

    1.下载二进制安装包 tomcat下载地址 2.下载jdk和配置环境变量 这里就不再多描述不清楚,可以       参考 我的yum安装的jdk 3.在centos7下安装 tomcat #切换到/u ...

  8. Nginx虚拟主机(Virtual Host)配置

    虚拟主机(Virtual Host)可以在一台服务器上绑定多个域名,架设多个不同的网站,一般在开发机或者要部署多个小网站的服务器上需要配置虚拟主机.nginx的虚拟主机配置其实也挺简单,为了使得配置文 ...

  9. VS217下载码云服务器项目

    按下图打开VS2017团队资源管理器的管理连接 ,本地GIT存储库下面输入远程GIT存储库URL地址和保存到本地的地址即可将远程项目下载到本地,下载完成后,关闭VS2017重新打开这个项目就可以进行源 ...

  10. [POJ 2329] Nearest number-2

    Link: POJ 2329 传送门 Solution: 比较明显的$dp$,但爆搜好像也能过 用多个方向$dp$来解决此题,最后汇总答案即可 一开始我写了4个,但后来发现只要相反的2个方向即可,同时 ...