我试图从特定网页检索具有相关内容(单词'Test')的DOM元素，获取内容，最后使用以下代码将其与样式span元素包围。然而，它并没有被执行。我是否使用documentquery选择器正确的方式?提前谢谢你
const $matchedElements = document.querySelectorAll();
$matchedElements.forEach(($element) => {
if ($element.innerHTML.match("Test")) {
const $mySpan = document.createElement("span");
$mySpan.style = "background-color:yellow";
$mySpan.innerHTML = $element.innerHTML;
$element.innerHTML = ""
$element.appendChild($mySpan)
}
});
<mark>是一个内联元素，默认情况下有一个黄色的背景，也是语义的(它的目的是突出显示文本)。
在示例中有两个函数，如果您想要针对多个元素，则使用collect()。如果你的目标是一个元素，那么使用hiLite()。hiLite()能够通过针对document.body来突出显示页面上的每个给定单词，但它不能迭代地针对特定的一组元素。collect()旨在帮助hiLite()迭代地瞄准多个元素。
document.forms.UI.onsubmit = search;
function search(e) {
e.preventDefault();
const IO = this.elements;
let term = IO.search.value;
const main = document.querySelector('main');
hiLite(term, main);
};
/**
* @desc Find all occurrences of a given word of a given DOM object
* (HTMLElement) and warp each matched word in a <mark>
* @param {string} term - A string being searched for
* @param {object<DOM>} node - An element referenced as a DOM object
* @default {object<DOM>} node - If undefined it will be document.body
*/
function hiLite(term, node = document.body) {
const str = node.innerHTML;
const newStr = str.split(' ').flatMap(
word => word.toLowerCase() == term.toLowerCase() ?
`<mark>${word}</mark>` : word)
.join(' ');
node.replaceChildren();
node.insertAdjacentHTML('beforeend', newStr);
}
/**
* @desc Iterate through a NodeList and run a function (callback) on each
* node. This function is a helper function for hiLite(). While hiLite()
* is capable of highlighting a whole page, it lacks the ability to highlight
* specific elements iteratively.
* @param {string<CSS selector>} selector - The targeted elements
* @param {string} term - A string being searched for
* @param {function} callback - A function to run on each iteration
*/
function collect(selector, term, callback) {
const nodes = document.querySelectorAll(selector);
nodes.forEach(node => callback(term, node));
}
collect('p', 'Force', hiLite);<form id='UI'>
<input id='search' type='search'><button>Search</button>
</form>
<main>
<p>Remember, a Jedi can feel the Force flowing through him. Don't underestimate the Force. Obi-Wan is here. The Force is with him. In my experience, there is no such thing as luck. Red Five standing by.</p>
<p>As you wish. I'm surprised you had the courage to take the responsibility yourself. Oh God, my uncle. How am I ever gonna explain this? The more you tighten your grip, Tarkin, the more star systems will slip through your fingers.</p>
<p>I have traced the Rebel spies to her. Now she is my only link to finding their secret base. All right. Well, take care of yourself, Han. I guess that's what you're best at, ain't it? I'm surprised you had the courage to take the responsibility yourself.</p>
<p>But with the blast shield down, I can't even see! How am I supposed to fight? She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time!</p>
<p>Dantooine. They're on Dantooine. Remember, a Jedi can feel the Force flowing through him. Don't act so surprised, Your Highness. You weren't on any mercy mission this time. Several transmissions were beamed to this ship by Rebel spies. I want to know
what happened to the plans they sent you.</p>
<p>Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force. All right. Well, take care of yourself, Han. I guess that's what you're best at, ain't it?</p>
</main>