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

Question

我正在尝试从另一个元素中找到最近的 h2 标签，但我无法使用 closest()，因为它returns 错误 Uncaught TypeError: 无法读取 window.onload.

处的 null 属性 'style'

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') return 为空，因为在您的 div 中没有任何 h2。

在使用前添加检查空 if (strongTag[i].closest('h2') != 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 元素。然后遍历 catch，并在每个符合条件的 strong 元素上，将所需的样式更改应用于列表中的前一个 h2 元素。这是可能的，因为 querySelectorAll 保证保留元素按秒出现在文档中的顺序。 6.2 查找 Selectors API.

的元素

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

None 个 strong 元素在 h2 元素内，因此 closest() 只会 return 个空值.

一个选择是给容器元素一个 class 并查找它，然后搜索其中的 h2 元素。下面，我给了容器元素 a 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

仅查找最近的搜索 parents。所以它会在如下场景中工作：

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

Javascript to find closest h2 from another element

javascript

closest