HTML DOM アクセス
HTML DOM にアクセス - HTML 要素を検索します。
HTML 要素 (ノード) へのアクセス
HTML 要素へのアクセスは、ノードへのアクセスと同じです
次のさまざまな方法で HTML 要素にアクセスできます。メソッド
getElementsByClassName() メソッドを使用する
- getElementById() メソッド
- getElementById() メソッドは、指定された ID を持つ要素を返します: Syntax
node
.getElementBy Id ("ID "
); 次の例では、id="intro" の要素を取得します。
インスタンス
<html><!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementById</b> method!</p>
<script>
x=document.getElementById("intro");
document.write("<p>The text from the intro paragraph: " + x.innerHTML + "</p>");
</script>
</body>
</html>インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします getElementsByTagName() メソッド
getElementsByTagName() は、指定されたタグ名を持つすべての要素を返します。
getElementsByTagName() は、指定されたタグ名を持つすべての要素を返します。
Syntax
node
.getElementsByTagName("tagname"
); 次の例は、ドキュメント内のすべての <p> 要素を含むリストを返します。
次の例は、ドキュメント内のすべての <p> 要素を含むリストを返します。これらの <p> 要素は、要素の子孫である必要があります。 id="main" の場合 (子、孫など): 走るインスタンス »オンラインの例を表示するには、[例を実行] ボタンをクリックしてください
インスタンス
インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
<html><!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
<script>
x=document.getElementsByTagName("p");
document.write("Text of first paragraph: " + x[0].innerHTML);
</script>
</body>
</html>インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
getElementsByClassName()メソッド
class="intro" を持つすべての HTML 要素に対して同じクラスを検索したい場合は、次のメソッドを使用してください:
注: getElementsByClassName () は Internet Explorer 5、6、7、8 では無効です。
document.getElementsByClassName("intro"); 上の例はリストを返します。 class="intro" を含むすべての要素:
注: getElementsByClassName () は Internet Explorer 5、6、7、8 では無効です。
