Javascript 为什么.innerHTML编辑src属性？

我正在做一个chrome扩展，试图用另一个词替换某个词

let allElements = document.querySelectorAll('*');

allElements.forEach(function (element) {
      element.innerHTML = element.innerHTML.split(word).join("████");
}

上述代码还编辑

src

和

srcset

属性。

---

element.innerText

和

element.Textcontent

删除网页中的所有CSS。

不幸的是，inner/outerHTML也在更改所有子元素，这导致浏览器重新呈现它们（即使没有更改）。这也意味着您可以多次“替换”某些文本，如果您的选择器接收到来自所有级别的元素，并且替换文本也包含原始文本

因此，正确的方法是只更改文本元素，而不接触子元素。这样您就不会遇到上述任何问题：

let word = "yourword"

let allElements = document.querySelectorAll('*');
allElements.forEach(function (element) {
    element.childNodes.forEach(function(el){
        if (!el.nodeValue) return;
        el.nodeValue = el.nodeValue.split(word).join("████");
    });
});

---

innerHTML

从字面上看，所有包含的HTML（标记、文本、属性等）都可能需要选择文本节点。是否可行？我尝试了.innerText，但它删除了网页上的所有CSS。我也是。textContent@Gosho实际上，替换

.innerText

或

.textContent

会去除修改后的标记中的所有标记，当您选择on

*

时，您选择的是

标记，然后移除整个

标记。不幸的是，仅仅在

上选择也是不够的，因为这也会去除其中的任何标记。您的意思是要替换一个单词还是一个字符串？如果是一个词，你有什么规则来确定它是一个词？