Question

我会在这里更好地解释我的问题。我想在没有第一个孩子的孩子的情况下得到主div的第二个孩子。

<div id="main">
    <div id="child">
        <div id="problem"></div>
    </div>
    <div id="child"></div>
</div>

使用香草JavaScript是一种使我能够从“ #main”中获取第二个“ #child”的方法。我无法使用document.getElementById（'child'），因为我还有其他具有该ID的元素，并且我无法更改任何一个元素。我尝试使用document.getElementById（'main'）。getElementsByTagName（'div'）[1]，但随后它给了我第一个div的孩子。所以我只能用'2'而不是1来工作，但是我一直在（“ #child”）内部不断添加和删除元素。所以我将不得不不断更改数字。

我还有其他方法可以选择第二个孩子吗？感谢您抽出宝贵时间来帮助您！

Answer 1

使用class代替id，因为id必须是唯一的。然后，使用这些代码。

const elements = document.querySelectorAll("#main > .child")

let secondElement = elements[1];
console.log("secondChild -->", secondElement.innerText)


let secondChild = Array.from(elements).find((element, index) => index == 1)
console.log("secondChild -->", secondChild.innerText)

<div id="main">
  <div class="child">
    <div id="problem">First</div>
    <div class="child">First Inner</div>
  </div>
  <div class="child">Second</div>
  <div class="child">Third</div>
  <div class="child">
  <div class="child">Second Inner</div>
  </div>
</div>

querySelectorAll

Element方法querySelectorAll（）返回静态（非实时） NodeList表示与以下元素匹配的文档元素列表指定的选择器组。-MDN

“＃main> .child”

子组合器（>）放在两个CSS选择器之间。它仅匹配第二个选择器匹配的那些元素，它们是第一个选择器匹配的元素的子元素。 -MDN

Answer 2

document.querySelector()允许您使用CSS选择器。因此，简单的document.querySelector( '#main div:nth-child(2)' )应该可以解决问题。

但是您仍然应该删除所有重复的id属性。

const second_child = document.querySelector( '#main *:nth-child(2)' );
console.log( second_child.innerHTML );

<div id="main">
  <div id="child1">
      first
    <div id="problem"></div>
  </div>
  <div id="child2">second</div>
</div>

Answer 3

在这里，您可以如何让孩子成为主要孩子。通过使用获取所有Nodes querySelectorAll并遍历所有节点。

var childs= document.getElementById("main").querySelectorAll("div");  
//console.log(childs);
childs[0]//first
childs[1]//second
childs.forEach(function(element,idx) {
  console.log(`element ${idx+1}` );
  console.log(element)
});

function getNthChild(elementAt){
 if(elementAt>0){
  console.log(childs[elementAt-1]);
 }
}
getNthChild(1);

<div id="main">
    <div id="child">
        <div id="problem"></div>
    </div>
    <div id="child"></div>
</div>

如何选择元素第二个孩子而不选择第一个孩子的孩子

3 个答案:

querySelectorAll

“＃main> .child”