■(構文) NodeList名 = オブジェクト名.getElementsByTagName("HTMLタグ名");
・引数で指定したHTMLタグ名を持った要素を全て取り出し、要素の集合(NodeListという)を返す。
・オブジェクト名･･･ページ全体を対象にする場合「document」を指定。例：document.getElementsByTagName("p")
ある範囲内に限る場合、その範囲を示すオブジェクト名を指定。
(例） var target_elem = document.getElementById("waku");
//id="waku"の要素を取得
NodeList_p = target_elem.getElementsByTagName("p"); //target_elem内の<p>タグに限定
・戻り値･･･要素の集合(NodeList）
lengthプロパティ ･･･NodeListに格納されている要素の数を返します
item()メソッド ･･･要素の集合(NodeList）から特定の要素を取り出す
NodeList内の各要素(ノードNode）には出現順に0から始まるindex番号が付けられている。
この番号を指定することで特定の要素を取り出せる。
（構文）NodeList名.item(index番号)
（例）ページ内の<p>タグを全て取得し、3番目の<p>の文字色を赤にする。
var all_p = document.getElementsByTagName("p");
all_p.item(2).style.color = "red";
★NodeListを配列とみなし、配列形式でも取り出せる。
即ち、NodeList名[index番号] （上の例では all_p[2] ）
Sample
↑上枠内の画像ファイル名を
このフレームページ内の全タグ数を （注：IE8とFireFoxで取得数が異なる、何故だ！？）
存在しないタグ名＜h2＞を指定してすると
（注：IE8とFireFoxでは「Object HTML Collection」、GoogleChrome,とOperaは「Object NodeList」と表示される）
Sample Source......................................................................>>>
<script language="JavaScript"><!--
function Test1(){
var str1 = "";
var t_waku = document.getElementById("waku"); //ターゲットを枠内に限定
var lis = t_waku.getElementsByTagName("li"); //枠内の liタグのNodeListを取得
var imgs =t_waku.getElementsByTagName("img"); //枠内の imgタグのNodeListを取得
for(var i=0; i<lis.length;i++){
str1 += lis[i].innerHTML + imgs.item(i).src + "<br>"; //配列形式とitem()メソッドの両方使ってみた
}
document.getElementById("dv").innerHTML = str1;
}
function Test2(){
var str2 = "";
var allTags = document.getElementsByTagName("*");
str2 += "このページには " + allTags.length + " 個のタグがあります。<br>";
str2 += "全てのタグ名を書き出すと、以下のとおり<br>";
for(var i=0; i<allTags.length;i++){
if(allTags[i].tagName){
str2 += allTags[i].tagName+"<br>";
}
}
document.getElementById("dv").innerHTML = str2;
}
function Test3(){
var str3 = "";
var h2s = document.getElementsByTagName("h2");
str3 += "戻り値は「 " + h2s + " 」と表示されます。<br>";
str3 += "このページには " + h2s.length + " 個のタグがあります。<br>";
document.getElementById("dv").innerHTML = str3;
}
//--></script>
</head>
<body>
<div id="waku" style="width:300px;border:1px solid green">
<ul>
<li>ホーム<img src="../../images/botan/home.gif"
width="69" height="27" border="0">
<li>DHTML<img src="../../images/botan/dhtml.gif"
width="69" height="27" border="0">
<li>JavaScript<img src="../../images/botan/js.gif"
width="69" height="27" border="0">
<li>リンク<img src="../../images/botan/link.gif"
width="69" height="27" border="0">
</ul>
</div>
<p>↑上枠内の画像ファイル名を<button onclick="Test1()">取得</button></p>
<p>このフレームページ内の全タグ数を<button onclick="Test2()">取得</button></p>
<p>存在しないタグ名＜h2＞を指定して<button onclick="Test3()">取得</button>すると</p>
<div id="dv" style="width:450px;color:green;font:12px
'Arial Black';border:1px solid red;padding-left:30px"></div>
