Question

我有以下HTML [下方]。我试图用class =＆＃34; gmvcRow＆＃34;迭代所有DOM，然后抓住所有＆＃34; gmvcCell＆＃34;中的文本。对于每个＆＃39; gmvcRow＆＃39;。我想将所有文字放在一个数组中[[＆＃39;名字＆＃39;，＆＃39;姓氏＆＃39;，＆＃39; dob＆＃39;，＆＃39; city＆＃39;]）。我想把这个数组放到另一个数组中，该数组包含＆＃34; gmvcRow＆＃34;的数组。我的尝试在下面，但我仍然没有成功。我理解＆＃39; gmvcCell＆＃39;中的文字。本身就是另一个标签节点。

 <div class="gmvcRow">
      <div class="gmvcCell">firtname</div>
      <div class="gmvcCell">lastname</div>
      <div class="gmvcCell">dob</div>
      <div class="gmvcCell">city</div>
 </div>
 <div class="gmvcRow"></div>
 <div class="gmvcRow"></div>
 <div class="gmvcRow"></div>
 <div class="gmvcRow"></div>
 <div class="gmvcRow"></div>

我的代码：

 var gmvcRowArray = document.getElementsByClassName('gmvcRow');
 console.log('number of records: ' + gmvcRowArray.length);

 // Master array
var masterArray = [];

// Iterate through array
for(var i=0; i<gmvcRowArray.length; i++){
    // Iterate through all childNodes
    var rowArray = [];


    for(var c=0; c<gmvcRowArray[i].childNodes.length; c++){
        c = c + 1; // skip non text node
        console.log('c: '+c);

        if(gmvcRowArray[i].childNodes[c] != null){
            var value = gmvcRowArray[i].childNodes[c].innerHTML;

            rowArray.push(value);
            //console.log('rowArray.length: '+rowArray.length);
            console.log('value: '+value);
        }


        c = c - 1;
    }
    // Add row to master array
    masterArray.push(rowArray);
    console.log('masterArray.lengh: '+masterArray.length);
}

Answer 1

使用childNodes会使其比所需更难，因为它还会选择文本节点。

而是使用一些ES6功能，这些功能可以产生简洁的代码：

＆＃13;

var arr = Array.from(document.querySelectorAll('.gmvcRow'), row =>
    Array.from(row.querySelectorAll('.gmvcCell'), cell => cell.textContent)
);

console.log(arr);

＆＃13;

<div class="gmvcRow">
  <div class="gmvcCell">firstname</div>
  <div class="gmvcCell">lastname</div>
  <div class="gmvcCell">dob</div>
  <div class="gmvcCell">city</div>
</div>
<div class="gmvcRow">
  <div class="gmvcCell">Helene</div>
  <div class="gmvcCell">Johnson</div>
  <div class="gmvcCell">11/11/1995</div>
  <div class="gmvcCell">Paris</div>
</div>

＆＃13;

Answer 2

1级嵌套的快速样本

var rows = Array.from(document.getElementById('container').querySelectorAll('.gmvcRow'));

const result = rows.map(row => {
    return Array
        .from(row.querySelectorAll('.gmvcCell'))
        .map(cell => cell.innerText);
});

console.log(result);

https://jsfiddle.net/snba2qsf/

毕竟你可以过滤结果以排除空数组

Answer 3

在您的脚本中：只需在添加到行数组之前检查该值是否为空且未定义。

if(value != null || value != undefined)
{
rowArray.push(value.trim());
}

Answer 4

以下是我使用querySelectorAll

的答案

var gmvcRowArray = [];
document.querySelectorAll('.gmvcRow').forEach((el, idxRow) =>{
var gmvcCellArray = [];
	el.querySelectorAll('.gmvcCell')
  .forEach((el) =>{
  	gmvcCellArray.push(el.innerText);
  });
  gmvcRowArray.push(gmvcCellArray)
})
console.log(gmvcRowArray)

 <div class="gmvcRow">
      <div class="gmvcCell">Name1</div>
      <div class="gmvcCell">lastname1</div>
      <div class="gmvcCell">dob1</div>
      <div class="gmvcCell">city1</div>
 </div>
 <div class="gmvcRow">
      <div class="gmvcCell">Name2</div>
      <div class="gmvcCell">lastname2</div>
      <div class="gmvcCell">dob2</div>
      <div class="gmvcCell">city2</div>
 </div>
 <div class="gmvcRow"></div>
 <div class="gmvcRow"></div>
 <div class="gmvcRow"></div>
 <div class="gmvcRow"></div>

如何使用javascript迭代HTML实体

4 个答案: