JS表格筛选报错：row[i].getElementById is not a function

开发表格筛选功能时，运行代码出现错误提示：

row[i].getElementById is not a function

相关核心代码如下：

筛选函数代码 #

function Search() {
      var input = document.getElementById("myInput");
      var filter = input.value.toUpperCase();
      var table = document.getElementById("myTable");
      var row = table.getElementsByTagName("row");
      console.log(row)
      
      for (i = 0; i < row.length; i++) {
        var div = row[i].getElementById("search")[0];
        if (div) {
          var txtValue = div.textContent || div.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            row[i].style.display = "";
          } else {
            row[i].style.display = "none";
          }
        }
      }
    }

动态生成内容的代码 #

function buildTable(data) {
  var table = document.getElementById('myTable')
  for (var i = 0; i < data.length; i++) {
    let row = data[i];
    let template_row = '';
    template_row += `<row class="row event filterDiv content">
          <a href="${row.Url}">  
        <div class="columns small-2 ico">
        <img class="focus" src="${row.Image}"/>
        </div> `;
    template_row += `
        <div class="columns small-2 ico">           
  <div class="swiper mySwiper">
      <div class="swiper-wrapper">
      `;

    row.Speakers.forEach(speaker => {
      template_row +=
        ` <div class="swiper-slide">      
  <img class="focus" src="${speaker.Image}">     
           </div> `;
    });

    template_row +=`
        </div></div></div>
        <div class="columns small-8 info" id="search">
        <p class="title release-date p2" id="p2"> ${row.StartDate}</p><br><h3 class="room">${row.Room}</h3><br><h2 class="title">${row.Name}</h2>
 </div></div></div>  ` ;

    table.innerHTML += template_row
    const div = document.getElementById("myTable");
    const nodes = div.getElementsByTagName("p");
       if(document.getElementById("p2").classList.contains("title")){
        var p2 = document.getElementById("p2").innerText;
        var c = row.StartDate;
         
        console.log(c)
        var c_pos = c.indexOf("07");
         var element = div.getElementsByTagName("row");

         if (c_pos > -1) {
            element[i].className += ' cars';
           }
      if(c_pos <= -1){
          console.log(element)
          element[i].className += ' animals';            
        }   
    }
   }
  }   

1. getElementById 仅能通过document调用：row[i]是DOM元素节点，但getElementById是全局文档的方法，只能用document.getElementById()调用——因为HTML规定ID在整个文档中必须唯一，不存在元素级别的ID查找方法。
2. 重复ID违反HTML规则：循环生成的每个<row>里都设置了id="search"，这不符合ID唯一性要求，浏览器只会返回第一个匹配该ID的元素，根本无法正确定位每个row下的目标内容。

1. 将重复ID改为类名 #

修改动态生成模板中的id="search"为class="search"，避免ID重复：

<!-- 修改前 -->
<div class="columns small-8 info" id="search">
<!-- 修改后 -->
<div class="columns small-8 info search">

2. 用querySelector在当前元素内查找目标 #

在筛选函数中，替换错误的getElementById调用，改用querySelector在当前row[i]范围内查找类名为search的元素：

function Search() {
      var input = document.getElementById("myInput");
      var filter = input.value.toUpperCase();
      var table = document.getElementById("myTable");
      var row = table.getElementsByTagName("row");
      
      // 用let声明i，避免全局变量污染
      for (let i = 0; i < row.length; i++) {
        // 在当前row下查找.search类的元素
        var div = row[i].querySelector(".search");
        if (div) {
          var txtValue = div.textContent || div.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            row[i].style.display = "";
          } else {
            row[i].style.display = "none";
          }
        }
      }
    }

额外优化提示 #

• 尽量避免使用自定义标签<row>，建议改用标准的<div>或<tr>（如果是表格结构），减少浏览器兼容性问题。
• 循环中的变量i务必用let/var声明，防止全局变量污染。

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