如何提取td元素内img标签上自定义属性favoriteid的值

问题原因 #

• this.childNodes[0]实际拿到的是td和img之间的空白文本节点：childNodes会返回所有类型的子节点，包括换行、缩进产生的空白文本节点、注释节点等，并非只返回元素节点，所以你拿到的不是img元素，自然读不到属性。
• 就算拿到了正确的img元素，直接通过['favoriteid']读取自定义属性的方式也不生效：只有HTML标准内置的DOM属性会直接挂载到元素对象上，自定义属性需要通过getAttribute()方法获取。

正确解决方案 #

方法1（推荐）：用querySelector直接定位img元素 #

这种写法不受节点结构里空白字符的影响，稳定性最高：

console.log(this.querySelector('img').getAttribute('favoriteid'))

方法2：用children属性获取元素子节点 #

children属性只会返回元素类型的子节点，自动过滤空白文本、注释等非元素节点：

console.log(this.children[0].getAttribute('favoriteid'))

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