Hatena::ブログ(Diary)

揮発性のメモ このページをアンテナに追加 Twitter

2013/08/26 (月)

getElementsByTagName()の戻り値はブラウザによって違う

    var elist = document.getElementsByTagName("img");

    elist.forEach( function(e){
        if( e.naturalWidth==0 ) e.src += "#";
    });

これはエラーになる。


getElementsByTagName()の戻り値をぐるぐる回すときに、forEachを使うとエラーになる。これは、getなんとか系の戻り値がArrayではなくNodeListのため。

getElementsByTagName:mx-Lab:So-netブログ

Q: iterating over result of getElementsByClassName using Array.forEach

A: It does not return an Array, it returns a NodeList.

JS: iterating over result of getElementsByClassName using Array.forEach | ansaurus

elements = element.getElementsByTagName(tagName)

elements is a live NodeList (but see the note below)

Element.getElementsByTagName() - Web APIs | MDN

※実際のところfirefox19以降ではHTMLCollectionが返る。 W3C DOM3ではNodeList返す仕様で、DOM4ではHTMLCollection返す予定いうのがその理由だが、バグとみなされてる。


配列ライクなオブジェクトをforEachするときのイディオム - ぷちてく - Petittech

こう書けば思ったとおりに動作するようになる

    var elist = document.getElementsByTagName("img");

    Array.prototype.forEach.call( elist, function(e){
        if( e.naturalWidth==0 ) e.src+="#";
    });

(document.querySelectorAll('*')).forEach ? ? GitHub

ArrayのようにforEachを使いたい時は、メソッド定義して使う。

    NodeList.prototype.forEach = Array.prototype.forEach;
    HTMLCollection.prototype.forEach = Array.prototype.forEach;

    var elist = document.getElementsByTagName("img");

    elist.forEach( function(e){
        if( e.naturalWidth==0 ) e.src += "#";
    });

しかし、ふつうのfor文で書いた方が 見やすいしどこでも動くし速い

Investigating JavaScript Array Iteration Performance | BenHollis.net

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/iww/20130826/HTMLCollection
リンク元
2006 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2007 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2008 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2009 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2010 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2011 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2012 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2013 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2014 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2015 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2016 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2017 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |