如何在JavaScript中检查类元素的innerText是否存在以避免类型错误

嘿，我完全懂你踩的这个坑！你现在的问题出在判断逻辑的顺序上——当页面还没渲染出myclass元素时，button[0]本身就是undefined，你直接去访问它的innerText属性，自然会触发类型错误，而你的判断是先访问属性再检查，这根本来不及阻止报错。

给你几个有效的检查方法，按需选择就行：

方法1：先检查元素是否存在（最兼容方案） #

getElementsByClassName返回的是HTMLCollection对象，我们可以先通过它的length属性确认有没有匹配的元素，再去访问innerText：

function myfunc() { 
  var button = document.getElementsByClassName('myclass'); 
  // 先确认数组中有元素，再检查innerText属性
  if (button.length > 0 && button[0].innerText !== undefined) { 
    console.log(button[0].innerText); 
    clearInterval(x); 
  } 
} 
var x = setInterval(function() { myfunc(); }, 1);

这样就不会因为button[0]是undefined而报错了——只有当button.length > 0为真时，才会去访问button[0].innerText。

方法2：用可选链操作符（更简洁，ES2020+支持） #

如果你不需要兼容老旧浏览器，可选链?.是个非常好用的语法糖，它会自动处理undefined/null的情况，不会继续访问后续属性：

function myfunc() { 
  var button = document.getElementsByClassName('myclass'); 
  // 可选链会在button[0]不存在时直接返回undefined，不会抛出错误
  const text = button[0]?.innerText;
  if (text !== undefined) { 
    console.log(text); 
    clearInterval(x); 
  } 
} 
var x = setInterval(function() { myfunc(); }, 1);

方法3：改用querySelector（代码更直观） #

querySelector会直接返回匹配的第一个元素，找不到就返回null，检查起来更简单：

function myfunc() { 
  var button = document.querySelector('.myclass'); 
  // 先判断元素是否存在，再检查innerText
  if (button && button.innerText !== undefined) { 
    console.log(button.innerText); 
    clearInterval(x); 
  } 
} 
var x = setInterval(function() { myfunc(); }, 1);

核心思路就是先确认元素存在，再去访问它的属性，把判断顺序倒过来就解决问题啦！

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