如何解决jQuery children方法的alert报错？代码运行出现undefined错误求助

为什么会出现undefined错误？ #

你这里的核心问题是混淆了jQuery对象和原生DOM元素的属性/方法：

• $("div").children()返回的是一个jQuery集合对象，包含了匹配到的所有子元素；
• 当你用x[0]获取第一个元素时，得到的是原生的DOM元素（也就是对应<span>的HTMLSpanElement对象），而原生DOM元素并没有名为text的属性，所以访问x[0].text自然会返回undefined。

两种可行的解决办法 #

方法1：沿用jQuery的API操作

如果你想保持jQuery的操作风格，可以用.eq()方法获取指定索引的jQuery对象，再调用.text()方法获取文本内容：

<div> 
  <span>ali</span> 
  <span>veli</span> 
  <span>deli</span> 
</div> 
<script> 
  var x = $("div").children(); 
  alert(x.eq(0).text()); // 弹窗输出 "ali"
</script>

方法2：使用原生DOM元素的属性

如果要直接操作原生DOM元素，可以用标准属性textContent（推荐）或者兼容旧版IE的innerText来获取文本：

<div> 
  <span>ali</span> 
  <span>veli</span> 
  <span>deli</span> 
</div> 
<script> 
  var x = $("div").children(); 
  alert(x[0].textContent); // 弹窗输出 "ali"
  // 兼容旧版浏览器的写法：alert(x[0].innerText);
</script>

额外小提示 #

日常开发里要注意区分jQuery对象和原生DOM元素：

• jQuery对象只能调用jQuery专属方法（比如.text()、.html()、.addClass()等）；
• 原生DOM元素只能使用原生属性和方法（比如textContent、innerHTML、classList.add()等）；
  如果需要在两者间转换：
• jQuery对象转原生：$element[0] 或者 $element.get(0)；
• 原生元素转jQuery对象：$(domElement)。

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