Question

只有JS没有Jquery。

如何获取容器的所有ChildNodes以及每个孩子的子节点？

我不想为每个作为grid-row子代的Wrapper添加ID，我试图用“this”或在此索引处定位。此脚本应该是动态的，不指定任何ID。我不能使用类来获取所有Wrappers，因为我需要单独触发每个包装器并对其应用更改。

我希望所有网格行子项“Wrapper”宽度并存储在数组中。

我正在使用ChildNodes，因为它与所有浏览器兼容。

var container = document.getElementById('container');
var rows =  container.childNodes;
var rowslenght =  container.childNodes.length;

var rowsArray = new Array();

for (var i=0; i < rowslenght ; i++) {
 if (gridrow[i].nodeType == 1){  // this is to no retrieve text

     // I got all the children of grid-row. How I get grid-row children. 
    // var rowsChildren = rows[i].getAttribute('id');

   // here goes other if to go through each "Wrapper" width and set width

    // console.log( rowsChildren);
     console.log( rows);

return rowsArray;
}
}

<div id="container">
    <div class="grid-row">
         <div class="Wrapper">
                <div class="block"></div>
         </div>
    <div class="Wrapper">
                <div class="block"></div>
         </div>
    </div>
   <div class="grid-row">
         <div class="Wrapper">
                <div class="block"></div>
         </div>
         <div class="Wrapper">
                <div class="block"></div>
         </div>
    </div>
</div>

Answer 1

试试这个。

＆＃13;

var container = document.getElementById('container');
var rows =  container.childNodes;
    rows  = removeTextNode(rows); // remove Text Nodes; 

// Loop through .grid-row
forEach(rows, function(row){
     
     // Get wrappers and filter them
     var rowWrappers = row.childNodes;
         rowWrappers = removeTextNode(rowWrappers);      
     // Now loop over the wrapper, and modify 
     // the current function adds `Wrapper-blue` to the wrappers.
     forEach(rowWrappers, function(wrapper){
          console.log(wrapper);
          wrapper.classList += ' Wrapper-blue';
     });

});

// this helper function removes extra spaces/breaklines which are considered as Nodes 
function removeTextNode(nodes){
    return [].filter.call(nodes, function(o){
        return o.nodeType == Node.ELEMENT_NODE;
    });
}

// Source: https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
function forEach(array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    // the first argument is thisArg which is the context and can used as `this` in the callback
    callback.call(scope, array[i], i); // passes back stuff we need
  }
};

＆＃13;

.Wrapper-blue {
   background:#ddd;
   margin:5px;
   width:60px;
   height:60px;
}

＆＃13;

<div id="container">
    <div class="grid-row">
         <div class="Wrapper">
                <div class="block"></div>
         </div>
    <div class="Wrapper">
                <div class="block"></div>
         </div>
    </div>
   <div class="grid-row">
         <div class="Wrapper">
                <div class="block"></div>
         </div>
         <div class="Wrapper">
                <div class="block"></div>
         </div>
    </div>
</div>

＆＃13;

Answer 2

rows[i].childNodes会在每个Wrapper内部为您提供grid-row个元素，但您也必须遍历它们。

Answer 3

我无法在第一个循环中获得第二个循环，因为我得到了所有的childNodes，包括空文本字段。我首先需要运行for语句，而不是仅过滤那些具有nodeType == 1。

的语句

var container = document.getElementById('container');
var rows =  container.childNodes;
var rowslenght =  container.childNodes.length;

var rowsArray = new Array();

// Get all  the grid-row and run through them
for (var a=0; a < rowslenght ; a++) {

// If it is a HTML element than go through
 if (gridrow[a].nodeType == 1){  

       var wpChildren = gridrow[a].childNodes;
       var wpChildrenleght = gridrow[a].childNodes.length;

      // Run through all the wrappers
       for (var b =0; b < wpChildrenleght; b++){

        // only get grid-wrapper html
         if (wpChildren[b].nodeType == 1){
              console.log(wpChildren[b]) // here is your specific div
           }
        }

  }
}

Answer 4

这并不像你做的那么难;你不必做多个循环。

所有现代浏览器都支持以下内容，包括IE 9 + https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

var container = document.getElementById('container');
var rows = container.getElementsByClassName('grid-row');
// NOTE: this assumes that you only want to get wrappers which are children of grid-rows which are children of a container

var wrapperChildren = [];

rows.forEach(function(row) {
  var wrappers = row.getElementsByClassName('Wrapper');
  // per comments, adding child count
  row['data-child-count'] = wrappers.length;

  wrapperChildren.concat(wrappers);
});

如果包装器只在网格行内部（那么你可以按类名选择所有它们），它会变得更容易。 Working fiddle

修改

根据评论，您想知道每行有多少个孩子，这很容易添加为数据属性（或任何其他自定义属性），然后在此函数运行后访问它。

如何获取ChildNodes＆gt; ChildNodes（儿童之子）

4 个答案: