Question

因此，如何获得目标元素之后的所有元素，例如，我想获得id调用c之后的所有元素，而不考虑c之后的元素数量

例如

d
e
f

我想在id元素调用输出中输出结果

这是我粘贴的代码

/*
Get all the elements ids after the id call c and output those 
ids in the id call output 

For example 
document.querySelector('#output').innerHTML = ??;

How?
*/

#output{
  color: red;
}

<h1 id='a' class='letters'>A</h1>
<h1 id='b' class='letters'>B</h1>
<h1 id='c' class='letters'>C</h1>
<h1 id='d' class='letters'>D</h1>
<h1 id='e' class='letters'>E</h1>
<h1 id='f' class='letters'>F</h1>

<h1 id='output'></h1>

Answer 1

您可以使用document.querySelectorAll('#c ~ .letters')，它使用general sibling combinator：

document.querySelector('#output').innerHTML = Array.from(
  document.querySelectorAll('#c ~ .letters')
).map(element => element.textContent).join(' ');

#output{
  color: red;
}

<h1 id='a' class='letters'>A</h1>
<h1 id='b' class='letters'>B</h1>
<h1 id='c' class='letters'>C</h1>
<h1 id='d' class='letters'>D</h1>
<h1 id='e' class='letters'>E</h1>
<h1 id='f' class='letters'>F</h1>

<h1 id='output'></h1>

Answer 2

这里不冒犯其他示例，但我注意到这里的一些代码示例在某些浏览器（如

）上会存在一些兼容性问题

IE 11，因此它可以在我测试过的所有主要浏览器上使用。万一您想让它在IE 11上运行，以防万一，这是我的示例...

var afterC = [].slice.call(document.querySelectorAll('#c ~ *.letters')).map(function(elem){ return elem.getAttribute('id');});

document.querySelector('#output').innerHTML = afterC;

#output{
  color: red;
}

<h1 id='a' class='letters'>A</h1>
<h1 id='b' class='letters'>B</h1>
<h1 id='c' class='letters'>C</h1>
<h1 id='d' class='letters'>D</h1>
<h1 id='e' class='letters'>E</h1>
<h1 id='f' class='letters'>F</h1>

<h1 id='output'></h1>

Answer 3

获取c的位置，然后获取以下所有h1'：

 const c = document.querySelector("#c");
 const h1s = [...document.querySelectorAll("h1")];
 const position = h1s.indexOf(c);

 const result = h1s.filter((_, i) => i > position);

  for(const entry of result)
    output.appendChild(entry.cloneNode(true));

Answer 4

一种可能的方式：

// using a named function, passing in a CSS selector:
let getAllAfter = function(selector) {

  // here we return the result of document.querySelectorAll(),
  // after using Array.from() to convert the Array-like NodeList
  // to an Array:
  return Array.from(
    document.querySelectorAll(
      // using the passed-in selector and concatenating that
      // with the general sibling combinator ('~') and, in this
      // case using '.letters' to restrict the selector to elements
      // containing that class:
      selector + '~ .letters')
  );
}

// setting the textContent of the element with the id of 'output'
// to be equal to the Array of elements - having mapped
// their textContent using Array.prototype.map(), and joining
// the resulting Array using Array.prototype.join():
document.getElementById('output').textContent = getAllAfter('#c').map(el => el.textContent).join(', ');

#output {
  color: red;
}

<h1 id='a' class='letters'>A</h1>
<h1 id='b' class='letters'>B</h1>
<h1 id='c' class='letters'>C</h1>
<h1 id='d' class='letters'>D</h1>
<h1 id='e' class='letters'>E</h1>
<h1 id='f' class='letters'>F</h1>

<h1 id='output'></h1>

当然，这是使用硬编码的选择器，该选择器在不同的上下文中不是特别有用，因此可以修改上述功能以接受第二个选择器，以将选择的后续同级项限制为一个选择器：

// using a named function, passing in a CSS selector:
let getAllAfter = function(targetSelector, siblingSelector) {

  // here we return the result of document.querySelectorAll(),
  // after using Array.from() to convert the Array-like NodeList
  // to an Array:
  return Array.from(
    document.querySelectorAll(
      // using the passed-in selector and concatenating that
      // with the general sibling combinator ('~') and, in this
      // case using '.letters' to restrict the selector to elements
      // containing that class:
      targetSelector + ' ~ ' + siblingSelector)
  );
}

// setting the textContent of the element with the id of 'output'
// to be equal to the Array of elements - having mapped
// their textContent using Array.prototype.map(), and joining
// the resulting Array using Array.prototype.join():
document.getElementById('output').textContent = getAllAfter('#c', '.letters').map(el => el.textContent).join(', ');

#output {
  color: red;
}

<h1 id='a' class='letters'>A</h1>
<h1 id='b' class='letters'>B</h1>
<h1 id='c' class='letters'>C</h1>
<h1 id='d' class='letters'>D</h1>
<h1 id='e' class='letters'>E</h1>
<h1 id='f' class='letters'>F</h1>

<h1 id='output'></h1>

当然，在兼容的浏览器中，我们可以避免串联字符串，而只需使用模板文字将提供的字符串转换为选择器即可：

// using a named function, passing in a CSS selector:
let getAllAfter = function(targetSelector, siblingSelector) {

  // here we return the result of document.querySelectorAll(),
  // after using Array.from() to convert the Array-like NodeList
  // to an Array:
  return Array.from(
    document.querySelectorAll(
      // using the passed-in selector and concatenating that
      // with the general sibling combinator ('~') and, in this
      // case using '.letters' to restrict the selector to elements
      // containing that class:
      `${targetSelector} ~ ${siblingSelector}`)
  );
}

// setting the textContent of the element with the id of 'output'
// to be equal to the Array of elements - having mapped
// their textContent using Array.prototype.map(), and joining
// the resulting Array using Array.prototype.join():
document.getElementById('output').textContent = getAllAfter('#c', '.letters').map(el => el.textContent).join(', ');

#output {
  color: red;
}

<h1 id='a' class='letters'>A</h1>
<h1 id='b' class='letters'>B</h1>
<h1 id='c' class='letters'>C</h1>
<h1 id='d' class='letters'>D</h1>
<h1 id='e' class='letters'>E</h1>
<h1 id='f' class='letters'>F</h1>

<h1 id='output'></h1>

参考文献：

CSS：
- General sibling combinator (~)。
JavaScript：
- Array.from()。
- Array.prototype.forEach()。
- Array.prototype.map()。
- Arrow functions。
- document.querySelectorAll()。

在目标元素之后获取所有元素id

4 个答案: