ブラウザで結果が違う

###前提・実現したいこと

var count = 0;
var m = document.getElementsByTagName("meta");
for (var n in m) {
    if (m[n].name === "viewport") {
        count++;
    }
}
console.log(count);

これをfirefox chromeで実行したところ
firefoxでは1
chromeでは2
となりました
これは何故で、どうしたらどちらも1にしたり、2にしたりできますか？

行動規範の内容に同意します

回答3件

どういうわけか、HTMLCollectionにnameで割り付けられたプロパティが、Chromeではenumerable: trueとなっているのに対して、Firefoxではenumerable: falseとなっているので、for-inでピックアップされるかどうかが違ってきます。

DOM4では、「The supported property names, all unenumerable」となっているので、仕様上はFirefoxの挙動のほうが正しいです。

javascript
1// 以下のコードで挙動を確認できます
2Object.getOwnPropertyDescriptors(document.getElementsByTagName('meta'))

一貫した結果を得られるように回したいのなら、数値だけ取るように、lengthを見てforで回すか、Array.prototype.forEach.call(collection, function(){...})のようにしましょう（どちらも、全オブジェクトを1回ずつ走査することになります）。

投稿2017/09/28 00:40

編集2017/09/28 00:45