エレメント（Element）

Internet Explorer 4.0 では、JavaScript から HTML 文書内のすべての要素にアクセスし、変更する機能を備えています。詳細な仕様は説明は以下のページに紹介されています。

MSDN Web Workshop http://msdn.microsoft.com/workshop/default.asp

例えば、次の例では ABC という ID（もしくは NAME）を持つ img 要素の各パラメータを表示します。

<html>
<head>
<title>テスト</title>
<script type="text/javascript">
<!--
function func() {
  alert("tagName=" + document.all.abc.tagName +
       " id=" + document.all.abc.id +
       " src=" + document.all.abc.src +
       " width=" + document.all.abc.width +
       " height=" + document.all.abc.height);
}
// -->
</script>
</head>
<body>
<img id="ABC" src="xx.gif" width=20 height=20 alt="xx">
<input type="button" value="OK" onclick="func()">
</body>
</html>

ID（NAME）を変数で指定するには次のようにします。

id = "ABC";
document.all.item(id);

同じ ID（NAME）を持つ要素が複数存在する時は次のようにしてアクセスします。要素が単一のときと複数の時でアクセス方法を変更する必要があるので注意してください。

var srclist = "";
var id = "ABC";
if (document.all.item(id).length) {
   for (i = 0; i < document.all.item(id).length; i++) {
      srclist += document.all.item(id, i).src;
      srclist += " ";
   }
} else {
   srclist += document.all.item("ABC").src;
}
alert(srclist);

IMG などのタグ名を用いてアクセスすることもできます。この場合は、要素が単一の時も複数の時も同じようにアクセス可能です。

var srclist = "";
for (i = 0; i < document.all.tags("IMG").length; i++) {
    srclist += document.all.tags("IMG")(i).src;
    srclist += " "
}
alert(srclist);

また、全ての要素の配列 all(n) を用いる方法もあります。

var taglist = "";
for (i = 0; i < document.all.length; i++) {
   taglist += document.all(i).tagName;
   taglist += " ";
}
alert(taglist);

ドキュメント中の要素の配列です。id には各要素の ID 属性や NAME 属性で指定した名前を指定してください。

obj = document.all.ABC;
for (i = 0; i < document.all.length; i++) {
    obj = document.all(i);
}

ドキュメント中の要素、もしくは要素の配列です。id には各要素の ID 属性や NAME 属性で指定した名前を指定してください。対象要素が複数の時と単数の時でアクセス方法が異なるので注意してください。

obj = document.all.item("ABC");
if (document.all.item(id).length) {
   for (i = 0; i < document.all.item(id).length; i++) {
      obj = document.all.item(id, i);
   }
} else {
   obj = document.all.item(id);
}

ドキュメント中の要素の配列です。tag にはタグ名を指定してください。

for (i = 0; i < document.all.tags("IMG").length; i++) {
    obj = document.all.tags("IMG")(i);
}

スタイルオブジェクトを示します。下記の例ではドキュメント中のすべての H1 要素の色を変更します。

for (i = 0; i < document.all.tags("H1").length; i++) {
   elm = document.all.tags("H1")(i);
   elm.style.color = "#FF0000";
}

この要素の中の文字列、あるいはHTMLソースを示します。この値に文字列を代入することにより、要素の中身をダイナミックに変更することができます。

<script type="text/javascript">
<!--
function func() {
    document.all.ABC.innerHTML = "<b>おやすみ</b>";
}
// -->
</script>
<div id="ABC">おはよう</div>
<button onclick="func()">OK</button>

tagName はタグの名前、title、className、id、lang、language はそれぞれ、title、class、id、lang、language 属性に対応する値を示します。

ひとつ親の要素を示します。

要素をクリックしたことにします。

改訂版初版：2001年5月20日

http://www.tohoho-web.com/js/element.htm

エレメント（Element）

■ 一覧

■ IE4.0のダイナミックHTML

■ 要素オブジェクト