getElementByXXX和querySelector的区别

wwwwwllllk

本帖最后由 wwwwwllllk 于 2022-12-18 00:22 编辑

之前一直困惑怎么我获取dom元素修改了一些内容，发现遍历的标签少了。原来是因为下面的原因。

getElementByXXX 这样的API获得的返回结果是随着接下来DOM的改变动态变化的，而querySelector/querySelectorAll API获得的返回结果是当前页面的一个快照，DOM改变不会更改其之前的返回结果。

不过我感觉好像如果是集合会变化，如果拿到是具体的直接就是indexHTMl值好像就不会变化了。

极品小猫

我觉得这样的描述有点问题
By 系列返回的是一个 HTMLCollection，通俗一点讲就是它是实时动态的，记录集的内容都相当于一个动态指向的object。
query系列返回的是一个 NodeList，为一个静态的记录集。

NodeList 就是一个记录了各种数据的伪数组，你DOM节点数量更新了，这个数组的内容不会变化。

但是如果你获取的只是单个节点，处理节点属性并没有本质区别。

李恒道

学到了
一般我个人都是喜欢用querySelector

王一之

原来如此
querySelector+1

但是我使用如下脚本，表现出来和楼主说的不同？有没有验证脚本？

// ==UserScript==
// @name         New Userscript
// @namespace    https://bbs.tampermonkey.net.cn/
// @version      0.1.0
// @description  try to take over the world!
// @author       You
// @match        https://bbs.tampermonkey.net.cn/thread-3891-1-1.html
// ==/UserScript==

const el = document.createElement("span");
el.id = "test-el";
el.innerText = "1";
document.body.appendChild(el);

const el1 = document.querySelector("#test-el");
const el2 = document.getElementById("test-el");

setInterval(() => {
    el.innerText += 1;
    console.log(el1);
    console.log(el2);
}, 1000);

李恒道

最好来个demo这个我也没复现出来...

wwwwwllllk

王一之 发表于 2022-12-17 23:23
[md]
原来如此
querySelector+1

哥哥重新更新了一下文章，主要是为了记录之前的易错点，不想深究了，对于菜鸟能写出东西就行

wwwwwllllk

李恒道 发表于 2022-12-18 00:14
最好来个demo这个我也没复现出来...

上面重新更新了下，之前批量对标签做操作的时候遇到过问题，以后写脚本遇到会补充文章。

wwwwwllllk

李恒道 发表于 2022-12-18 00:14
最好来个demo这个我也没复现出来...

https://www.bilibili.com/video/B ... 539bc5cec05fa168985

哥哥可以看下这个视频

李恒道

wwwwwllllk 发表于 2022-12-18 00:28
https://www.bilibili.com/video/BV1aT4y1T7Zx/?spm_id_from=333.999.0.0&vd_source=c31fddac3c868539bc5 ...

学到了
哥哥牛逼
主要一之跟我突然纠结知识正确性了，害怕误导其他人
然后我俩昨天半夜扣扣嗖嗖搞半天...

wwwwwllllk

李恒道 发表于 2022-12-18 11:54
学到了
哥哥牛逼
主要一之跟我突然纠结知识正确性了，害怕误导其他人

之前本来就想做笔记分享的，自己懒了就没做记录，然后昨天写代码的时候发现有些东西忘记了百度又浪费了好久，这个东西写脚本的时候也可能出现，害怕忘了，赶紧记录下来，不想搞复现了，还是自己懒