Question

我有一些html

<h4 id="start-here">title</h4>
<p>paragraph</p>
<p>paragraph</p>
...some number of paragraphs... 
<a href="#" class="link">link</a>

我有<h4>，其ID在JavaScript中选择。如何从JS中的选择移到类链接的第一个<a>或下一个同级锚标记？

Answer 1

使用document.querySelector()和CSS选择器（在此处使用general sibling combinator ~，您可以这样实现：

一个旁注，在下面的示例中，我以内联样式为目标，尽管通常最好切换一个类。

堆栈片段

(function(){

  document.querySelector('#stat-here ~ a.link').style.color = 'red';

})();

<h4 id="stat-here">title</h4>
<p>paragraph</p>
<a href="#">link</a>
<p>paragraph</p>
<a href="#" class="link">link</a>

根据另一个问题/评论进行了更新，该方法如何获得多个元素作为回报。

使用document.querySelectorAll()可以做类似的事情，并且可以像这样定位多个元素。

堆栈片段

(function(){

  var elements = document.querySelectorAll('#div2, #div3');

  for (var i = 0; i < elements.length; i++) {
    elements[i].style.color = 'red';
  }

})();

<h4 id="stat-here1">title</h4>
<div id="div1">some text</div>

<h4 id="stat-here2">title</h4>
<div id="div2">some text</div>

<h4 id="stat-here3">title</h4>
<div id="div3">some text</div>

Answer 2

我认为从第一个兄弟姐妹开始，然后将所有兄弟姐妹放入数组中。因此，我提取了您想要的东西。

var x = document.getElementById("stat-here");
console.log(x)
var result = [],
    node = x.nextSibling;

while ( node ) {
    if (node.nodeType === Node.ELEMENT_NODE ) {
     result.push( node );
    }
    node = node.nextElementSibling || node.nextSibling;
}
console.log(result, '\n Result: ',result[result.length-2])

<h4 id="stat-here">title</h4>
<p>paragraph</p>
<p>paragraph</p>
<a href="#" class="link">link</a>

Answer 3

元素上的“从此处开始” ID使此操作变得容易。但是，让我们想象一下，您没有一个方便的选择器就引用了DOM元素，并且您不想为其添加临时ID。

在这种情况下，可以将XPath与document.evaluate一起使用，并将DOM引用用作第二个参数。假设您在yourElement中有该引用，并且想要下一个<section>兄弟姐妹

const nextSibling = document.evaluate("following-sibling::section", yourElement, null,
  XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue

如何使用JS选择特定类型的下一个兄弟姐妹？

3 个答案: