时间戳

首页 > 解决方案 > 如何使用 querySelectorAll('*') 更改特定元素 innerHTML

javascript - 如何使用 querySelectorAll('*') 更改特定元素 innerHTML

问题描述

我正在尝试构建一个代码，该代码将在整个页面中搜索特定单词，如果找到该单词，则应该更改找到的元素的 dom。使用我当前的代码，我能够找到该元素，但是当我更改 innerHTML 时，它正在更改所有页面内容。

我怎样才能只用 word 更改元素的 innerHTML JavaScript？

var nodes = document.querySelectorAll('*');
for (var i = 0; i < nodes.length; i++) {
    if(nodes[i].innerHTML.indexOf('JavaScript') !== -1) {
       console.log(typeof nodes[i]);
       nodes[i].innerHTML = 'text changed';
    }
}

我知道问题在于我针对所有节点，因此，它正在更改所有 HTML。我怎样才能防止这种情况并且只更改匹配的元素JavaScript？

标签： javascript

解决方案

嗨，当您使用nodes[i].innerHTML.indexOf('JavaScript')这个<body>并且<html>有这个词时，innerHTML然后更改您的文档，但是我添加了新的条件来if像这样nodes[i].innerHTML.indexOf('<') == -1说只在子节点中找到这个字符串并且在父节点中不要检查

var nodes = document.querySelectorAll('*');
for (var i = 0; i < nodes.length; i++) {
console.log(nodes[i].innerHTML.indexOf('<'))
    if(nodes[i].innerHTML.indexOf('JavaScript') != -1 && nodes[i].innerHTML.indexOf('<') == -1 ) {
       console.log(typeof nodes[i]);
       nodes[i].innerHTML = 'text changed';
    }
}
<div>
  <p>hello <span>JavaScript</span></p>
  <h1>hello World!</h1>
</div>

推荐阅读