document.querySelectorAll获取的NodeList属性显示undefined问题咨询

使用document.querySelectorAll("tr")获取到的NodeList对象能正常访问遍历，但DOM却标记NodeList[i].innerText为UNDEFINED，即便innerText能返回字符串仍抛出Undefined错误。

控制台报错信息 #

querySelectorAll("tr") dtype,string,object = object,[object NodeList],NodeList[]  
rowArray[0] = (string),     PurchaseTime    Expiry  Product Temperature Color  
tables1 copy.html:66 rowArray[1] = (string), 1  12-May-2023 13:29:09    18-May-2023 Apple   40  red
tables1 copy.html:66 rowArray[2] = (string), 2  12-May-2023 13:31:08    18-May-2023 Banana  10  black
tables1 copy.html:64 Uncaught TypeError: Cannot read properties of undefined (reading 'innerText')
    at tablesCssAutoWidth (tables1 copy.html:64:27)

相关代码及表格 #

<!DOCTYPE html>
<html lang="en">
<head> 
</head>
<body> 
    <table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>PurchaseTime</th>
      <th>Expiry</th>
      <th>Product</th>
      <th>Temperature</th>
      <th>Color</th>
  
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>12-May-2023 13:29:09</td>
      <td>18-May-2023</td>
      <td>Apple</td>
      <td>40</td>
      <td>red</td>
 
    </tr>
    <tr>
      <th>2</th>
      <td>12-May-2023 13:31:08</td>
      <td>18-May-2023</td>
      <td>Banana</td>
      <td>10</td>
      <td>black</td>
     
    </tr>
  </tbody>
</table>
  
</body>
</html>
<script>
  window.onload = function tablesCssAutoWidth(){


    const tableNodelist_tr = document.querySelectorAll("tr");
    console.log("querySelectorAll(tr) dtype = %s,%s,%o" ,typeof(tableNodelist_tr),tableNodelist_tr,tableNodelist_tr)

    // const tableNodelist_tr = document.querySelectorAll("tr");
var row_allArray = []
for (let i = 0; i <= tableNodelist_tr.length; i++) {

    let row_idata = tableNodelist_tr[i]
    row_idata = row_idata.innerText
    let row_idtype = typeof(row_idata)
    console.log("rowArray[%s] = (%s), %s",i,row_idtype,row_idata)

    row_iArray =  row_idata.replace(/\s/g, ",").split(',');
    row_allArray.concat( row_iArray)}


console.log("querySelectorAll(tr)[1].innerText dtype = %s,%s" ,typeof(tableNodelist_tr.innerText[1]),tableNodelist_tr.innerText[1])

console.log("row_allArray= %s",row_allArray)

for (let i = 1; i <= tableNodelist_tr.length; i++) {  

  if(
  parseInt(row_allArray[i][5]) <20 |
  row_iArray[i][6] == "black" ){
  row_iArray[i].style.backgroundColor = "red";}
  
}
}
</script>

问题原因 #

1. 数组越界访问：第一个for循环的条件是i <= tableNodelist_tr.length，而NodeList的索引从0开始，最大索引为length-1。当i等于tableNodelist_tr.length时，tableNodelist_tr[i]就是undefined，此时访问它的innerText必然抛出Cannot read properties of undefined错误。
2. 其他代码问题：
   • row_allArray.concat(row_iArray)不会修改原数组，需要重新赋值才能将新元素加入数组
   • tableNodelist_tr.innerText[1]写法错误，正确的访问方式是tableNodelist_tr[1].innerText
   • 第二个循环同样存在越界问题，且row_iArray是单个行的拆分数组，并非二维数组，访问row_iArray[i][6]会出错；另外逻辑或运算符应该用||而非位运算符|

修复后的代码示例 #

window.onload = function tablesCssAutoWidth(){
    const tableNodelist_tr = document.querySelectorAll("tr");
    console.log("querySelectorAll(tr) dtype = %s,%s,%o" ,typeof(tableNodelist_tr),tableNodelist_tr,tableNodelist_tr)

    var row_allArray = []
    // 修正循环条件，避免越界
    for (let i = 0; i < tableNodelist_tr.length; i++) {
        let row_idata = tableNodelist_tr[i]
        row_idata = row_idata.innerText
        let row_idtype = typeof(row_idata)
        console.log("rowArray[%s] = (%s), %s",i,row_idtype,row_idata)

        let row_iArray =  row_idata.replace(/\s+/g, ",").split(',');
        // 修正concat的赋值逻辑
        row_allArray = row_allArray.concat(row_iArray)
    }

    // 修正innerText的访问方式
    console.log("querySelectorAll(tr)[1].innerText dtype = %s,%s" ,typeof(tableNodelist_tr[1].innerText),tableNodelist_tr[1].innerText)
    console.log("row_allArray= %s",row_allArray)

    // 修正循环条件，直接操作DOM元素而非拆分后的数组
    for (let i = 1; i < tableNodelist_tr.length; i++) {  
        const row = tableNodelist_tr[i];
        const cells = row.querySelectorAll('td, th');
        const temp = parseInt(cells[4].innerText);
        const color = cells[5].innerText;
        // 修正逻辑或运算符
        if(temp <20 || color == "black"){
            row.style.backgroundColor = "red";
        }
    }
}

内容的提问来源于stack exchange，提问作者srt111