Javascript从另一个元素中查找最接近的h2

我正在尝试从另一个元素中查找最近的h2标记，但无法使用最近的（），因为它返回错误未捕获类型错误：无法在窗口读取null的属性“style”。onload

var strongTag=document.querySelectorAll（'strong'）；
对于（变量i=0，len=strongTag.length；i

a{
显示：块；
背景：粉红色；
}

头…不要改变我…你在说什么
不要更改我不要查找DME
头……我……我……在哭
不要更改我DoFindMe
头…不要改变我…你在说什么
不要更改我不要查找DME

最近的（'h2'）返回null，因为您的div中没有任何h2

在使用

if（strongTag[i].closest（'h2'）！=null）{}

尝试添加h2以使其工作

<div><h2><a>DoNotChangeMe</a><strong>DoFindMe</strong></h2></div>

头…不要改变我…你在说什么
不要更改我不要查找DME
头……我……我……在哭
不要更改我DoFindMe
头…不要改变我…你在说什么
不要更改我不要查找DME

尝试这种替代方法：使用

querySelectorAll

查找所有

h2

和

strong

元素。然后遍历catch，并在与条件匹配的每个

strong

元素上，将所需的样式更改应用于列表中先前的

h2

元素。这是可能的，因为

querySelectorAll

保证按秒保留元素在文档中出现的顺序6.2查找元素

设i，h2，elems
elems=document.querySelectorAll（'h2，strong'））
对于（i=0；i

您的

strong

元素都不在

h2

元素内，因此最近的（）只返回空值

一种选择是为容器元素指定一个类并查找它，然后搜索其中的

h2

元素。下面，我给了容器元素一个

class=“section”

：

var strongTag=document.querySelectorAll（'strong'）；
strongTag.forEach（标记=>{
常量h2=标记。最近（'.section'）。查询选择器（'h2'）；
if（h2）
h2.style.backgroundColor='黄色'；
});
a{
显示：块；
背景：粉红色；
}

头…不要改变我…你在说什么
不要更改我不要查找DME
头……我……我……在哭
不要更改我DoFindMe
头…不要改变我…你在说什么
不要更改我不要查找DME
仅查找最近的父项。因此，它将在如下场景中工作：


var strongTag=document.querySelectorAll（'strong'）；
对于（变量i=0，len=strongTag.length；i

a{
显示：块；
背景：粉红色；
}

头…不要改变我…你在说什么
不要更改我不要查找DME
头……我……我……在哭
不要更改我DoFindMe
不要更改我DoFindMe
头…不要改变我…你在说什么
不要更改我不要查找DME
您的一些
元素没有最接近的父元素
（这就是
.closest（）
所寻找的）通过一些尖刻的方式，不需要感谢您的解释，现在您提到它是有意义的。heading元素需要包含我正在查看的strong元素。我首先想到的是，由于heading和parent div都包含在同一个div中，所以我可以使用closest（）将heading元素作为强元素的parent div的兄弟元素或作为heading和强元素parent div的子元素来查找。感谢您的解决方案和解释，它工作得非常好！
let i, h2, elems

elems = document.querySelectorAll('h2, strong')

for (i =0; i < elems.length; i++) {
    if (elems[i].localName === 'h2')
        h2 = elems[i]
    else if (elems[i].innerHTML.indexOf('DoFindMe') !== -1)
        h2.style.backgroundColor = 'yellow'
}