エレメント（Element）

このページの記述は古いものです。エレメント(要素)に関する扱いに関しては DOM を参照してください。

要素オブジェクト
IE4.0のダイナミックHTML

要素オブジェクト

window.document.all.id

window.document.all(n)

window.document.all.length

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

JavaScript

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

window.document.all.item(id)

window.document.all.item(id, n)

window.document.all.item(id).length

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

JavaScript

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

window.document.all.tags(tag)

window.document.all.tags(tag)(n)

window.document.all.tags(tag).length

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

JavaScript

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

element.style

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

JavaScript

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

element.innerHTML

element.innerText

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

HTML

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

element.tagName

element.title

element.className

element.id

element.lang

element.language

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

element.parentElement

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

element.click()

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

IE4.0のダイナミックHTML

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

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

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

HTML

<!DOCTYPE html>
<html>
<head>
<title>テスト</title>
<script>
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 を変数で指定するには次のようにします。

JavaScript

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

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

JavaScript

var srclist = "";
var id = "ABC";
if (document.all.item(id).length) {
  for (var 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 などのタグ名を用いてアクセスすることもできます。この場合は、要素が単一の時も複数の時も同じようにアクセス可能です。

JavaScript

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

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

JavaScript

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

改訂版初版：2008年7月19日、最終更新：2008年7月19日

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