HTML DOM学習
：ミラー王漁陽
Eメール：[email protected]
ブログのホームページます。https：//www.cnblogs.com/wangyuyang1016/
DOMドキュメントオブジェクトモデル
DOMは、単にドキュメントオブジェクトモデルで、HTMLページがロードされるときにHTMLページをDOM作成されます。
JavaScriptを "右"：
- 変更ページ（DOM）は、HTML要素を使用しました
- HTML属性で使用されるページ（DOM）を変更
- 使用されたページのDOMのCSSスタイルを変更します
- 追加/ HTML DOM要素、属性、およびCSSスタイル属性で使用されると削除
- すべての既存のHTMLイベントのページに対応するため、
- あなたはDOM HTMLで新しいイベントを作成することができます
DOMの特徴：
- HTMLページ全体のドキュメントは、ドキュメントノード（一つだけ<HTML>ルート要素があります）
- 内の各HTMLタグ要素ノード
- 要素内の各HTMLテキストはテキストノード
- 各HTMLコンテンツの属性がある属性ノード
- コメントノード属しノートの内容
DOMノード：
doucument文書ノード、ルート、親HTMLドキュメント、DOMドキュメントelement要素は、ノード、要素ノードは、自身の属性ノードを持っていますattr属性ノード、要素に親ノードとしてtextテキスト・ノードは、別個のノードとして存在してもよく、エンドノードでありますconmmentコメントノード、HTMLコメントのクラス情報の解釈
ドキュメントオブジェクト
要素オブジェクトを取得します：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>I love HCIT</h3>
<div id="info" class="bd">
<h2>Hello,World!</h2>
<h3>I'am Mirror王宇阳 is student</h3>
</div>
<script>
var id = document.getElementById("info");
var tag= document.getElementsByTagName("h3");// 全局
var idtag = id.getElementsByTagName("h3"); // div_info标签中的h3
var classt = document.getElementsByClassName("bd");
console.log(id);
console.log(tag[0]);
console.log(idtag[0].innerHTML);
console.log(classt);
console.log(classt[0].innerHTML);
</script>
</body>
</html>
document.getElementsById（）
- 戻り値の要素は、タグIDの名前を指定します
document.getElementsByName（）
- 戻り値の要素は、ラベル名の名前を指定します
document.getElementsByTagName（）
- 指定されたタイプの名前タグの要素を返します。
document.getElementsByClassNam（）
- 戻り値の要素は、ラベルクラスの名前を指定します
要素オブジェクトのラベルを取得するには、上記の4つの一般的な方法で、絶対的な独自性を持っていません
我々は要素オブジェクトのラベル要素、メソッドが返すすべてのコンテンツを取得するときは、リターンの配列を見ています
私たちは、配列の添字の方法を使用する必要がある唯一の要素を読んで取得します
：さらに、我々のような、調節および制御するための要素ラベル取得のノードとの間の関係を使用することができ
、次に我々が使用する、我々がDIVテーブルにタグ番目の要素を取得したもの
次に、全て番目のタグを取得するためにgetElementsByTagNameの（）メソッドをHTMLページには、番目のタグが取得される無数の
私たちは、目標divタグの位置を特定するためにgetElenemtsByIdを（）を使用することができ、その後、getElementsByTagNameの（）メソッドは、番目のタグ要素を取得することによって、
プロパティW Object要素：
innerHTMLプロパティ
- 要素の内容に含まれるテキストおよびHTMLコードを表します
innerText
- これは、開始タグと終了タグの間にプレーンテキストを表し
outerHTML
- HTMLタグ自体を含む全体のDOMノードのテキストコンテンツ、
outerText
- これは、開始タグと終了タグの間にプレーンテキストを表し
DOMオブジェクトノードの動作：
ノードを作成します
createElement（）：要素ノードを作成します
新しいノードオブジェクトの参照パラメータが作成された要素ノードのラベルの名前で返します。
var newElement = document.createElement("a"); // 创建一个<a>标签元素节点createTextNode（）：テキストノードを作成します。
新しいノードオブジェクトの参照パラメータが文字列で返しますとテキストノードを追加します
var newText = document.createTextNode("百度一下");//创建一个baidu文本节点createAttributeを（）：属性ノードを作成します
新しいノードのオブジェクト参照を返し、パラメータは、新しいノードの属性名です。
属性ノードは親ノードクラスのノード要素要素に要求する必要があります
var newAttr = document.createAttribute("href"); //创建一个color属性节点
newAttr.value = "http://www.baidu.com";ノードの追加
appendChild（）
新しいノードを追加する方法は、テール・ノード、子ノードオブジェクトパラメータが新たに追加された所属します。
要素ノードを追加するため、テキスト・ノード
newElement.appendChild(newText);// newElement节点添加文本节点newText
document.body.appendChild(newElement);// body标签中添加newElement节点setAttributeNodeを（）
新しい属性ノードは、ノード内のプロパティのsetメソッド、新しく追加された子ノードオブジェクトのパラメータに属し追加します。
newElement.setAttributeNode(newAttr);//newElement添加newAttr属性节点insertBefore（）
insertBefore(node1,node2);新しいノードは、ノードの子を属するノード2の方法として、フロントノード1と反対側のノードに挿入され、
[ノードの削除
removeChild（）
削除ノード、ノード・パラメータは、ノードを削除する必要があり、このプロセスの関連するノードオブジェクトは、ノードの親ノードであります
element.removeChild(node);交換用ノード
replaceChild（）
element.replaceChild(node1,node2);ノード2ノード1ノード元ノードを交換し、このプロセスの関連するノードオブジェクトは、ノードの親ノードであります
コピーノード
cloneNodeを（）
ノード割り当て、ノードが参照コピーを返します。パラメータは、そのノードのヨーヨークローンの子かどうかを示すブール値、真/偽です。
element.cloneNode(bool);戻り値は、ノードのクローンであります
var node = newElement.cloneNode(true); //复制一个节点ナビゲーションノード
firstChild ：最初の子ノード対象コンテンツを返します。
console.log(d1.firstChild.innerHTML);lastChild ：最後の子ノードオブジェクトの内容を返します。
console.log(d1.lastChild.innerHTML);parentNode ：親オブジェクトの子ノードを返します。
console.log(d1.parentNode);childNodes ：すべての子ノードオブジェクトのコレクションを返します。
console.log(d1.childNodes)
console.log(d1.childNodes.length)children ：オブジェクトのオブジェクト要素の子セットを返します。
console.log(d1.children)
console.log(d1.children.length);nodeType 戻り値：ノードタイプ（1- 3-テキストノード要素ノード）
for (var i = 0 ; i < demo.childNodes.length ; i++) {
if (demo.childNodes[i].nodeType == 3) {
textNode ++;
} else if(demo.childNodes[i].nodeType == 1){
elementNode ++;
}
}DOMイベント
イベントのトリガ
| イベントのプロパティ | イベントの説明 | トリガー |
|---|---|---|
| onblur | フォーカスを失ったとき | キーボード、マウス、ブラー方法 |
| ONFOCUS | フォーカスを持っています | キーボード、マウス、フォーカス方式 |
| onchange | ときに内容を変更します | キーボード、マウス、割り当て |
| onclickの | ときに、マウスをクリックしてください | キーボード、マウス、クリックする方法 |
| れるondblclick | マウスのダブルクリック | マウス |
| onkeydownを | キーボードを押して | キーボード |
| onkeypressでは | キーボードのキー（プレス/リリース） | キーボード |
| onkeyupの | キーボードを持ち上げ | キーボード |
| れるonmousedown | マウスが押されました | マウス |
| れるonmousemove | マウスが移動した場合 | マウス |
| onMouseUpの | マウスを持ち上げたとき | マウス |
| ONMOUSEOUT | マウスが移動した場合 | マウス |
| onmouseover属性 | マウスが移動した場合 | マウス |
| onloadイベント | ロードされたとき | システム |
| onSubmit | フォームが送信されると | キーボード、マウス、方法書を提出 |
| onreset | フォームがリセットされた場合 | キーボード、マウス、リセット方法 |
イベントオブジェクトのプロパティ
イベントは、イベントオブジェクトを生成しますが発生した場合役割だったときに、イベントオブジェクトは、重要な情報の記録イベントを取得するために使用されます
| プロパティ | 説明 | 条件 |
|---|---|---|
| altKeyの、ctrlKey、shiftKey | あなたは、Altキー、Ctrlキー、Shiftキーを押しました | キーボードとマウス |
| ボタン | マウスボタンが押されると | マウス |
| キーコード | キーボードのキーは、値をUnicodeのとき | キーボード |
| clientX、clientYプロパティ | ウィンドウ領域でマウスの座標を持っています | マウス |
| offsetX、offsetY | トリガ事象に対するマウス座標 | マウス |
| srcElement | によってトリガ・イベント | イベント |