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

Question

那么如何获取目标元素之后的所有元素，例如我想获取 id 调用 c 之后的所有元素，而不管 c 之后的元素数量如何

例如

d
e
f

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

这是我卡住的代码

/*
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

获取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 2

您可以使用 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 3

一种可能的方式：

// 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:

Answer 4

这里没有冒犯其他例子的意思，但我注意到这里的一些代码示例在某些浏览器上会有一些兼容性问题，比如

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>

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

Get all the elements id after a targeted element

javascript

html

dom

selectors-api