如何使用javascript遍历HTML实体

Question

我有以下HTML [在下面]。 我试图使用class =“ gmvcRow”遍历所有DOM，并为每个'gmvcRow'抓取所有“ gmvcCell”中的文本。 我想将所有文本放在一个数组中（['firstname'，'lastname'，'dob'，'city']）。 而且我想将此数组放置到另一个包含“ gmvcRow数组”的数组中。 我的尝试在下面，但是我仍然没有成功。 我知道'gmvcCell'中的文本本身就是另一个标签节点。

 <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功能，这些功能会导致代码简洁：

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

 <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> 

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

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

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>