1.常见的获取元素的方法有3种,分别是通过元素ID document.getElementById('idName');、通过标签名字document.getElementsByTagName(tagName);和通过类名字document.getElementsByClassName('className');来获取。

2.querySelector(‘.className') 方法返回匹配指定 CSS 选择器元素的第一个子元素 。 该方法只返回匹配指定选择器的第一个元素。如果要返回所有匹配元素,需要使用 querySelectorAll(‘.className') 方法替代.

3.querySelector与getElementBy等的区别
1-由于querySelector是按css规范来实现的,所以它传入的字符串中第一个字符不能是数字.
2-query选择符选出来的元素及元素数组是静态的,而getElement这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组,不会随着文档操作而改变.
在使用的时候getElement这种方法性能比较好,query选择符则比较方便

转载于:https://www.cnblogs.com/it-Ren/p/10659275.html

getElementById和querySelector区别相关推荐

  1. getElementById与querySelector的区别

    getElementById与querySelector的区别 首先对获取元素的几个方法有所了解 getElementById():返回对拥有指定id的第一个对象的引用 getElementsByNa ...

  2. querySelector和getElementById方法的区别

    querySelector.querySelectorAll和getElementById.getElementsByTagName()等的区别 在做开发时, getElementById() 返回带 ...

  3. JavaScript中 querySelector 与 getElementById 方法的区别

    1. 概述 在看代码的时候发现基本上都是用 querySelector() 和 querySelectorAll() 来获取元素,疑惑为什么不用 getElementById(). 可能因为自己没用过 ...

  4. querySelector 和 getElementById 之间的区别

    今天在学习ts,使用ts做一款贪吃蛇小游戏的时候,在获取dom元素的时候,发现使用queryselect()查找元素再添加,发现里面的标签数量没有发生变化:当使用getElementById查找再向子 ...

  5. document.getelementbyid().value与document.getElementById().innerHTML什么区别

    举例子来说明你会容易明白一点你使用document.getElementById()可以取到页面上一个有id的元素 然后访问这个元素的属性,比如value当一个元素有value属性的时候,其value ...

  6. javascript getElementByID,getElementsByName,getElementsByTagName的区别

    getElementByID,getElementsByName,getElementsByTagName区别 注意:方法区分大小写! 以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人.小 ...

  7. 1,document.getelementbyid().value与document.getElementById().innerHTML区别

    document.getelementbyid().value与document.getElementById().innerHTML什么区别 使用document.getElementById()可 ...

  8. 如何使用JavaScript更改元素的类?

    如何使用JavaScript更改HTML元素的类以响应onclick事件? #1楼 对以前的正则表达式的一些小注释和调整: 如果班级列表中的班级名称不止一次,您将希望在全局范围内执行此操作. 而且,您 ...

  9. vanilla_如何在Vanilla JavaScript中操作DOM

    vanilla by carlos da costa 通过卡洛斯·达·科斯塔 如何在Vanilla JavaScript中操作DOM (How to manipulate the DOM in Van ...

最新文章

  1. 导入第三方工程报错的处理方法
  2. STM32时钟配置方法详解
  3. 第四周项目四-程序分析(4)
  4. python3.5将list类型转换为矩阵类型
  5. 经典C语言程序100例之三三
  6. php 原生多图上传,php 原生多图文件上传
  7. mac 显示隐藏文件_如何在Mac上显示隐藏文件?苹果mac显示隐藏文件夹方法
  8. C++不同数据类型的转换
  9. tiktok+独立站怎么引流?
  10. p语言是python吗-为什么说Python是一门动态语言--Python的魅力
  11. Java基础:JDBC
  12. webstorm怎么汉化
  13. matlab自由曲面体积,一种基于自由曲面的LED准直透镜设计
  14. 门店电子会员卡系统,积分储值卡金额会员卡功能,JavaScript 局部作用域
  15. COGS2259 异化多肽
  16. 三体和银河帝国基地孰优孰劣?
  17. 生物信息学基础(包括Perl)
  18. 270w+数据量级 | CnOpenData地方政府留言文本数据简介
  19. Mysql中FROM_UNIXTIME()和UNIX_TIMESTAMP()函数
  20. web网站总是出现404 bug?照着以下几个原因排查,不怕修复不了啦

热门文章

  1. php语言冒泡法,冒泡排序法(php)
  2. MySQL了content函数_MySql字符串函数使用技巧
  3. TCP/IP学习笔记(八)复位报文段
  4. md5可以解密吗_Python训练营作业1:加密解密
  5. VMWare安装DOS系统实现文件共享
  6. ubuntu声音太小的解决方案
  7. 远程协助TeamView软件 轻松控制计算机
  8. MySQL子查询操作实例详解
  9. 实例手册_独家数据 | 1820Fall 香港研究生商科类14个热门专业 1400+申请实例汇总...
  10. ExitInterface