JavaScript高度なプログラミングDOM学習メモ_JavaScriptスキル-jsチュートリアル-php.cn

第 10 章 DOM
DOM は XML および HTML ドキュメント用の API です。DOM はテキストノード操作の属性とメソッドを指定し、特定の実装はそれぞれのブラウザによって実装されます。
1. ノード階層
1) ドキュメントノード: ドキュメント、各ドキュメントのルートノード。
2) ドキュメント要素: 要素はドキュメントの最も外側の要素であり、ドキュメントノードの最初の子ノードです。
3) ノードタイプ:
①ノードは、DOM 内のさまざまなノードタイプの基本タイプであり、同じ基本プロパティとメソッドを共有します。
□ Node.Element_NODE(1);
□ Node.ATTRIBUTE_NODE(2);
□ Node.CDATA_SECTION_NODE(4); ENTITY_REFERENCE_NODE(5);
□ Node.ENTITY_NODE(6);
□ Node.COMMENT_NODE(9); 🎜>□ Node.DOCUMENT_TYPE_NODE(10);
□ Node.DOCUMENT_FRAGMENT_NODE(11);
□ Node.NOTATION_NODE(12); 各ノードのノードタイプ属性は、次のいずれかを返します。定数。
ノードタイプは、nodeType 属性と数値を比較することで取得できます。
②nodeName属性とnodeVlue属性。
③childNodes属性には各ノードの子ノード情報が格納され、childNodes属性にはNodeListオブジェクトが格納されます。
□ NodeList オブジェクトは配列のようなオブジェクトであり、長さ属性を持ちますが、Array のインスタンスではありません。
□ NodeList 内のノードにアクセスするには、角括弧を使用するか、item() メソッドを使用します。
var firstChild = someNode.ChildNodes[0];
var SecondChild = someNode.ChildNodes.item(1);
var count = someNode.childNodes.length;
□ NodeList を配列オブジェクトに変換します。
function ConvertToArray(nodes){
var array = null;
try{
array = Array.prototype.slice.call(nodes,0); //非 IE
} (例){
array = new Array();
for(var i = 0,len = nodes.length; i array.push(nodes[i]);
}
}
return array;
}
④parentName 属性: ドキュメントツリー内の親ノードを指します。 ⑤previousSibling 属性と nextSibling 属性: 前/次の兄弟ノード。
⑥firstChild 属性と lastChild 属性: 前/次の子ノード。
⑦hasChildNodes() メソッド: 子ノードが含まれる場合は true を返し、それ以外の場合は false を返します。
⑧appendChild() メソッド: childNodes リストの末尾に子ノードを追加し、新しく追加されたノードを返します。
⑨insertBefore() メソッド: 2 つのパラメーター: 挿入されるノードと参照として使用されるノード。新しく追加されたノードを返します。
⑩replaceChild() メソッド: 2 つのパラメーター: 挿入されるノードと置換されるノード。新しく追加されたノードを返します。
⑾removeChild()メソッド: ノードを削除します。
⑿cloneNode() メソッド: ブール値を受け入れます。 true はディープコピー、ノードとサブノードのコピーを意味します。 false は浅いコピーを意味し、自分のノードのみをコピーします。
⒀nomalize() メソッド: ドキュメントツリー内のテキストノードを処理します。
4) ドキュメントタイプ（ドキュメントオブジェクトの場合）
①ドキュメントタイプは、HTMLDocument タイプのインスタンスであり、HTML ページ全体を表すドキュメントを表します。ドキュメントオブジェクトはウィンドウオブジェクトのプロパティであり、グローバルオブジェクトとしてアクセスできます。
②documentElement 属性。この属性は常に HTML ページ内の
要素を指します。
③body 属性は、
要素を直接指します。
④doctype 属性: さまざまなブラウザでサポートされている
にアクセスします。用途が限られています。
⑤title属性：タイトルのテキストを取得・設定できます。 ⑥URL属性：アドレスバーのURL。
⑦domain属性：ページのドメイン名（設定可能、制限あり）

⑧referrer属性：現在のページにリンクしているページのURLを保存
⑨getElementById()メソッド：IDを渡す要素を取得し、要素ノードを返します。 ⑩getElementsByTagName() メソッド: 要素名を渡して NodeList を返します。
□ NodeList と同様に、HTML 内の HTMLCollection オブジェクトを返します。
□ HTMLCollection オブジェクトにアクセスします: 角かっこ構文、item() メソッド、namedItem() メソッド。HTMLCollection オブジェクトは、要素の name 属性を通じてコレクション内の項目を取得することもできます。
⑾getElementsByName() メソッド: 指定された name 属性を持つすべての要素を返します。
⑿特別なコレクション。これらのコレクションは HTMLCollection オブジェクトです。
□ document.anchors: ドキュメント内の name 属性を持つすべての
要素が含まれます。
□ document.applets: ドキュメント内のすべての
要素が含まれます。
□ document.forms: ドキュメント内のすべての
要素が含まれます。
□ document.images: ドキュメント内のすべての要素が含まれます。
□ document.links: ドキュメント内の href 属性を持つすべての要素が含まれます。
⒀DOM 整合性検出: document.implementation 属性は、オブジェクトに対応する情報と機能を提供します。

□ このオブジェクトには 1 つのメソッドがあります: hasFeature(): 2 つのパラメータ: 検出される DOM 機能の名前とバージョン番号。
□ 機能: コア、XML、HTML、ビュー、スタイルシート、CSS、CSS2、イベント、UIEvents、MouseEvents、MutationEvents、HTMLEvents、Range、Traversal、LS、LS-Async、Validation JavaScript高度なプログラミングDOM学習メモ_JavaScriptスキル