Question

如何使用nextElementSibling获取下一个元素兄弟姐妹的孩子的id？

例如，我想从id a

开始

然后从那里获取带有id的元素 b

最后获取该元素的子元素并显示其id（ bx ）

输出末尾应包含 bx 。

这是我到目前为止所做的：

/*
var x= document.querySelector('#a')???

document.querySelector('#output').innerHTML= x;

*/

<div id='a' class='family'>
  <p id='ax'></p>
</div>

<div id='b' class='family'>
  <p id='bx'></p>
</div>

<p id='output'></p>

Answer 1

您可以使用nextElementSibling获取开始元素的同级，然后使用firstElementChild获取该元素的子元素。最后，您可以获取该元素的id。

请注意，您应该使用textContent而不是innerHTML来更改元素的文本。

let start = document.querySelector('#a')
let sibling = start.nextElementSibling
let child = sibling.firstElementChild

document.querySelector('#output').textContent = child.id

<div id='a' class='family'>
  <p id='ax'></p>
</div>

<div id='b' class='family'>
  <p id='bx'></p>
</div>

<p id='output'></p>

如果您只需要一次访问该单个元素，则无需创建任何变量，只需一行即可：

document.querySelector('#output').textContent = document.querySelector('#a').nextElementSibling.firstElementChild.id

<div id='a' class='family'>
  <p id='ax'></p>
</div>

<div id='b' class='family'>
  <p id='bx'></p>
</div>

<p id='output'></p>

Answer 2

div.family带有蓝色边框，而p带有黄色背景。

“ ...我想从id开始 ----- document.querySelector('.family')

获取ID b -------------------------- .nextElementSibling

孩子的p标签id调用bx ------------ .children [0] （secondP）

所以我希望输出为bx。- secondP .parentElement .nextElementSibling

第二个<p> #id至...

...第3个<p>内容 --------------- .parentElement.nextElementSibling .textContent = secondP.id

那我该怎么做？”

演示

var secondP = document.querySelector('.family').nextElementSibling.children[0];

secondP.parentElement.nextElementSibling.textContent = secondP.id;

.family {
  border: 1px solid blue;
  padding: 0;
  height: 48px;
}

p {
  background: gold;
  font-size: 24px;
  height: 24px;
}

<div class='family'>
  <p></p>
</div>

<div class='family'>
  <p id='bx'></p>
</div>

<p></p>

使用nextElementSibling获取下一个元素兄弟姐妹的孩子的ID

2 个答案:

演示