如何获取HTML <legend>元素的for属性？Chrome扩展开发疑难

嘿，这个坑我之前踩过！你遇到的问题其实是因为**

元素的for属性并没有像那样被DOM API映射为htmlFor属性**——htmlFor是专门给设计的反射属性，其他带for属性的元素（比如

）并没有这个待遇。

可行的解决方案 #

直接用getAttribute('for')方法来获取属性值，这是通用的获取HTML属性的方式，不受DOM反射属性的限制：

let legends = Array.from(document.querySelectorAll('legend'));
console.log('# Legends found: ' + legends.length);
for (let l of legends ) {
    console.log("Legend for= attribute: " + l.getAttribute('for'));
}

补充说明 #

为什么能用htmlFor？因为HTML规范明确规定的for属性会在DOM中反射为htmlFor属性（避免和JavaScript的for关键字冲突），但

的for属性并没有被定义这样的映射关系，所以只能通过getAttribute直接读取HTML上的属性值。

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