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. [LeetCode]Word Search 回溯

    Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from l ...

  2. android hook 框架 xposed 如何实现挂钩

    Android so注入-libinject2 简介.编译.运行 Android so注入-libinject2  如何实现so注入 Android so注入-Libinject 如何实现so注入 A ...

  3. 关闭 C4996 警告(_CRT_SECURE_NO_DEPRECATE)

    在使用VC 2005 的开发者会遇到这样的问题,在使用std命名空间库函数的时候,往往会出现类似于下面的警告: warning C4996: strcpy was declared deprecate ...

  4. HTML添加上传图片并进行预览

    使用说明:新建文件,直接复制粘贴,保存文件为html 格式,在浏览器运行即可: 第一种: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Tr ...

  5. 右上角X灰化

    CMenu* menu = this->GetSystemMenu(FALSE); menu->EnableMenuItem(SC_CLOSE, MF_BYCOMMAND | MF_GRA ...

  6. Servlet4.0 注解不生效解决

    当我们创建好一个4.0的servlet 生成的注解大概是这样  name=xxxxx 默认的是不具有效果的 你可以有两种方式 1.去掉属性name,3.0就是这样子的 2.非要有name属性 请加上u ...

  7. 【原创】Talend ETL开发——基于joblet的统一的email发送

    更新 2019/1/16:增加了允许5个附件发送.smtp等配置的字段. 一.背景 在ETL数据整合过程中,肯定会涉及到email的通知,比如ETL的执行情况汇报,执行耗时汇报,关键数据更新情况等信息 ...

  8. 学习PHP注意事项

    1 多阅读手册和源代码 没什么比阅读手册更值得强调的事了–仅仅通过阅读手册你就可以学习到很多东西,特别是很多有关于字符串和数组的函数.就在这些函数里面包括许多有用的功能,如果你仔细阅读手册,你会经常发 ...

  9. phpcms编辑器添加一键排版控件

    CKEditor添加一键排版插件实例,大家都知道phpcms也是ckeditor编辑器,那么如果增加这个一键排版这个牛逼功能呢增加好了后,效果图是这样的 废话不多说,直接说步骤第一步:config.j ...

  10. Cookie和Session在Node.JS中的实践(二)

    Cookie和Session在Node.JS中的实践(二) cookie篇在作者的上一篇文章Cookie和Session在Node.JS中的实践(一)已经是写得算是比较详细了,有兴趣可以翻看,这篇是s ...