目次
DOMの概要
HTML DOM は次のとおりです。
- HTMLの標準オブジェクトモデル
- HTML 用の標準プログラミング インターフェイス
- W3C標準
HTML DOM は、すべての HTML 要素のオブジェクトとプロパティ、およびそれらにアクセスするメソッドを定義します。
つまり、HTML DOM は、HTML 要素を取得、変更、追加、削除する方法の標準です。
DOMノード
HTMLドキュメント内のすべてがノードです。
- ドキュメント全体がドキュメント ノードです
- 各 HTML 要素は要素ノードです
- HTML要素内のテキストはテキストノードです
- 各 HTML 属性は属性ノードです
- アノテーションはアノテーションノードです
DOMメソッド
プログラミングインターフェース
HTML DOM には、JavaScript (および他のプログラミング言語) を通じてアクセスできます。
すべての HTML 要素はオブジェクトとして定義され、プログラミング インターフェイスはオブジェクト メソッドとオブジェクト プロパティです。
メソッドは、実行できるアクション (要素の追加や変更など) です。
プロパティは、取得または設定できる値です (ノードの名前やコンテンツなど)。
HTML DOM オブジェクト - メソッドとプロパティ
一般的に使用される HTML DOM メソッドのいくつかは次のとおりです。
- getElementById(id) -指定された ID を持つノード (要素) を取得します
- appendChild(node) -新しい子ノード (要素) を挿入します。
- RemoveChild(node) -子ノード（要素）を削除します。
よく使用される HTML DOM 属性のいくつかは次のとおりです。
- innerHTML -ノード（要素）のテキスト値
- parentNode -ノード (要素) の親ノード
- childNodes -ノード (要素) の子
- 属性 -ノード (要素) の属性ノード
DOMプロパティ
ドキュメント直接属性
var html = document.documentElement; //取得对<body>元素的引用
var body = document.body; //取得对<body>元素的引用
var originalTitle = document.title; //返回当前文档的标题
var url = document.URL; //返回当前文档完整的URL
var domain = document.domain; //返回当前文档的域名
var referrer = document.referrer; //返回链接到当前页面的源页面的URL
var lastModified = document.lastModified; //返回当前文档最后被修改的日期和时间
var cookie = document.cookie; //返回与当前文档相关的所有cookieinnerHTML プロパティ
要素のコンテンツを取得する最も簡単な方法は、innerHTML 属性を使用することです。
var txt=document.getElementById("intro").innerHTML;
document.write(txt);ノード名属性
nodeName属性はノードの名前を指定します。
- ノード名は読み取り専用です
- 要素ノードのnodeNameはラベル名と同じです
- 属性ノードのnodeNameは属性名と同じです。
- テキストノードのnodeNameは常に#textです
- ドキュメントノードのnodeNameは常に#documentです。
ノード値プロパティ
nodeValue属性はノードの値を指定します。
- 要素ノードのnodeValueが未定義またはnullです
- テキストノードのnodeValueはテキストそのものです
- 属性ノードのnodeValueは属性値です
var el =document.getElementById("intro");
document.write(el.firstChild.nodeValue);ノードタイプ属性
nodeTypeプロパティはノードのタイプを返します。nodeType は読み取り専用です。
より重要なノード タイプは次のとおりです。
| 要素の種類 |
ノードタイプ |
| 要素 |
1 |
| 属性 |
2 |
| 文章 |
3 |
| コメント |
8 |
| 書類 |
9 |
DOMアクセス
HTML 要素へのアクセスは、ノードへのアクセスと同等です。
HTML 要素にはさまざまな方法でアクセスできます。
- getElementById() メソッドを使用する
- getElementsByTagName() メソッドを使用する
- getElementsByClassName() メソッドを使用する
document.getElementById("intro");
document.getElementsByTagName("p");
document.getElementById("main").getElementsByTagName("p");
document.getElementsByClassName("intro");DOM –変更
HTML要素を変更する
要素のコンテンツを変更する最も簡単な方法は、innerHTML 属性を使用することです。
document.getElementById("p1").innerHTML="新しいテキスト!";
CSS スタイルを変更する
document.getElementById("p2").style.color="青";
DOM -要素
新しい HTML 要素の作成 - appendChild()
var newEl=document.createElement("p");
var node=document.createTextNode("This is new.");
newEl.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(newEl);insertBefore()
var child=document.getElementById("p1");
element.insertBefore(para,child);既存の HTML 要素を削除する
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);HTML要素を置換する
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);DOM -イベント
HTML DOM を使用してイベントをディスパッチする
document.getElementById("myBtn").onclick=function(){displayDate()};onload および onunload イベント
ユーザーがページに出入りすると、onload イベントと onunload イベントがトリガーされます。
onload イベントを使用して訪問者のブラウザの種類とバージョンを確認し、この情報に基づいて Web ページのさまざまなバージョンを読み込むことができます。
onload イベントと onunload イベントを使用して Cookie を処理できます。
<body onload="checkCookies()">変更時イベント
onchangeイベントは、入力フィールドの検証によく使用されます。
<input type="text" id="fname" onchange="upperCase()">onmouseover および onmouseout イベント
onmouseoverイベントと onmouseout イベントを使用すると、マウス ポインターが要素に近づいたり要素から離れたりしたときに関数をトリガーできます。
<div onmouseover="mOver(this)" onmouseout="mOut(this)">正常</div>
<script>
function mOver(obj) { obj.innerHTML="鼠标来也" }
function mOut (obj) { obj.innerHTML="鼠标去也" }
</script>注: この記事は W3Scholl から参照されています。リンク: http://www.w3school.com.cn/htmldom/index.asp