エレメント(Element)

[up] [prev] [next]

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

目次

class="i">

要素オブジェクト

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 文書内のすべての要素にアクセスし、変更する機能を備えています。詳細な仕様は説明は以下のページに紹介されています。

例えば、次の例では 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);

[up] [prev] [next]
Copyright (C) 1996-2001 杜甫々
改訂版初版:2008年7月19日
http://www.tohoho-web.com/js/element.htm