JavaScript HTML DOM
JavaScript HTML DOM
HTML DOM を通じて、JavaScript HTML ドキュメントのすべての要素にアクセスできます。
HTML DOM (ドキュメント オブジェクト モデル)
Web ページが読み込まれると、ブラウザーはページのドキュメント オブジェクト モデルを作成します。
プログラム可能なオブジェクト モデルを通じて、JavaScript は動(dòng)的な HTML を作成するのに十分な能力を獲得しました。
JavaScriptはページ內(nèi)のすべてのHTML要素を変更できます
JavaScriptはページ內(nèi)のすべてのHTML屬性を変更できます
JavaScriptはページ內(nèi)のすべてのCSSスタイルを変更できます
JavaScriptはページ內(nèi)のすべてのイベントに反応できます
HTML要素を検索します
通常、JavaScript では HTML 要素を操作する必要があります。
これを行うには、まず要素を見(jiàn)つける必要があります。これを行うには 3 つの方法があります:
ID で HTML 要素を検索する
タグ名で HTML 要素を検索する
クラス名で HTML 要素を検索する
ID で HTML 要素を検索する
DOM で HTML 要素を検索する最も簡(jiǎn)単な方法このメソッドは要素の ID を使用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="intro">你好世界!</p>
<p>該實(shí)例展示了 <b>getElementById</b> 方法!</p>
<script>
x=document.getElementById("intro");
document.write("<p>文本來(lái)自 id 為 intro 段落: " + x.innerHTML + "</p>");
</script>
</body>
</html>要素が見(jiàn)つかった場(chǎng)合、メソッドはその要素をオブジェクト (x 內(nèi)) として返します。
要素が見(jiàn)つからない場(chǎng)合、x には null が含まれます。
タグ名で HTML 要素を検索します
この例では、id="main" の要素を検索し、次に id="main" 要素內(nèi)のすべての <p> 要素を検索します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>你好世界!</p>
<div id="main">
<p> DOM 是非常有用的。</p>
<p>該實(shí)例展示了 <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一個(gè)段落為：' + y[0].innerHTML);
</script>
</body>
</html>クラス名で HTML 要素を検索します
この例では、getElementsByClassName 関數(shù)を使用して class="intro" を持つ要素を検索します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p class="intro">你好世界!</p>
<p>該實(shí)例展示了 <b>getElementsByClassName</b> 方法!</p>
<script>
x=document.getElementsByClassName("intro");
document.write("<p>文本來(lái)自 class 為 intro 段落: " + x[0].innerHTML + "</p>");
</script>
<p><b>注意：</b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
</body>
</html>
