javascript - 获取父div的所有子元素

Question

我正在尝试获取父 DIV 中所有子元素的 ID 和类。

我试过以下方法:

HTML

var children = [].slice.call(document.getElementById('container').getElementsByTagName('*'), 0);
document.getElementById('output').innerHTML = children.join('\</br>');

<div id="container">
  <div id="A"></div>
  <div id="B"></div>
  <div id="C"></div>
  <div class="D"></div>
</div>
<div id="output"></div>

但是输出是:

[object HTMLDivElement]
[object HTMLDivElement]
[object HTMLDivElement]
[object HTMLDivElement]

请问我在这里做错了什么？

JSFiddle

Answer 1

我想你会想要这个...

var children = [].slice.call(document.getElementById('container').getElementsByTagName('*'),0);

var elemnts = new Array(children.length);
var arrayLength = children.length;
for (var i = 0; i < arrayLength; i++) {
    var name = children[i].getAttribute("id")||children[i].getAttribute("class");    
    elemnts[i]=name;
}
document.getElementById('output').innerHTML = elemnts.join('\</br>');

<div id = "container">
    <div id = "A"></div>
    <div id = "B"></div>
    <div id = "C"></div> 
    <div class = "D"></div>  
</div>
<div id = "output"></div>