JavaScript中querySelector和getElementByld(getXXXBy XX)的区别

2023年2月3日07:55:44

        在日常开发中,我学使用原生JavaScript获取元素的时候,最常用的方法就document.getElementByld (getXXXByXX)方法。

        但是最近发 现有很多地方使用的是queryselector方法而不是使用前面的方法。去官方文档查看是这么说的: 文档对象模型Document引用的queryselector()方法返回文档中与指定选择器或选择器组匹配的第一个html元素Element。如果找不 到匹配项,则返回null。 这句话看意思和getElementByld (getXXXByXX)函数是一样的。

        其实大部分的时候这两种方法是可以互换的,总结一下两者的不 同之处。 其实这两种方法的区别就是获取动态集合和静态集合的关系。

        getElementById() (getXXXByXX)获取动态集合:通过函数获取元素之后,元素之后的改变还是会动态添加到已经获取的这个元素中。换句话说,通过这个方法获取到元羲存储到变量的时候,以后每一次在Javascript函数中使用这个变星的时候都会再去访问一下这个变量对应的html元素。

         queryselector。获取静态集合:通过函数获取元素之后,元素之后的改变并不会影响之前获取后存储到的变量。也就是获取到元素之后就和html中的这个元素没有关系了。

  • 作者:Xwzzz_
  • 原文链接:https://blog.csdn.net/qq_44858608/article/details/124028919
    更新时间:2023年2月3日07:55:44 ,共 587 字。