JavaScript：getElementsByTagNameの直下子要素のみ取得版

例えば下記のHTMLがあったとします。

<ul id="list">
    <li>
        <div></div>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
</ul>

list直下子要素のliタグを取得したい場合、「getElementsByTagName」を使うと簡単です。

var list = Array();
var ul = document.getElementById("list");
var list = ul.getElementsByTagName("li");

しかし、「getElementsByTagName」を使った場合、子要素のみでなく孫以降の要素まで全て取得してしまうので、上記例HTMLの場合ulの直下2個めにあるひ孫の位置にあるliまで全て格納されてしまい、計4つのliを配列に格納してしまいます。

ul直下のli2つのみを取得したい場合、下記のようにします。

var list = Array();
var ul = document.getElementById("list");
var e = ul.childNodes; //ul直下の子要素のみをeに格納
var i = -1;
var j = 0;
while (++i < e.length) {
    if(e[i].nodeType == 1) { //タグ要素のみ実行
        if(e[i].nodeName.toLowerCase() == "li") { //liタグであれば実行
            list[j] = e[i];
            j++;
        }
    }
}

下記のように関数化すれば使いまわせます。

function getTagNameChildNodes($target,$array,$tag) {
    var e = $target.childNodes;
    var i = -1;
    var j = 0;
    while (++i < e.length) {
        if(e[i].nodeType == 1) {
            if(e[i].nodeName.toLowerCase() == $tag) {
                $array[j] = e[i];
                j++;
            }
        }
    }
}