getElements等のテスト＜Javascript＜木暮仁

ScriptにＨＴＭＬ内の指定場所の内容を取り出したり、その内容を変更して指定場所に書き出すことにより、ＨＴＭＬを動的に変化させることができます。その一連の関数に関する個人的メモです。
　　getElementById(id)
　　getElementsByName(name)
　　getElementsByClassName(class)
　　getElementsByTagName(tag)

getElementById(id)

getElementById("aaa")は、ＨＴＭＬ中の「id="aaa"」で指定した個所を読んだり、指定した場所に書き込んだりします。
＝＝＝＝＝＝＝＝＝

例１：<span id="例１場所"> 書出場所 </span>

例２：<span id="例２"> 読取部分 </span>

例３

例４国語英語数学

getElementsByName(name)

getElementsByName("ccc")は、ＨＴＭＬ中の<input name="ccc" ～ >で指定した個所（複数あるかもしれない）を読んだり、その個所に書き込んだりします。
＝＝＝＝＝＝＝＝＝

Ａ：
Ｂ：
Ｃ：
Ｄ：
Ｅ：この文の直後に<div id="ddd"></div>があります。

Ｆ：この文の直後に<div id="eee"></div>があります。

［実行１］をクリックすると、Ｅの下にＡ、Ｆの下にＣが表示されます。
［実行２］をクリックすると、ＡとＣが「ＸＸＸＸＸＸ」に置換されます。

name属性が記述できるタグは、a、form、frame、img、inputなどに限定されており、divやpには使えません。
Scriptで多く使うのは、inputでしょう。
　　<input type="text" name="ccc" value="・・・" />
による入力された valueの値を、Scriptで受取り処理をする方法です。
以前は、inputは、formの中で記述するのが通常でした。
　　<form name="xxx">
　　　　<input type="text" name="ccc" value="・・・" />
　　　　　　　：
　　&li;/form>
そして、scriptでは、
　　document.xxx.ccc.value で、valueの値を受け取っていました。
ところが、inputをform以外で記述できるように緩和されました。
それを受け取るのが getElementsByName("ccc") です。
ＨＴＭＬ内に同じｉｄ名はないので、getElementById() の結果は一つですが、同じname名は複数個所につけることができるので、getElementsByName() の結果は配列になります。
それで、name="ccc" のvalue値は、最初に見つかったものから順に
　　document.getElementsByName("ccc")[0].value;
　　document.getElementsByName("ccc")[1].value;
　　　　　：
になります。
　　document.getElementsByName("ccc")[0].value = "ＸＸＸＸＸＸ"; として、その内容を変更することもできます。
その個数は、document.getElementsByName("ccc").length で得られます。

getElementsByClassName(class)

getElementsByClassName("fff")は、ＨＴＭＬ中の「class="fff"」で指定した個所（複数あるかもしれない）を読んだり、その個所に書き込んだりします。複数の個所を一斉に変えることができます。
＝＝＝＝＝＝＝＝＝

Ａ：この文の直前に<div class="fff">があります。
Ｂ：この文の直後に</div>があります。すなわち、Ａ・Ｂは id="fff" 内の文です。

Ｃ：これは class="fff" の外の文です。

Ｄ：この文は<div class="fff">～</div>で囲まれています。

Ｅ：この直後に<div id="ggg" class="red"></div>があります。

Ｆ：この直後に<div id="hhh" class="blue"></div>があります。

Ｈ：この文は<div class="iii">～</div>で囲まれています。

Ｉ：この直後に<div id="jjj" class="green"></div>があります。

［実行１］をクリックすると、Ｅの下にＡとＢ、Ｆの下にＤが表示されます。
［実行２］をクリックすると、class="fff" で囲まれた部分が「ＸＸＸＸＸＸ」に置換されます。
［実行３］をクリックすると、Ｈ（id="iii"）に関する各種属性が表示されます。

getElementsByClassNameは、name属性が使えるタグが限定されますが、classは多くのタグで使用できるので、getElementsByClassNameのほうが汎用性が高いのですが、思わぬところで同じclassを使っていると、思わぬ影響がでる問題点があります。
テキスト内容を得るのに、getElementsByClassNameでは、
　　document.getElementsByName("ccc")[0].value
のようにinputでのvalue属性を使いましたが、getElementsByClassNameでは、それがないので、
　　document.getElementsByClassName("iii")[0].innerHTML
のようにinnerHTML属性（「ＨＴＭＬの中にある」の意味）を使います。
innerHTML以外に次の属性が使えます（<div class="iii">～</div>としたとき）
　　className = "iii"
　　nodeName = "DIV" （ＨＴＭＬでは大文字、ＸＭＬでは小文字で表示）
　　nodeType = 1 （DIVの位置づけ：１=要素ノード、２=属性ノード、３=テキストノード）

getElementsByTagName(tag)

指定したタグに対応する部分を取り出します。ここでは、他の部分に影響しないように、
　ブロックタグとして、<h5>
　インラインタグとして、<sup>
　ユーザ設定タグとして、<utag>
を対象にしました。
＝＝＝＝＝＝＝＝＝

<h5>Ａ：タグh5で囲まれています</h5>

<utag>Ｂ：ユーザ独自タグutagで囲まれています</utag>

<h5 class="tagname">Ｃ：^{<sup>supの内部</sup>}supの外部</h5>

対応するタグで囲まれた部分が表示されます

同じタグが複数個所ある可能性があるので、結果は０から始まる配列になります。
ＨＴＭＬの標準タグではなく、自分で勝手につけたタグを対象にすることもできます。