Live NodeList と Static NodeList

1. gatElementなんちゃら
2. querySelector
3. jQuery

をつかってDOMをセレクトしたときに返ってくる NodeList が Live（動的） か Static（静的）かを意識しておかないと思わぬところではまることがあると思ったのでメモを残しておきます。

サンプルコード

NodeListを変数に追加した後にJSで新たなDOMを追加したときの挙動を調べます。

(function(win, doc, $) {

    "use strict";

    // NodeListを取得    
    var idHey     = doc.getElementById("hey");
    var idJump    = doc.getElementById("jump");
    var classSay  = doc.getElementsByClassName("say");
    var classJump = doc.getElementsByClassName("jump");
    var tagDiv    = doc.getElementsByTagName("div");
    
    var queryIdHey     = doc.querySelectorAll("#hey");
    var queryIdJump    = doc.querySelectorAll("#jump");
    var queryClassSay  = doc.querySelectorAll(".say")
    var queryClassJump = doc.querySelectorAll(".jump");
    var queryTagDiv    = doc.querySelectorAll("div");

    var $idHey     = $("#hey");
    var $idJump    = $("#jump");
    var $classSay  = $(".say")
    var $classJump = $(".jump");
    var $tagDiv    = $("div");
    
    // NodeListを追加
    buildNewDivElement("jump", "jump");
    
    // 取得したNodeListをコンソール出力
    console.log(idHey); // => div#hey.hey
    console.log(idJump); // => null
    console.log(classSay); // => [div.say, div.say]
    console.log(classJump); // => [div#jump.jump]
    console.log(tagDiv); // => [div#hey.hey, div.say, div.say, div#jump.jump] 
    
    console.log(queryIdHey); // => div#hey.hey
    console.log(queryIdJump); // => []
    console.log(queryClassSay); // => [div.say, div.say]
    console.log(queryClassJump); // => []
    console.log(queryTagDiv); // => [div#hey.hey, div.say, div.say]

    console.log($idHey); // => [div#hey.hey]
    console.log($idJump); // => [] 
    console.log($classSay); // => [div.say, div.say]
    console.log($classJump); // => []
    console.log($tagDiv); // => [div#hey.hey, div.say, div.say]



    function buildNewDivElement(id, className) {
        var div = doc.createElement("div"),
            str = "";
        
        if (id) {
            div.id = id;
            str += "#" + id;
        }
        
        if (className) {
            div.className = className;
            str += "." + className;
        }
        
        div.innerText = str;
        doc.body.appendChild(div);
    }
    
})(this, document, $);

DEMO

まとめ

getElementsByClassName, getElementsByTagNames で返ってくるNodeListはLive NodeListなので、取得した後に追加したDOMも反映されます。

querySelectorAll, jQueryで取得したNodeListはStatic NodeListなので、取得した瞬間にdocument上にあるDOMを取得し、更新はされません。