例えば下記の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++; } } } }