Question

我正在尝试从另一个元素中找到最接近的 h2 标记，但是无法使用 closest（）来找到它，因为它会返回错误 Uncaught TypeError：在window.onload上无法读取null的属性“样式” 。

var strongTag = document.querySelectorAll('strong');
for (var i = 0, len = strongTag.length; i < len; ++i) {
	if(strongTag[i].innerHTML.indexOf('DoFindMe') !== -1) {
	strongTag[i].closest('h2').style.backgroundColor = 'yellow';
	}
}

a {
  display: block;
  background: pink;
}

<div>

<div>
<h2>Head...<a>DoNotChangeMe</a>...ing</h2>
</div>

<div>
<div><a>DoNotChangeMe</a><strong>DoNotFindMe</strong></div>
</div>

</div>

<div>

<div>
<h2>Head...<a>DoChangeMe</a>...ing</h2>
</div>

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

</div>

<div>
<h2>Head...<a>DoNotChangeMe</a>...ing</h2>
</div>

<div>
<div><a>DoNotChangeMe</a><strong>DoNotFindMe</strong></div>
</div>

</div>

Answer 1

.closest('h2')返回null，因为您的div中没有任何h2。

在使用if (strongTag[i].closest('h2') != null){ }

之前添加检查null

尝试将h2添加到div上

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

var strongTag = document.querySelectorAll('strong');
for (var i = 0, len = strongTag.length; i < len; ++i) {
	if(strongTag[i].innerHTML.indexOf('DoFindMe') !== -1) {
	strongTag[i].closest('h2').style.backgroundColor = 'yellow';
	}
}

a {
  display: block;
  background: pink;
}

<div>

<div>
<h2>Head...<a>DoNotChangeMe</a>...ing</h2>
</div>

<div>
<div><a>DoNotChangeMe</a><strong>DoNotFindMe</strong></div>
</div>

</div>

<div>

<div>
<h2>Head...<a>DoChangeMe</a>...ing</h2>
</div>

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

</div>

<div>
<h2>Head...<a>DoNotChangeMe</a>...ing</h2>
</div>

<div>
<div><a>DoNotChangeMe</a><strong>DoNotFindMe</strong></div>
</div>

</div>

Answer 2

尝试这种替代方法：使用querySelectorAll查找所有h2和strong元素。然后遍历捕获，并在与条件匹配的每个strong元素上，将所需的样式更改应用于列表中的上一个h2元素。之所以可行，是因为可以保证querySelectorAll可以按秒保留元素在文档中出现的顺序。 Selectors API的 6.2查找元素。

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'
}

Answer 3

您的strong元素都不在h2元素内，因此 closest（）仅返回空值。

一个选择是给您的容器元素一个类并查找它，然后在其中的h2元素中进行搜索。下面，我给容器元素指定了一个class="section"：

var strongTag = document.querySelectorAll('strong');
strongTag.forEach(tag => {
  const h2 = tag.closest('.section').querySelector('h2');
  if (h2)
    h2.style.backgroundColor = 'yellow';
});

a {
  display: block;
  background: pink;
}

<div class="section">

  <div>
    <h2>Head...<a>DoNotChangeMe</a>...ing</h2>
  </div>

  <div>
    <div><a>DoNotChangeMe</a><strong>DoNotFindMe</strong></div>
  </div>

</div>

<div class="section">

  <div>
    <h2>Head...<a>DoChangeMe</a>...ing</h2>
  </div>

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

</div>

<div class="section">
  <h2>Head...<a>DoNotChangeMe</a>...ing</h2>
</div>

<div class="section">
  <div><a>DoNotChangeMe</a><strong>DoNotFindMe</strong></div>
</div>

Answer 4

查找最接近的内容仅搜索父母。因此，它将在以下情况下工作：

var strongTag = document.querySelectorAll('strong');
for (var i = 0, len = strongTag.length; i < len; ++i) {
	if(strongTag[i].innerHTML.indexOf('DoFindMe') !== -1) {
	strongTag[i].closest('h2').style.backgroundColor = 'yellow';
	}
}

a {
  display: block;
  background: pink;
}

<div>

<div>
<h2>Head...<a>DoNotChangeMe</a>...ing</h2>
</div>

<div>
<div><a>DoNotChangeMe</a><strong>DoNotFindMe</strong></div>
</div>

</div>

<div>

<div>
<h2>Head...<a>DoChangeMe</a>...ing
<div><a>DoNotChangeMe</a><strong>DoFindMe</strong></div>
</h2>
</div>

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

</div>

<div>
<h2>Head...<a>DoNotChangeMe</a>...ing</h2>
</div>

<div>
<div><a>DoNotChangeMe</a><strong>DoNotFindMe</strong></div>
</div>

</div>

使用JavaScript从另一个元素中查找最接近的h2

4 个答案: