如何搜索html并以包含特定文本的元素为目标，使用VanillaJS向其中添加一个新类

Question

我从API中提取了一些值，然后将这些值动态添加到HTML中。我已经编写了一个函数来分配所有返回为null的值以显示为文本"；不可用"；我需要针对空值的所有包含标签(例如<h2>${input.value}</h2>中的<h2></h2>，并添加一个类以将其与其他输入不同地显示。无法知道哪个值将为空，并且每次有人使用程序时它都会更改。此外，包含的标签类型会根据值在页面上的显示位置而更改，有时是h2、p或其他标签。我试过，

const notAval = (input) => {
if(!input) {
input = 'Not Available'
}   
const allInBody = document.querySelectorAll('body > *')
allInBody.forEach (element => {
if(input === 'Not Available') {
element.classList.add('not-aval')
}

}) 
return input
}

这是选择父元素，例如，如果页脚中有目标文本，页脚是目标，并将类添加到其中，但我需要将实际包含文本的标记作为目标。

我知道你可以在jQuery中使用：contains，但我正在尝试使用Vanilla JS

谢谢你的帮助！！

Answer 1

编辑：在我发布这个答案后，这个问题的内容发生了变化。

您在粘贴的代码中犯了几个错误。

const notAval = (input) => {
if(!input) {
input.classList.add('not-avail')
}
return input
}

在上面的函数中，您正在检查输入是否为null。然后你告诉你的程序，如果它为null，就向它添加一个类。这总是会导致错误。

你需要检查输入是否为空，然后将你想要的文本添加到它应该在的html元素中

const el = document.textContent.includes('Not Available')
if(!input) {
el.classList.add('not-avail')
return 'Not Available'
}

在上面的函数中，您将el设置为布尔值，而不是html元素。由于试图将类添加到bool中，因此出现错误。

您需要检查文本内容是否包含所需的字符串，然后将类添加到元素本身。