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