jQuery通过属性选择元素后获取nodeName返回undefined问题排查

你的HTML代码 #

<objeto bordeactivo type="image">
  <img src="https://picsum.photos/536/354"/>
</objeto>

你的jQuery代码 #

var ob = $("[bordeactivo]");
var ob2 = ob.find("img");

// 正常运行
alert("ob>"+ob.attr("type"));

// 无法工作
alert("nodeName>"+ob2.nodeName);

问题根源 #

ob和ob2都是jQuery包装后的对象，不是原生DOM节点：

• jQuery对象没有nodeName这个属性，所以直接访问ob2.nodeName会返回undefined。
• 而ob.attr("type")能正常运行，是因为attr()是jQuery专门提供的、用于操作DOM属性的方法。

解决方法 #

有两种方式可以获取到nodeName：

1. 使用jQuery的.prop()方法读取原生DOM属性：

alert("nodeName>"+ob2.prop("nodeName"));

2. 将jQuery对象转换为原生DOM节点后再访问属性：
   • 通过索引取第一个匹配元素：ob2[0].nodeName
   • 或者用jQuery的.get()方法：ob2.get(0).nodeName

修改后的完整代码示例：

var ob = $("[bordeactivo]");
var ob2 = ob.find("img");

// 正常运行
alert("ob>"+ob.attr("type"));

// 方案1：使用prop方法
alert("nodeName>"+ob2.prop("nodeName"));

// 方案2：转换为原生DOM节点
alert("nodeName>"+ob2[0].nodeName);

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