Question

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

我尝试过以下方法：

HTML

＆＃13;

dismissViewControllerAnimated

＆＃13;

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

＆＃13;

但输出是：

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

我在这里做错了什么想法？

JSFiddle

Answer 1

我想你会想要这个...

＆＃13;

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>');

＆＃13;

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

＆＃13;

Answer 2

以下是使用对代码进行最少更改的方法。主要是，您缺少某种从结果中提取ID /类的方法。例如，以下是使用Array.prototype.map()：

的方法

// build children
var children = [].slice.call(document.getElementById('container').getElementsByTagName('*'),0);
// build ids and classes
var idsAndClasses = children.map(function(child) {
   return JSON.stringify({ id: child.id, classes: child.classList });
});
// output ids and classes
document.getElementById('output').innerHTML = idsAndClasses.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>

输出：

{"id":"A","classes":{}}
{"id":"B","classes":{}}
{"id":"C","classes":{}}
{"id":"","classes":{"0":"D"}}

Answer 3

好的资源是MDN ParentNode.children。

不需要像>percentile(A1:A100,80)这样的hack数组函数或其他东西，只需简单的JS和DOM访问。
简单易用。

当您拥有HTMLElement时，您可以直接访问所需的属性或属性：
- [].slice.call获取身份号码 - myElement.id获取所有课程

这正是你所谓的myElement.className，一个HTMLCollection！

children

var output = document.getElementById('output') 

var father = document.getElementById("container");
var sons = father.children;

var len = sons.length;
var i = 0;

for(i ; i < len ; i++){  
   var child = sons[i];
  
   // we access directly to the attributes
  //                                    +----------------------
  //                                    v                     v
   output.innerHTML += '<div>' + child.id + ' : ' + child.className + '</div>';
   
   // do what you want / need with them.
   var toShow = child.id + '' + child.className;
   output.innerHTML += '<div>' + toShow + '</div>'
  
  
   output.innerHTML += '<div>---</div>'
  
  
  }

Answer 4

设置我们的HTML：

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

瞄准我们的孩子：

var children = document.getElementById('container').getElementsByTagName('*');

然后遍历每个子元素并输出到页面：

[].forEach.call(children, function (child) {
        if(child.id){
            document.write(child.id + "<br>");
        } else if(child.className) {
            document.write(child.className + "<br>");
        } else {
            document.write("this element has no class or id <br>");
        }
    });

Answer 5

谢谢大家的意见。根据您的示例和建议，我制作了以下内容。它的工作原理除了类名。

var children = document.getElementById('container').getElementsByTagName('*');

var arr =[];
for (i = 0; i < children.length-1; i++){
    if(children[i].id){
        arr.push(children[i].getAttribute("id"));
    } else if (children[i].className){
        arr.push(children[i].getAttribute("class"));
    }
}

  document.getElementById('output').innerHTML = arr;

获取父div的所有子元素

5 个答案: