スタートページJavascript

getElements等のテスト

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


getElementById(id)

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

A:これは<div id="aaa">~</div>で囲まれた文です。
B:この直後に<div id="bbb" class="red"></div>があります。
C:そこに、id="aaa"で記述した文が表示されます。

  var 取出部分 = document.getElementById("aaa").innerHTML;
  document.getElementById("bbb").innerHTML = 取出部分;
(innerHTMLとは、「このMTMLの中の」という意味)


getElementsByName(name)

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

A:
B:
C:
D:
E:この文の直後に<div id="ddd"></div>があります。
F:この文の直後に<div id="eee"></div>があります。
[実行1]をクリックすると、Eの下にA、Fの下にCが表示されます。
[実行2]をクリックすると、AとCが「XXXXXX」に置換されます。


getElementsByClassName(class)

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

A:この文の直前に<div class="fff">があります。
B:この文の直後に</div>があります。すなわち、A・Bは id="fff" 内の文です。
C:これは class="fff" の外の文です。
D:この文は<div class="fff">~</div>で囲まれています。
E:この直後に<div id="ggg" class="red"></div>があります。
F:この直後に<div id="hhh" class="blue"></div>があります。
H:この文は<div class="iii">~</div>で囲まれています。
I:この直後に<div id="jjj" class="green"></div>があります。
[実行1]をクリックすると、Eの下にAとB、Fの下にDが表示されます。
[実行2]をクリックすると、class="fff" で囲まれた部分が「XXXXXX」に置換されます。
[実行3]をクリックすると、H(id="iii")に関する各種属性が表示されます。


getElementsByTagName(tag)

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

<h5>A:タグh5で囲まれています</h5>
<utag>B:ユーザ独自タグutagで囲まれています</utag>
<h5 class="tagname">C:<sup>supの内部</sup>supの外部</h5>

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

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