logo标签列表

使用纯JavaScript获取div的第n个子元素

javascripthtml
15

我有一个叫做'myDiv'的div元素。如何通过DOM操作获取'myDiv'的第n个子元素？

标记：

function revealNibble(n) {
    // Do something here...
    var elements=document.getElementById('myDiv').children;
    for(var i=1; i<=elements.length; i++) {
        if(n === i) {
            var output = elements[i].innerText || elements[i].textContent;
            document.getElementById('output').innerHtml = output;
        }
    }
}
<body>
    <div id="myDiv">
        <p>One</p>
        <p>Two</p>
        <p>Three</p>
        <p>Four</p>
        <p>Five</p>
    </div>
    <hr/>
    <div id="output"></div>
</body>

我的代码无法工作！

1
尝试使用 window.document.querySelector()。它接受一个 CSS 选择器作为参数。 - Jonathan Chaplin
3个回答
25

您可能正在寻找NodeList.item()：

var elements = document.getElementById('myDiv').children
elements.item(n)

参见：NodeList.item()

10

var n = 4

console.log( myDiv.children  [n - 1] )   // Nth Element     <p>Four</p>

console.log( myDiv.childNodes[n - 1] )   // Nth Node        <p>Two</p>
<body>
  <div id="myDiv">
    <p>One</p>
    <p>Two</p>
    <p>Three</p>
    <p>Four</p>
    <p>Five</p>
  </div>
  <hr/>
  <div id="output"></div>
</body>

2
澄清一下，myDiv.childNodes[3] 之所以是 <p>Two</p> 是因为 childNodes 还包括“文本节点”，即第一个和第二个元素之前的“文本”（在这种情况下，只是空格）。 - Venryx
1

改为innerHTML

function revealNibble(n) {
  //Do something here...
  var elements = document.getElementById('myDiv').children;

  for (var i = 1; i <= elements.length; i++) {
    if (n === i) {
      var output = elements[i].innerHTML || elements[i].textContent;
      document.getElementById('output').innerHTML = output; // changed here
    }
  }
}
revealNibble(3)
<div id="myDiv">
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
  <p>Four</p>
  <p>Five</p>
</div>
<hr/>
<div id="output"></div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接