JavaScript querySelector()、querySelectorAll()方法介绍

JavaScript querySelector()、querySelectorAll()方法介绍一 getElementsB 方法不足之处在之前的学习中 我们了解到 可以根据元素的 class 属性值查询一组元素节点对象 即 getElementsB 但是这个方法不支持 IE8 及以下的浏览器 在我们的实际开发中 会特别的受限 为了兼容 IE8 及以下的浏览器 我们可以采用一种新的方法 这种方法在我们的实际开发中也很常用 因此我们要熟练掌握

一、getElementsByClassName()方法不足之处

在之前的学习中,我们了解到,可以根据元素的 class 属性值查询一组元素节点对象,即:getElementsByClassName(),但是这个方法不支持 IE8 及以下的浏览器。

二、querySelector()、querySelectorAll()方法介绍

【1】document.querySelector()

  • 需要一个选择器的字符串作为参数,可以根据一个 CSS 选择器来查询一个元素节点对象
  • 虽然 IE8 中没有 getElementsByClassName()但是可以使用 document.querySelector()代替
  • 使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个

在这里插入图片描述
在这里插入图片描述
【2】document.querySelectorAll()

  • 该方法和 document.querySelector()用法类似,不同的是它会将符合条件的元素封装到一个数组中返回
  • 即使符合条件的元素只有一个,它也会返回数组

在这里插入图片描述
我们若要查找具体元素,就必须使用索引,如下图:
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/223882.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月17日 下午1:13
下一篇 2026年3月17日 下午1:13


相关推荐

  • 微信小程序 小程序源码包括后台完整版分享

    微信小程序 小程序源码包括后台完整版分享需要的留邮箱免费发!版权归作者所有,任何形式转载请联系作者。作者:执波仔丶(csdn博客)最新收集的60个微信小程序源码分享+开发视频教程最新收集的60个微信小程序源码分享+开发视频教程最新收集的60个微信小程序源码分享+开发视频教程小程序源码使用教程(源码文件夹自带安装教程,本教程不一定通用):第一步:百度搜索下载微信开发者工具(最新1.02.1801081,支持mac)第二步:打开开发工具客…

    2022年7月20日
    25
  • 自己动手编写CSDN博客备份工具-blogspider源码下载(4) .

    自己动手编写CSDN博客备份工具-blogspider源码下载(4) .作者:gzshun.原创作品,转载请标明出处!来源:http://blog.csdn.net/gzshun本博文需要声明几点:1.blogspider_v1.0源码已经更新,文件名为”blogspider_v2.0.tar.bz2″,下载地址在下文。2.该备份工具用其他语言(比如Java,PHP)可能比较简单,但本人只会C/C++。3.blogspider_v1.0源码报

    2022年7月25日
    13
  • android studio 导入eclipse乱码解决「建议收藏」

    android studio 导入eclipse乱码解决「建议收藏」在开发过程中遇到androidstudio导入eclipse乱码,综合网上查找的答案,我是这样解决的:1、首先在module的bulid.gradle文件的android标签中加入以下内容:applyplugin:’com.android.xxxx’android{compileSdkVersion21buildToolsVersion”21.

    2022年5月25日
    38
  • Murmur下载_md5是常用的hash算法

    Murmur下载_md5是常用的hash算法NativeJSmurmurhashimplementationMurmurHash.jsAnoptimizedJavaScriptimplementationoftheMurmurHashalgorithms.ThesealgorithmstakeaJavaScriptstring(andaseed),andquicklycreateanon-cr…

    2025年7月30日
    8
  • PHP 二维数组根据某个字段排序

    PHP 二维数组根据某个字段排序PHP 二维数组根据某个字段排序

    2022年4月24日
    47
  • 【vue】 less和sass的区别

    【vue】 less和sass的区别less 和 sass 都是 css 的一种预处理器 转化成通俗易懂的话来说就是 用一种专门的编程语言 进行 Web 页面样式设计 再通过编译器转化为正常的 CSS 文件 以供项目使用 sass 和 less 的区别 1 Less 环境较 Sass 简单 2 Less 使用较 Sass 简单 3 从功能出发 Sass 较 Less 略强大一些 4 Less 与 Sass 处理机制不一样 前者是通过客户端处理的 后者是通过服务端处理 相比较之下前者解析会比后者慢一点 关于变量在 Less 和 Sass 中的唯一区别就是 Less 用 Sass 用

    2026年3月17日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号