ドムとは何ですか?
ドキュメント オブジェクト モデル (DOM) は、拡張可能なマークアップ言語を処理するために W3C 組織によって推奨されている標準プログラミング インターフェイスです。ドキュメント オブジェクト モデルの歴史は、1990 年代後半の Microsoft と Netscape の間の「ブラウザ戦争」に遡ります。JavaScript と JScript で生死をかけて競争するために、両当事者はブラウザに強力な機能を大規模に提供しました。 Microsoft は、VBScript、ActiveX、Microsoft 独自の DHTML 形式など、多くの独自機能を Web テクノロジに追加しているため、多くの Web ページが Microsoft 以外のプラットフォームやブラウザを使用して適切に表示できなくなります。 DOMはその時に醸造された最高傑作です。
DOM (Document Object Model) は、HTML と XML のアプリケーション プログラミング インターフェイス (API) です。 DOM は、ページ全体をノード レベルで構成されるドキュメントに計画します。
いわゆるドキュメント オブジェクト モデルは、実際には、Web ページの HTML 内のヘッダー、段落、リスト、スタイル、ID などのさまざまな要素の内部表現です。すべての要素は DOM を通じてアクセスできます。 。
JavaScript は最終的に HTML ページを操作して Html を DHtml に変換する必要があり、DOM は Html ページを操作するために必要です。 DOM は HTML ページをオブジェクトにシミュレートします。JavaScript が一部の計算、ループなどの操作を実行するだけで、HTML を操作できない場合、その存在の意味が失われます。
DOM は HTML ページのモデルであり、JavaScript は DOM のプロパティとメソッドを呼び出すことで、Web ページ内のテキスト ボックス、レイヤー、その他の要素をプログラムで制御できます。たとえば、テキスト ボックスの DOM オブジェクトを操作することで、テキスト ボックスの値を読み取って設定できます。
JavaScriptはページ内のすべてのHTML要素を変更できます
JavaScriptはページ内のすべてのHTML属性を変更できます
JavaScriptはページ内のすべてのCSSスタイルを変更できます
JavaScriptはページ内のすべてのイベントに反応できます
検索HTML 要素
通常、JavaScript では HTML 要素を操作する必要があります。
これを行うには、まず要素を見つける必要があります。これを行うには 3 つの方法があります:
ID で HTML 要素を検索する
タグ名で HTML 要素を検索する
クラス名で HTML 要素を検索する
DOM 内で HTML 要素を検索する最も簡単な方法は、要素 ID を使用することです。 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<head>
<body>
<div id="div1">
<p id="p1">
我是第一个P</p>
<p id="p2">
我是第二个P</p>
</div>
<script>
window.onload = function () {
var str = document.getElementById("p1").innerHTML;
alert(str); //弹出 我是第一个P
}
</script>
</body>
</html>タグ名で HTML 要素を検索
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<head>
<body>
<div id="div1">
<p id="p1">
我是第一个P</p>
<p id="p2">
我是第二个P</p>
</div>
<script>
window.onload = function () {
var str = document.getElementsByTagName("p")[1].innerHTML;
alert(str); //输出 我是第二个P，因为获取的是索引为1的P，索引从0开始
}
</script>
</body>
</html>
クラス名で HTML 要素を検索
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<head>
<body>
<div id="div1">
<p id="p1" class="class1">
我是第一个P</p>
<p id="p2">
我是第二个P</p>
</div>
<script>
window.onload = function () {
var node = document.getElementsByClassName("class1")[0];
alert(node.innerHTML);
}
</script>
</body>
</html>次のセクション