JavaScript高度なプログラミングDOM学習メモ_JavaScriptスキル

第 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 ⒁出力ストリーム Web ページを作成する: write()、writeln()、open()、および close()。
5) 要素タイプ ① は XML または HTML 要素を表すために使用され、要素のタグ名、サブノード、および属性へのアクセスを提供します。
②nodeName属性またはtagName属性を使用して要素のタグ名にアクセスできます。 tagName は、HTML では大文字のタグ名を返しますが、XML では変更されません。
(1) HTML 要素
■すべての HTML 要素は、Element 型のサブクラスである HTMLElement 型で表され、次の属性を持ちます。
□id: 文書内の要素の一意の識別子。
□title: 要素に関する追加の説明情報。通常はツールチップバーを通じて表示されます。
□lang: 要素コンテンツの言語コード。めったに使用されません。
□dir: 言語の方向。値は "ltr" または "rtl" で、ほとんど使用されません。
□className: 要素の class 属性に対応します。要素に指定された CSS クラスです。
上記の属性は、対応する特性値を取得または変更するために使用できます。
(2) 属性の取得
①getAttribute()メソッド：認識された属性とカスタム属性の値を取得できます。
□任意の要素のすべてのプロパティには、DOM 要素自体の属性を通じてアクセスすることもできます。 alert(div.id);alert(div.align);
□認識された (非カスタム) 機能のみが属性の形式で DOM オブジェクトに追加されます。
□style 属性は、getAttribute() を通じて属性値 CSS テキストにアクセスします。オブジェクトにはプロパティを通じてアクセスします。
□onclick 属性: getAttribute()、JS コード文字列を返します。プロパティアクセス経由で関数を返します。
□通常、属性は属性を通じて取得されます。カスタム属性値を取得する場合にのみ、getAttribute() を使用します。
(3) 属性の設定
①setAttribute(): 設定する属性の名前と値の 2 つのパラメータ。属性がすでに存在する場合、setAttribute() は既存の値を指定された値に置き換えます。属性が存在しない場合、setAttribute() は属性を作成し、対応する値を設定します。
□このメソッドは、HTML 属性とカスタム属性の両方を操作できます。
□認識された特性はすべて属性であるため、属性に値を直接割り当てることで属性の値を設定できます。
□IE6 および IE7 では、setAttribute() でクラスとスタイルを設定しても、イベント ハンドラーは効果がありません。ただし、プロパティを通じて特性を設定することはお勧めできません。
②removeAttribute(): 要素の属性を完全に削除します(IE6では未サポート)。
(4) 属性 属性
① この属性には、NameNodeMap オブジェクト (NodeList に似た「動的」コレクション) が含まれます。要素の各属性は Attr ノードで表され、各ノードは NameNodeMap オブジェクトに格納されます。
□getNameItem(name):nodeName 属性が name と等しいノードを返します。
□removeNameItem(name):nodeName 属性が name と等しいノードをリストから削除します。
□setNameItem(node): ノードのnodeName属性をインデックスとして使用して、ノードをリストに追加します。
□item(pos): デジタル pos 位置にあるノードを返します。
(5) 要素の作成
① document.createElement() メソッドを使用して、新しい要素を作成します。パラメータ: タグ名。
② IE の createElement() は、IE7 および IE6 の問題を防ぐために完全な要素タグを渡すことができます。
□ は、動的に作成された ");
(6) 要素子ノード
① 要素の childNode 属性には、すべての子ノード (要素、テキスト ノード、コメント、または処理命令) が含まれます。
□一般的なブラウザは、childNodes を解析するときに、要素ノード空間内の空白文字をテキスト ノードに解析しますが、IE は解析しません。したがって、トラバーサル実行操作では、nodeType 属性を確認する必要があります。
For(var i= 0, len = element.childNode.length; i> len; i ){
If(element.childNodes[i].nodeType == 1){
//何かを実行する一部の操作
}
}
□Element ノードは getElementByTagName() メソッドをサポートしています。
6) テキスト型
①テキストノードはテキスト型で表され、HTML コードを含まないプレーンテキストのコンテンツが含まれます。
□子ノードはサポートしません (いいえ)
□nodeValue 属性と data 属性は、Text ノードに含まれるテキストにアクセスできます。
②操作テキストノード
□appendData(text): ノードの末尾にテキストを追加します。
□deleteData(offset,count): offset 位置から count 文字を削除します。
□insertData(offset,text): オフセット位置にテキストを挿入します。
□replaceData(offset,count,text): offset で指定された位置から始まる文字列を offset count に置き換えます。
□splitText(offset): offset で指定された位置から現在のテキスト ノードを 2 つのテキスト ノードに分割します。
□substringData(offset,count): offset で指定した位置から offset count までの文字列を抽出します。
□テキスト ノードには、ノード内の文字数を保存する長さ属性があります。同じ値がnodeValue.lengthとdata.lengthにも格納されます。
○テキスト ノードの値を変更する場合、文字列は HTML エンコードされ、特殊記号はエスケープされます。
div.firstChild.nodeValue = "Some
other"; //Output Someother > ③テキストノードの作成>
□document.createTextNode()を使用して新しいテキストノードを作成します。パラメータ：挿入するテキスト（HTMLまたはXML形式に自動エンコード）
④正規化されたテキストノード
□DOM操作では同じ親要素に複数のテキストノードを挿入できますが、混乱が生じます。
□ノードタイプを通じて継承されたnormalize()メソッドは、同じ親要素上のすべてのテキストノードをマージできます。
⑤テキストノードの分割
□テキスト型メソッドsplitText()：ノードメソッドnormalize()とは逆に位置パラメータを渡し、その位置から2つのテキストノードに分割し、以下のテキストノードを返します。
□テキスト ノードの分割は、テキスト ノードからデータを抽出するための一般的な DOM 解析手法です。
7) コメント型
□コメント型はText型と同じ基底クラスを継承しているため、splitText()を除くすべての文字列操作メソッドを持ちます。
□コメントノードは document.createComment() を使用して作成できます。
8) CDATASection 型
□CDATASection 型は、XML ベースのドキュメントの CDATA 領域のみを表します。
□CDATASection 型は Text 型を継承しており、splitText() を除くすべてのメソッドを持ちます。
□すべての主要なブラウザは、このタイプを正しく解析できません。
9) DocumentType 型
□IE は
をサポートしていません□DocumentType オブジェクトは DOM レベル 1 で動的に作成できません。
□DocumentType オブジェクトは document.doctype に保存されます。
◇name属性: ドキュメントタイプの名前。
◇entities属性：文書型で記述されたエンティティのNamedNodeMapオブジェクト。
◇notation属性：文書型で記述されたシンボルのNamedNodeMapオブジェクト。
10) DocumentFragment タイプ
□DOM では、ドキュメント フラグメントはノードを含めて制御できる「軽量」ドキュメントであると規定されていますが、完全なドキュメントのように追加のリソースを占有することはありません。
□文書の断片を文書に追加することはできません。文書の断片のみが「ウェアハウス」に保存されたノードとして追加されます。
var フラグメント = document.createDomFragment();
var ul = document.getElementById("myList");
var li = null; ){
li = document.createElement("li"); li.appendChild(document.createTextNode("haha"));
fragment.appendChild(li); ul.appendChild.appendChild(li);
□ appendChild() または insertBefore() を使用して、ドキュメントフラグメントのコンテンツをドキュメントに追加できます。
11) 属性タイプ
□ はノードですが、属性は DOM ドキュメント ツリーの一部とみなされません。このようなノードはほとんど使用されません。
□Attr オブジェクトには 3 つの属性があります。
◇name 属性: 属性名 (nodeName など)
◇value 属性: 属性値 (nodeValue など)
◇指定された属性: ブール値。属性がコードで指定されているか、デフォルトであるかを区別します。
□ フィーチャーノードに直接アクセスすることはお勧めできません。 getAttribute()、
setAttribute()、removeAttribute() メソッドを使用することをお勧めします。 0

2. DOM 拡張
1. プレゼンテーション モード
①ドキュメント オブジェクトの compatMode 属性
□値は標準モードの「CSS1Compat」です。
□値は「BackCompact」、混合モードです。
②IE8 では、ドキュメント オブジェクトの新しい属性 documentMode が導入され、戻り値: 5 (混合モード)、7 (シミュレーション モード)、8 (標準モード)
2. スクロール
□スクロール メソッドはすべて HTMLElement 型です。拡張機能が存在し、要素ノードで使用できます。
□scrollIntoView(bool): ブラウザ ウィンドウまたはコンテナ要素をスクロールして、要素がビューポートに表示されるようにします。 (パラメータが true または省略されている場合は、一番上までスクロールします)。
□scrollIntoViewIfNeeded(bool): 現在の要素がビューポートに表示されていない場合、ブラウザ ウィンドウまたはコンテナ要素をスクロールするだけで、現在の要素が表示されます。 (Safari および Chrome の実装)。
□scrollByLines(lineCount): 要素のコンテンツを指定された行数だけスクロールします。 lineCount には正または負の数値を指定できます。 (Safari と Chrome で利用可能)
3. Children 属性
□ Children 属性には、要素の子ノードのうち、要素でもあるノードのみが含まれます。
□HTMLCollection オブジェクトとして。
□Firefox ではサポートされていません。IE の子コレクションにはコメント ノードが含まれます。
4. contains() メソッド
□ は、検索の開始点として祖先ノードで呼び出され、検出されるノードをパラメーターとして渡します。ノードを現在のノードの子孫として渡すには、true を返します。
□Firefox は contains() メソッドをサポートしておらず、DOM3 レベルで代替の CompareDocumentPosition() メソッドを実装して 2 つのノード間の関係を決定します。 2.x より前の Safari バージョンはサポートされていません。
さまざまなブラウザ コードと互換性があります:
function contains(refNode, otherNode){
if(typeof refNode.contains == "function" && (!client.engine.webkit || client.engin.webkit > =552)){
return refNode.contains(otherNode);
}else if(tyepof refNode.compareDocumentPosition == "function"){
return !!(refNode.compareDocumentPosition(otherNode)&16);
}else{
var node = otherNode.parentNode;
do{
if(node === refNode){
true を返す
}else{
ノード = ノード.parentNode;
}
}while(node !== null);
}
}
5.属性
□ノードドキュメントブック内のすべてのテキストを浅いところから深いところまで読み取ることができます。
□ inner.Text プロパティを通じてノード テキストを設定すると、以前に存在したすべての子ノードが削除され、DOM ツリーが完全に変更されます。
□この属性に割り当てられたテキストは、自動的に HTML エンコードされます。
□Firefox は innerText をサポートしていませんが、同様の機能で textContent 属性をサポートしています。
□innerText: IE、Safari、Opera、Chrome をサポート
□textContent: Safari、Firefox、Opera、Chrome をサポート
互換性のあるコード:
function getInnerText(element){
return (typeof element) .textContent == "文字列")?element.textContent:element.innerText;
}

function setInnerText(element, text){
if(typeof element.textContent == "string") {
element.textContent = text;
}else{
element.innerText = text;
}
}
②innerHTML 属性
□情報を読み込む場合、現在の要素を返しますすべての子ノードの HTML 表現。
□情報を書き込むと、指定された値に従って新しい DOM サブツリーが作成され、現在の要素のすべての子ノードがこのサブツリーに置き換えられます。
□innerHTML の制限: <script> 要素の挿入は実行されません。 <style> を挿入すると同様の問題が発生します。 <BR>□ すべての要素に innerHTML 属性があるわけではありません。サポートされていない要素は、<col>、<colgroup>、<frameset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot>、<title>、<tr> です。 。 <BR>③outerText 属性 <BR>□基本的に innerText と同じですが、情報を書き込むときに、含まれているノードが置き換えられる点が異なります。<BR>□Firefox ではサポートされていません。 <BR>④outerHTML 属性 <BR>□ は基本的に innerHTML と同じですが、情報を書き込む際に、それを含むノードが置き換えられる点が異なります。 <BR>□Firefox はサポートしていません <BR>□非推奨 <BR>⑤メモリとパフォーマンスの問題 <BR>□ innerText、innerHTML、outerText、outerHTML の子ノードの置換により、ブラウザでメモリの問題が発生する可能性があります。削除されたサブツリー内の要素によって設定されたイベント ハンドラー、または JS オブジェクトの値を持つプロパティはメモリ内にまだ存在します。 <BR>□ 大量の新しい HTML を挿入する場合、複数の DOM 操作を行うよりも HTML を使用する方がはるかに効率的です。 <BR>3. DOM 操作技術<BR>1. 動的スクリプト<BR>①外部ファイルを挿入します: <BR>function loadScript(url){ <BR>var script = document.createElement("script"); .type = "text/javascript"; <BR>script.src = url; <BR>document.body.appendChild(script); <BR>} <BR>②JavaScriptコードメソッドを指定<BR>□IE中将<BR> は特別な要素として扱われ、その子ノードへの DOM アクセスは許可されません。 <BR>互換メソッド: <script>functionloadScriptString(code){ <BR>var script = document.createElement("script"); <BR>try{ <BR> >script.appendChild(document.createTextNode(code)); <BR>}catch(ex){ <BR>script.text = code; <BR>document.body.appendChild(script); } <BR>2. 動的スタイル<BR>①外部リンク<BR>functionloadStyles(url){ <BR>var link = document.createElement("link"); <BR>link.rel = "stylesheet"; >link.href = url; <BR>var head = document.getElementsByTagName("head")[0]; <BR>head.appendChild(link); <BR>②<BR>要素を使用します。埋め込み CSS <BR>□IE は、<BR> を <BR> と同様の特別なノードとして扱い、その子ノードへのアクセスを許可しません。 <BR>□ <BR> 要素を再利用し、その styleSheet.cssText 属性を再度設定すると、ブラウザがクラッシュする可能性があります。 <BR>fucnctionloadStyleString(css){ <style>var style = document.createElement("style"); <BR>style.type = "text/css"; <style>try{ <script>style.appendChild(document) .createTextNode(css)); <BR>}catch(ex){ <style>style.styleSheet.cssText = css; <BR>} <BR>var head = document.getElementsByTagName("head"); 🎜>head.appendChild(style); <BR>} <BR>3. 操作表 <BR>① <BR> 要素に追加された属性とメソッド <BR>□caption: <BR> 要素を保存します (存在する場合)ポインタ; <BR>□tBodies: <BR> 要素の HTMLCollection です。 <BR>□tFoot: <BR> 要素へのポインタを保持します (存在する場合)。要素 (存在する場合); <BR>□rows: テーブル内のすべての行の HTMLCollection です。<table>□createTHead(): <BR> 要素を作成し、テーブルに配置し、参照を返します。 <caption>□createCaption(): <BR>□deleteTHead(): <tobdy>要素を削除します。 <BR>□deleteTFoot(): <tfoot>□deleteCaption(): <BR>□deleteRow(pos): <thead>□insertRow(pos): 行コレクション内の指定された位置に行を挿入します。 <BR>②<BR> 要素に追加される属性とメソッドは次のとおりです。 <thead>□rows: <BR> 要素内の行の HTMLCollection を保持します。 <BR>□deleteRow(pos): 指定された位置の行を削除します。<thead>□insertRow(pos): 行コレクション内の指定された位置に行を挿入し、挿入された行の参照を返します。 <BR>③<BR>要素に追加された属性とメソッド <BR>□cells:<BR>要素内のセルのHTMLCollectionを保存します; <BR>□deleteCell(pos):指定された位置のセルを削除します。 <tbody>□insertCell(pos): セル コレクション内の指定された位置にセルを挿入し、挿入されたセル参照を返します。 <BR>4. NodeList を使用する <tbody>□NodeList とその「近い関係」の NamedNodeMap (要素タイプの属性) および HTMLCollection は「動的」であり、ドキュメントの構造が更新されるたびに変更されます。 <BR>□ NodeList へのアクセス数を減らしてみてください。 NodeList にアクセスするたびに、ドキュメントベースのクエリが実行されるためです。 NodeList から取得した値をキャッシュすることを検討してください。 <BR><BR>第 11 章 DOM2 と DOM3 <tr>1. DOM の変更<BR>1. XML 名前空間の変更<tr>①ノード タイプの変更<BR>■DOM2 レベルでは、ノード タイプに次の名前空間が含まれます。特定のプロパティ。<BR>□localName: 名前空間プレフィックスのないノード名。 <BR>□namespaceURI: ネームスペース URI、指定されていない場合は null。 <BR>□prefix: 名前空間プレフィックス、指定されていない場合は null。 <BR>■DOM レベル 3 <BR>□isDefaultNamespace(namespaceURI): 現在のデフォルトの名前空間の場合、指定された名前空間 URI は true を返します。 <BR>□lookupNamespaceURI(prefix): 指定されたプレフィックスの名前空間を返します。 <BR>□lookupPrefix(namespaceURI): 指定された namespaceURI のプレフィックスを返します。 <BR>②文書型の変更 <BR>■DOM2 レベルで、名前空間に関連する <BR>□createElementNS(namespaceURI, tagName): 指定された tagName を使用して、名前空間 namespaceURI に属する新しい要素を作成します。 <BR>□createAttributeNS(namespaceURI,attributeName):<BR>□getElementBytagNameNS(namespaceURI,tagName):<BR>③要素型の変更 <BR>■DOM レベル 2 コア <BR>□getAttributeNS(namespaceURI, localName) <BR> □getAttributeNodeNS(namespaceURI, localName) <BR>□getElementsByTagNameNS(namespaceURI, localName) <BR>□hasAttributeNS(namespaceURI, localName) <BR>□removeAttributeNS(namespaceURI, localName) <BR>□setAttributeNodeNS(attrNode): セットに属します。 namespace namespaceURI の特性ノード。 <BR>④NamedNodeMap 型の変更点 <BR>□getNamedItemNS(namespaceURI, localName) <BR>□removeNamedItemNS(namespaceURI, localName) <BR>□setNamedItemNS(node): ノードを追加します。このノードは事前に名前空間情報を指定しています。 <BR>2. その他の変更点 <BR>①DocumentType 型の変更 <BR>□ publicId、systemId、internalSubset の 3 つの新しい属性を追加 <BR>□ publicId と systemId は、文書型宣言内の 2 つの情報セグメントを表します。 <BR>□internalSubset: 文書型宣言に含まれる追加定義にアクセスするために使用されます。 <BR>②ドキュメントタイプの変更 <BR>□importNode()メソッド: あるドキュメントからノードを取得し、それを別のドキュメントにインポートしてドキュメント構造の一部にします。 <BR>◇各ノードには、それが属するドキュメントを示す ownerDocument 属性があります。 <BR>◇appendChild() に渡されたノードは異なるドキュメントに属しているため、エラーが発生します。 <BR>◇importNode() メソッドは Element の cloneNode メソッドに非常に似ており、コピーされるノードと子ノードをコピーするかどうかを示すブール値の 2 つのパラメータを受け取ります。元のノードのコピーを返しますが、現在のドキュメントで使用できます。 <BR>□defaultView 属性: 指定されたドキュメントを所有するウィンドウ (またはフレーム) へのポインターを保存します。 <BR>◇IE はこの属性をサポートしていませんが、同等の属性parentWindowがあります。 <BR>◇ ドキュメントの所有権ウィンドウの互換性コードを決定します: <BR>varparentWindow = document.defaultView || document.parentWindow; <BR>□createDocuemntType(): ドキュメント タイプ名、publicId の 3 つのパラメータを受け入れて、新しい DocumentType ノードを作成します。 、システムID。 <BR>□createDocument()メソッド: 新しいドキュメントを作成します。 3 つのパラメーター: ドキュメント内の要素の namespaceURI、ドキュメント要素のタグ名、および新しいドキュメントのドキュメント タイプ。 <BR>□「DOM2 レベル HTML」モジュールは、createHTMLDocument() という新しいメソッドを document.implementation に追加します。タイトルのテキストのみをパラメータとして受け入れます。新しい HTML ドキュメントを返します。 <html>、<head>、<title>、<body> が含まれます。 <BR>③ノードタイプの変更 <BR>□isSupported()メソッド: DOM1レベルのdocument.implementationで導入されたhasFeature()メソッドと同様。現在のノードがどのような機能を持っているかを判断するために使用されます。 2 つのパラメーター: 機能名と機能バージョン番号。 <BR>□isSameNode() メソッド: ノードを渡し、参照ノードと同じノードの場合は true を返します。 <BR>□isEqualNode() メソッド: ノードを渡し、それが参照ノードと等しい場合に true を返します。 <BR>□setUserData()メソッド: ノードにデータを割り当てます。 3 つのパラメータ: 設定するキー、実際のデータ、および処理関数。 <BR>◇処理関数は、テーブル操作タイプの値 (1 コピー 2 インポート 3 削除 4 名前変更)、データキー、データ値、ソースノード、ターゲットノードの 5 つのパラメータを受け入れます。 <BR>var div = document.createElement("div"); <BR>div.setUserData("name","Nicholas",fucntion(operation, key, value, src, dest){ <BR>if(operation = = 1){ <BR>dest.setUserData(key, value); <BR>} <BR>}); <BR>④フレームの変更<BR>□フレームとインラインフレームはそれぞれ HTMLFrameElement と HTMLIFrameElement で表されます。 <BR>□contentDocument 属性: DOM2 レベルの中枠と内枠の新しい属性。このプロパティには、フレームのコンテンツを表すドキュメント オブジェクトへのポインターが含まれています。 <BR>□contentDocument 属性は Document タイプのインスタンスであるため、すべてのプロパティとメソッドを含め、他の HTML ドキュメントと同様に使用できます。 <BR>□IE8 は以前、フレーム内の contentDocument 属性をサポートしていませんでしたが、フレームのウィンドウ オブジェクトを返す contentWindow というプロパティをサポートしました。 <BR>□インライン フレーム ドキュメント オブジェクト互換コードにアクセスします: <BR>var iframe = document.getElementById("myIframe"); <BR>var iframeDoc = iframe.contentWindow.document || <BR>2.スタイル <BR>1. 要素のスタイルにアクセスします <BR>①style 属性 <BR>□style 属性をサポートする HTML 要素は、JS で対応する style 属性を持ちます。 <BR>□このスタイル オブジェクトは cssStyleDeclaration のインスタンスであり、style 属性で指定されたスタイルを含みます。 <BR>□style 属性で指定された CSS プロパティは、このスタイル オブジェクトの対応するプロパティとして表示されます。ダッシュを使用した CSS プロパティ名は、js を通じてアクセスできるようにする前に、キャメルケースに変換する必要があります。 float 属性を直接使用することはできません。 IEはstyleFloatを使用してアクセスし、その他のブラウザはcssFloatを使用してアクセスします。 <BR>□ 要素に style 属性が設定されていない場合、style オブジェクトにはいくつかのデフォルト値が含まれる可能性がありますが、これらの値は要素の正しいスタイル情報を反映しません。 <BR>②DOM スタイルの属性とメソッド <BR>1) DOM2 レベルでも、スタイル オブジェクトのいくつかの属性とメソッドが定義されています。属性値を指定するときにスタイルを変更することもできます。 <BR>□cssText: style 属性の CSS コードにアクセスします。 <BR>□length: 要素に適用される CSS 属性の数。 <BR>□parentRule: CSS情報を表すCSSRuleオブジェクト。 <BR>□getPropertyCSSValue(propertyName): 2 つのプロパティ cssText と cssValueType を含む、指定されたプロパティ値を含む CSSValue オブジェクトを返します。 <BR>□getProperytPriority(propertyName): 指定されたプロパティが ! important 設定を使用している場合は、「重要」を返し、それ以外の場合は空の文字列を返します。 <BR>□item(index): 指定された位置にある CSS プロパティの名前を返します。 <BR>□removeProperyt(propertyName): 指定されたプロパティをスタイルから削除します。 <BR>□setProperty(propertyName, value, priority): 指定されたプロパティを対応する値に設定し、優先度フラグ (「重要」または空の文字列) を追加します。 <BR>2) <BR>□を使用して長さ属性を設計する目的は、それを item() メソッドと組み合わせて使用​​することです。要素で定義された CSS プロパティを反復処理するため。 <BR>□Firefox、Safari、Opera9 以降、および chrome はすべて、これらのプロパティとメソッドをサポートしています。 IE は cssText のみをサポートします。 <BR>□getPropertyCSSValue() は、Safari と chrome でのみサポートされています。 <BR>③Computed style <BR>□ 「DOM2 レベルのスタイル」は document.defaultView を拡張し、getComputedStyle() メソッドを提供します。 <BR>□getComputedStyle(): 2 つのパラメータ: 計算されたスタイルを取得する要素と疑似要素文字列 (例: after)。疑似要素情報が必要ない場合は、2 番目のパラメータを null にすることができます。 CSSStyleDeclaration オブジェクト (style 属性と同じ型) を返します。 <BR>□IE は getComputedStyle() メソッドをサポートしていません。ただし、IE のスタイル属性を持つ要素には、現在の要素の計算されたすべてのスタイルを含む currentStyle 属性 (CSSStyleDeclaration のインスタンス) があります。 <BR>□ 計算されたスタイルの互換性のあるコード: <BR>var myDiv = document.getElementById("myDiv"); <BR>var computedStyle = document.defaultView.getComputedStyle(mydiv, null) || myDiv.currentStyle; (computedStyle.width); <BR>alert(computedStyle.height); <BR>2. スタイルシートの操作 <BR>①CSSSStyleSheet 型 <BR>1) <BR> 要素のスタイルシートを操作します。 <link>2) ブラウザが DOM2 レベルのスタイル シートをサポートしているかどうかを確認します。 <style>var supportDOM2StyleSheets = document.implementation.hasFeature("StyleSheet","2.0"); <BR>3) CSSStyleSheet は、非 CSS スタイル シートを定義するための基本インターフェイスとして使用できる StyleSheet を継承します。 StyleSheet インターフェイスから継承されるプロパティは次のとおりです。 <BR>□disabled: スタイル シートが無効かどうかを示すブール値。読み取り/書き込み。無効にするには true に設定します。 <BR>□href: スタイルシートが <BR> 経由で組み込まれている場合はスタイルシートの URL、それ以外の場合は null。 <BR>□media: 現在のスタイル シートでサポートされているすべてのメディア タイプのコレクション。すべての DOM コレクションと同様に、length プロパティと item() メソッドがあります。 <link>□ownerNode: 現在のスタイルシートを所有するノードへのポインタ。 @import を通じてインポートされた場合、属性は null です。 IE はこの属性をサポートしていません。 <BR>□parentStyleSheet: 現在のスタイル シートが @import を通じてインポートされる場合、この属性は、それをインポートしたスタイル シートへのポインタを指します。 <BR>□title: ownerNode の title 属性の値。 <BR>□type: スタイルシートのタイプを表す文字列。 CSS スタイル シートの場合、この文字列は「type/css」です。<BR>■上記の属性は無効を除き、すべて読み取り専用です。 <BR>4) CSSStyleSheet は、上記に基づいて次のプロパティとメソッドを追加します。 <BR>□cssRule: スタイル シートに含まれるスタイル ルールのコレクション。 IE はこれをサポートしていませんが、同様のルール属性があります。 <BR>□ownerRule: スタイル シートが @import を通じてインポートされる場合、この属性はインポートを表すルールを指すポインターになります。それ以外の場合は null です。 IE はこの属性をサポートしていません。 <BR>□deleRule(index): cssRules コレクション内の指定された位置にあるルールを削除します。 IEはこれをサポートしていませんが、同様のremoveRule()メソッドをサポートしています。 <BR>□insertRule(rule,index): cssRules コレクション内の指定された位置にルール文字列を挿入します。 IE はこれをサポートしていませんが、同様の addRule() メソッドをサポートしています。 <BR>5) スタイルシートオブジェクトを取得します<BR>□ドキュメントに適用されるすべてのスタイルシートは、document.styleSheets コレクションによって表されます。ドキュメント内のスタイル シートの数は、このコレクションの長さプロパティを通じて取得でき、各スタイル シートには角かっこ構文または item() メソッドを通じてアクセスできます。 <BR>varsheet = null; <BR>for(var i = 0, len = document.styleSheets.length; i < len; i ){ < len; i ){ <BR>sheet = document.styleSheets[i]; sheet.href); <BR>} <BR>□ブラウザごとに document.styleSheets が返すスタイルシートも異なります。すべてのブラウザには、<BR> 要素と、rel 属性が「stylesheet」に設定された <style> 要素によって導入されたスタイルシートが含まれています。 <link>□ CSSStyleSheet オブジェクトは、<BR> または <link> 要素を通じて直接取得できます。 DOM は、sheet と呼ばれる CSSStyleSheet オブジェクトを含む属性を指定します。IE はこれをサポートしませんが、IE は同様の styleSheet 属性をサポートします。 <style>function getStyleSheet(element){ <BR>return element.sheet || <BR>} <BR>//最初の <BR> 要素によって導入されたスタイル シートを取得します <link>var link = document .getElementsByTagName("link")[0]; <BR>varsheet = getStylesheet(link); <BR>②CSS Rules<BR>1) CSSRule オブジェクトはスタイルシート内の各ルールを表し、他の型のリソースです。基本型 (最も一般的なのは CSSStyleRule 型) で、スタイル情報を表します。 <BR>2) CSSStyleRule オブジェクトには次の属性が含まれます。 <BR>□cssText: ルール全体に対応するテキストを返します。これは IE ではサポートされていません。 <BR>□parentRule: 現在のルールがインポートされたルールの場合、この属性はインポートされたルールを参照します。それ以外の場合、この値は null です。 IEではサポートされていません。 <BR>□parentStyleSheet: 現在のルールが属するスタイル シート。 IEではサポートされていません。 <BR>□selectorText: 現在のルールのセレクター テキストを返します。 <BR>□style: ルールで特定のスタイル値を設定および取得できる CSSStyleDeclaration オブジェクト。 <BR>□type: ルールのタイプを表す定数値。スタイル ルールの場合、この値は 1 です。 IEではサポートされていません。 <BR>■最もよく使用される属性は、cssText、selectorText、style です。 <BR>□cssText プロパティは style.cssText プロパティに似ていますが、同じではありません。前者にはセレクター テキストとスタイル情報を囲む中かっこが含まれ、後者にはスタイル情報のみが含まれます (要素の style.cssText と同様)。 cssText は読み取り専用ですが、style.cssText は読み取り/書き込み可能です。 <BR>var シート = document.styleSheets[0]; <BR>var ルール = シート.cssRules || <BR>var ルール = rules[0]; ; <BR>rule.style.backgroundColor="red"; <BR>③ ルールを作成します <BR>□insertRule() メソッド: ルール テキストとルールを挿入する場所を表すインデックスの 2 つのパラメータを受け取ります。 //IE は <BR>sheet.insertRule("body{background-color:silver}",0) をサポートしていません。 <BR>□addRule(): IE でサポートされています。 2 つの必須パラメーター: セレクター テキストと CSS スタイル情報。オプションのパラメータ: ルールを挿入する位置。 //IE でのみサポート<BR>Sheet.addRule("body","background-color:silver",0); <BR>□クロスブラウザ互換<BR>関数 insertRule(sheet, selectorText, cssText,position); { <BR>if(sheet.insertRule){ <BR>sheet.insertRule(selectorText "{" cssText "}", Position); <BR>}else if(sheet.addRule){ <BR>sheet.addRule(selectorText) , cssText,position); <BR>} <BR>} <BR>Call: insertRule(document.styleSheets[0], "body", "background-color:red", 0);追加する ルールが多いと操作が面倒です。スタイルシートを動的にロードすることをお勧めします。 <BR>④Delete Rules<BR>□sheet.deleteRule(0); //DOM メソッド、IE はサポートしていません <BR>Sheet.removeRule(0); //IE メソッドはどちらも削除するルールの場所を渡します。 <BR>□クロスブラウザ互換性: <BR>function deleteRule(sheet,index){ <BR>if(sheet.deleteRule){ <BR>Sheet.deleteRule(index) <BR>}else if(sheet.removeRule) ){ <BR>Sheet.removeRule(index); <BR>} <BR>} <BR>呼び出しメソッド: deleteRule(document.styleSheets[0],0); <BR>□このアプローチは実際の Web では使用されません。開発 一般的な慣行。ルールを削除すると、CSS カスケード効果に影響します。慎重に使用してください。 <BR>3. 要素のサイズ (DOM2 スタイルではありませんが、すべてのブラウザでサポートされています) <BR>①オフセット寸法 (オフセット寸法) <BR>定義: 画面上で要素が占めるすべての表示スペースを含みます。要素の表示サイズは、すべてのパディング、スクロール バー、境界線のサイズを含む高さと幅によって決まります (マージンは含まれないことに注意してください) <BR>□offsetHeight: 要素が占める垂直方向のスペースの量、ピクセル単位で。 <BR>□offsetWidth: 要素が占める水平方向のスペースの量 (ピクセル単位)。 <BR>□offsetLeft: 要素の左境界線とそれに含まれる左内側境界線の間のピクセル距離。<BR>□offsetTop: 要素の上部境界線から、それを含む要素の上部内部境界線までのピクセル単位の距離。 <BR>△offsetLeft 属性と offsetTop 属性は包含要素に関連付けられており、包含要素の参照は offsetParent 属性に保存されます。 offsetParent プロパティは、parentNode の値と必ずしも同じではありません。 <BR>△これらのプロパティは読み取り専用であり、アクセスごとに再計算する必要があります。再利用する場合は、ローカル変数に保存する必要があります。 <BR>②クライアント領域サイズ(クライアントディメンション) <BR>要素の内容とそのパディングのサイズです。スクロールバーが占めるスペースは含まれません。 <BR>□clientWidth 属性: 要素のコンテンツ領域の幅に左右のパディングの幅を加えたもの。 <BR>□clientHeight 属性: 要素のコンテンツ領域の高さに上下のパディングの高さを加えたもの。 <BR>□ document.documentElement または document.body (IE6 の混合モード) を使用して、ブラウザーのビューポート サイズを決定します。 <BR>function getViewport(){ <BR>if(document.compatMode == "BackCompat"){ <BR>return{ <BR>width:document.body.clientWidth, <BR>height:document.body.clientheight <BR>}; <BR>}else{ <BR>return{ <BR>width:document.documentElement.clientWidth, <BR>height:document.documentElement.clientHeight <BR>} <BR>}; 🎜>③スクロールサイズ<BR>は、スクロールするコンテンツを含む要素のサイズを指します。 <BR>□scrollHeight: スクロール バーを除いた要素コンテンツの合計の高さ。 <BR>□scrollWidth: スクロール バーを除いた要素コンテンツの合計幅。 <BR>□scrollLeft: コンテンツ領域の左側に隠れるピクセル数。このプロパティを設定すると、要素のスクロール位置を変更できます。 <BR>□scrollTop: コンテンツ領域の上に隠れているピクセルの数。このプロパティを設定すると、要素のスクロール位置を変更できます。 <BR>◇ドキュメントの合計の高さ (ビューポートに基づく最小の高さを含む) を決定する場合、クロスブラウザーを保証するために、scrollWidth/clientWidth およびscrollHeight/clientHeight の最大値を取得する必要があります。 <BR>Var docHeight = Max.max(document.documentElement.scrollHeight,document.documentElement.clientHeight); <BR>Var docWidth = Max.max(document.documentElement.scrollWidth,document.docuemntElement.clientWidth);注: 混合モードで実行されている IE の場合、document.documentElement の代わりに document.body を使用する必要があります。 <BR>◇scrollLeft 属性とscrollTop 属性を使用して、要素の現在のスクロール状態を判断し、要素のスクロール位置を設定できます。 <BR>functionscrollToTop(element){ <BR>if(element.scrollTop != 0){ <BR>element.scrollTop = 0; <BR>} <BR>} <BR>④要素のサイズを決定する<BR>□ IE、Firefox3 以降、および Opera9.5 以降では、要素ごとに getBoundingClientRect() メソッドが提供されます。このメソッドは、left、top、right、bottom の 4 つのプロパティを持つ長方形のオブジェクトを返します。これらのプロパティは、ビューポートを基準としたページ上の要素の位置を示します。ただし、IE は左上隅の座標が (2,2) であると認識し、他のブラウザーは左上隅の座標が (0,0) であると認識します。 <BR>function getBoundingClientRect(element){ <BR>varscrollTop = document.documentElement.scrollTop; <BR><BR>if(element.getBoundingClientRect){ <BR>If (typeof argument.callee.offset != "number"){ <BR>var temp = document.createElement("div"); <br>temp.style.cssText = "position:absolute;left:0;top:0 ;"; <br>document.body.appendChild(temp); <BR>arguments.callee.offset = -temp.getBoundingClientRect().top -scrollTop; <BR>document.body.removeChild(temp); <BR> temp = null; <BR>} <BR>varect = element.getBoundingClientRect(); <BR>var offset = argument.callee.offset; <BR><BR>return{ <br>left:左オフセット、<br>右:rect.右オフセット、<BR>上:rect.上オフセット、<br>下:rect.下オフセット <br>}; <BR>varactualLeft = getElementLeft (要素); <BR>varactualTop = getElementTop(element); <BR><BR>return{ <BR>left:actualLeft -scrollLeft,<BR>right:actualLeft element.offsetWidth -scrollLeft,<BR>top:actualTop -scrollTop,<BR>bottom:actualTop element.offsetHeight -scrollTop <br>} <br>} <BR>} <BR><BR>3. トラバーサル <BR>①概要：「DOM2 レベルのトラバーサルと範囲」モジュール定義DOM 構造の順次走査の完了を支援するために、NodeIterator と TreWalker という 2 つのタイプが導入されました。これら 2 つのタイプは、指定された開始点に基づいて DOM 構造に対して深さ優先のトラバーサル操作を実行できます。 <BR>□これらのオブジェクトは、DOM 互換バージョンでアクセスできます。 IE はトラバーサルをサポートしていません。 <BR>□ブラウザの DOM レベル 2 トラバーサル機能のサポートを確認してください。 <BR>varsupportsTraversals = document.implementation.hasFeature("Traversal","2.0"); <br>varsupportsNodeIterator = (typeof document.createNodeIterator == "function"); <br>varsupportsTreeWalker = (typeof document.createTreeWalker) == "関数"); <BR>②NodeIterator <BR>1) document.createNodeIterator() メソッドを使用して新しいインスタンスを作成できます。 <BR>4 つのパラメータを受け入れます: <BR>□root: 検索の開始点として使用する樹種のノード。 <BR>□whatToShow: どのノードにアクセスするかを示す数値コード。 <BR>□filter: NodeFilter オブジェクト、または特定のノードを受け入れるか拒否するかを示す関数です。 <BR>□entityReferenceExpansion: エンティティ参照を拡張するかどうかを示すブール値。このパラメータは HTML ページでは使用されません。 <BR>■whatToShow パラメータは、NodeFilter 型で値が定数として定義されるビットマスクです。<BR>□NodeFilter.SHOW_ALL: すべての種類のノードを表示します。 <BR>□NodeFilter.SHOW_ELEMENT: 要素ノードを表示します。 <BR>□NodeFilter.SHOW_ATTRIBUTE: 属性ノードを表示します。 DOM 構造上の理由により、この値は実際には使用できません。 <BR>□NodeFilter.SHOW_TEXT: テキストノードを表示します。 <BR>□NodeFilter.SHOW_CDATA_SECTION: CDATA ノードを表示します。 HTMLには役に立たない。 <BR>□NodeFilter.SHOW_ENTITY_REFERENCE: エンティティ参照ノードを表示します。 HTMLには役に立たない。 <BR>□NodeFilter.SHOW_ENTITYPE: エンティティ ノードを表示します。 HTMLには役に立たない。 <BR>□NodeFilter.SHOW_PROCESSING_INSTRUCTION: 処理命令ノードを表示します。 HTMLには役に立たない。 <BR>□NodeFilter.SHOW_COMMENT: コメントノードを表示します。 <BR>□NodeFilter.SHOW_DOCUMENT: ドキュメントノードを表示します。 <BR>□NodeFilter.SHOW_DOCUMENT_TYPE: ドキュメントタイプのノードを表示します。 <BR>□NodeFilter.SHOW_DOCUMENT_FRAGMENT: ドキュメントフラグメントノードを表示します。 HTMLには役に立たない。 <BR>□NodeFilter.SHOW_NOTATION: シンボル ノードを表示します。 HTMLには役に立たない。 <BR>◇NodeFilter_SHOW_ALL に加えて、ビットごとの OR 演算子を使用して複数のオプションを組み合わせることができます。 <BR>var whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT; <BR>◇フィルター パラメーターを使用して、NodeFilter オブジェクトまたはフィルター関数をカスタマイズします。 <BR>NodeFilter オブジェクトには、acceptNode() という 1 つのメソッドしかありません。アクセスされると、NodeFilter.FILTER_ACCEPT が返されます。<BR>例 1: イテレーター <BR>var filter= { <BR>acceptNode:function (node)P{ <BR>return node.tagName.toLowerCase()=="p" ? <BR>NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP; <BR> <BR>var iterator = document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false); <BR>例 2: filtr パラメーターは、acceptNode メソッドと同様の関数にすることもできます。 <BR>var filter = function(node){ <BR>return node.tagName.toLowerCase() == "p" ? <BR>NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP; <BR>var iterator = document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false); <BR>2) NodeIterator タイプには、nextNode() とPreviousNode() という 2 つの主なメソッドがあります。 <BR>var div = document.getElemetnById("div1"); <BR>var iterator = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false); <BR>var node = iterator.nextNode(); >while(node !== null){ <BR>alert(node.tagName); <BR>node = iterator.nextNode(); <BR>} <BR>③TreeWalker <BR>1) TreeWalker はアップデートですNodeIterator プレミアム バージョンの。 nextNode() とpreviousNode() に加えて、DOM 構造をさまざまな方向にトラバースする次のメソッドもあります。 <BR>□parentNode(): 現在のノードの親ノードにトラバースします。 <BR>□firstChild(): 現在のノードの最初の子ノードに移動します。 <BR>□lastChild(): 現在のノードの最後の子ノードに移動します。 <BR>□nextSibling(): 現在のノードの次の兄弟ノードに移動します。 <BR>□previousSibling(): 現在のノードの前の兄弟ノードに移動します。 <BR>2) TreeWalker オブジェクトを作成するには、document.createTreeWalker() メソッドを使用します。このメソッドは、document.createNodeIterator() メソッドと同じ 4 つのパラメーターを受け取ります。 <BR>□ 3 番目のパラメーターのフィルター戻り値は、NodeFilter.FITER_ACCEPT および NodeFilter.FILTER_SKIP を返すことに加えて、NodeFILTER_REJECT (機能: 対応するノードとノードのサブツリー全体をスキップする) を使用することもできます。 <BR>□ TreeWalker の強みは、DOM 構造内で任意の方向に移動できることです。 <BR>◇例: フィルターを定義しなくても、DOM ツリーを走査し、すべての <BR> 要素を取得します。 <BR>var div = document.getElementById("div1"); <BR>var walker = document.createTreeWalker(div,NodeFilter.SHOW_ELEMENT,null,false); <BR>walker.firstChild(); nextSibling(); <li>var ノード = walker.firstChild(); <BR>while(node !== null)} <BR>alert(node.tagName); ; <BR>} <BR>□ TreeWalker 型には、前回の走査メソッドによって返されたノードを表す currentNode という属性もあります。 <BR>4. スコープ <BR>基本定義: <BR>スコープを使用すると、ノードの境界を考慮せずにドキュメント内の領域を選択できます (選択はバックグラウンドで完了し、ユーザーには表示されません)。通常の DOM 操作ではドキュメントをより効率的に変更できない場合、多くの場合、スコープを使用するとうまくいきます。 <BR>1. DOM の範囲 <BR>①概要: <BR>1) DOM2 レベルでは、Document タイプに createRange() メソッドが定義されています。 <BR>□範囲がサポートされているかどうかを確認します: <BR>var supportRange = document.implementation.hasFeature("Range","2.0"); <BR>var alsoSupportsRange = (typeof document.createRange == "function"); <BR>□Create DOM range: var range = document.createRange(); <BR>2) Range 型インスタンスで、ドキュメント内の現在の範囲の位置情報を提供する属性: <BR>□startContainer:範囲の開始点を含むノード (つまり、選択範囲内の最初のノードの親ノード) <BR>□startOffset: startContainer 内の範囲の開始点のオフセット。 StartContainer がテキスト ノードの場合、startOffset は範囲の開始前にスキップされる文字数です。それ以外の場合、startOffset は親ノード内の範囲内の最初の子ノードのインデックスです。 <BR>□endContainer: 範囲の末尾のノードを含みます (つまり、最後のノードの親ノードを選択します)。<BR>□endOffset: endContainer の範囲の終点のオフセット (startoffset などのルール) <BR>□commonAncestorContainer: startContainer と endContainer の共通の祖先ノードは、ドキュメント ツリーの中で最も深い位置にあるノードです。 <BR>②DOM 範囲を使用して単純な選択を実装します: <BR>1) 範囲を使用してドキュメントの一部を選択します: <BR>□selectNode(): DOM ノードを渡し、サブノードを含むノード全体を選択します。範囲。 <BR>□selectNodeContents(): DOM ノードを渡し、子ノードのみを範囲として選択します。 <BR>2) 範囲をより正確に制御します: <BR>□setStartBefore(refNode): refNode の前に範囲の開始点を設定します。これにより、refNode が範囲選択の最初の子ノードになります。範囲の位置プロパティは自動的に更新されます。 <BR>□setStartAfter(refNode): <BR>□setEndBefore(refNode): <BR>□setEndAfter(refNode): <BR>③ DOM 範囲を使用して複雑な選択を実装します: <BR>□setStart():基準点とオフセット。参照ノードはstartContainerとなり、オフセットはstartOffsetとなります。 <BR>□setEnd(): 参照点とオフセットを渡します。参照ノードはendContainerとなり、オフセットはendOffsetとなります。 <BR><p id="p1"><b>こんにちはの世界!//範囲を使用して l ～ o を選択します。 <BR>var p1 = document.getElementById("p1"); <BR>var helloNode = p1.lastChild; <BR>var range = document.createRange(); 🎜>range.setStart(helloNode,2); <BR>range.setEnd(worldNode,3); <BR>④DOM範囲内のコンテンツを操作する<BR>□操作メソッドを呼び出すと、バックグラウンドで有効な値が作成されます。範囲のドキュメントフラグメントと DOM 構造。 P275 <BR>□deleteContents(): 範囲に含まれるコンテンツを文書から削除します。 <BR>□extractContents(): ドキュメントから範囲コンテンツを削除し、範囲ドキュメントのフラグメントを返します。 <BR>⑤DOM範囲にコンテンツを挿入 <BR>□insertNode(): 範囲選択の先頭にノードを挿入します。 <BR>□surroundContents(): 範囲のコンテンツを囲むノードである 1 つのパラメーターを受け入れます。 <BR>a. 範囲内のコンテンツを抽出します (extractContent() の実行と同様) <BR>b. 指定されたノードをドキュメントの元の範囲の位置に挿入します。 <BR>c. ドキュメントフラグメントのコンテンツを指定されたノードに追加します。 <BR>⑥DOM 範囲の折りたたみ <BR>□いわゆる折りたたみ範囲とは、範囲内で選択されていないドキュメントの任意の部分を指します。 <BR>□collapse() メソッド: 1 つのパラメーター ブール値。範囲の先頭まで折りたたむ場合は true、範囲の最後まで折りたたむ場合は false。折りたたまれた属性を使用して、折りたたまれているかどうかを確認できます。 <BR>range.collapse(true); //開始点まで折りたたむ<BR>alert(range.collapsed); //trueを出力<BR>⑦DOM範囲の比較<BR>複数の範囲がある場合に使用可能) メソッドを使用して、これらの範囲に共通の境界 (開始または終了) があるかどうかを判断します。 2 つのパラメータ: 比較方法と比較する範囲を示す定数。 <BR>比較方法定数値: <BR>□Range.START_TO_START(0): 最初の範囲と 2 番目の範囲の開始点を比較します。 <BR>□Range.START_TO_END(1): <BR>□Range.END_TO_END(2): <BR>□Range.END_TO_STRAT(3): <BR>⑧DOM 範囲をコピー<BR>□cloneRange() メソッド: var newRange = range.cloneRange(); <BR>⑨DOM 範囲をクリーンアップします<BR>□ detach() メソッドを呼び出して、ドキュメントから範囲を分離します。 <BR>range.detach(); //ドキュメントから切り離します<BR>range = null; //Dereference<BR>2. IE の範囲<BR>①概要: <BR>□IE は DOM range をサポートしていません。同様のテキスト範囲がサポートされています。 <BR>□テキスト範囲は主にテキストを処理します (必ずしも DOM ノードではありません)。 createTextRange() メソッドは、<BR>、<BR>、<body>、<button> などの要素を通じて呼び出されます。 <input>□ドキュメントを通じて作成されたスコープは、ページ内のどこでも使用できます。 <textarea>var range = document.body.createTextRange(); <BR>②IE 範囲を使用して単純な選択を実装します<BR>□findText() メソッド: 指定されたテキストの最初の出現を検索し、テキストを囲むように範囲を移動します。テキストが見つかったかどうかを示すブール値を返します。 <BR>◇範囲内のテキストを返すには text 属性を使用します。 <BR>var range = document.body.createTextRange(); <BR>var found = range.findText("Hello"); <BR>◇findText に別のパラメータを渡すことができます。逆方向に検索し、値が正の場合は前方に検索します。 <BR>□moveToElementText() メソッド: DOM の selectNode() メソッドに似ています。 DOM 要素を受け入れ、HTML タグを含むその要素のすべてのテキストを選択します。 <BR>◇範囲では htmlText 属性を使用して、HTML を含む範囲のコンテンツ全体を取得できます。 <BR>③IE 範囲を使用して複雑な選択を実装します <BR>□ 4 つのメソッド: move()、moveStart()、moveEnd()、expand() の 2 つのパラメータ: 移動単位と移動単位の数。移動単位は次の文字列です。 <BR>◇"character": 1 文字ずつ移動します。 <BR>◇"word": 単語ごとに (スペース以外の一連の文字として移動) <BR>◇"sentence": 文ごとに (ピリオド、こんにちは、または感嘆符で終わる一連の文字として移動) <BR>◇"textedit" : 現在の範囲選択の先頭または末尾に移動します。 <BR>□moveStart(): 範囲の開始点に移動し、moveEnd() で範囲の終了点に移動します。 <BR>□expand(): 任意の部分の選択されたテキストをすべて選択します。 <BR>□move()メソッド: まず、現在の範囲を折り畳んで(始点と終点が等しい)、指定された単位数だけ範囲を移動します。 <BR>④ IE 範囲のコンテンツを操作する <BR>□範囲にはテキストのみが含まれており、text 属性を通じてテキストの読み書きが可能です。 <BR>□pasteHTML()メソッド：範囲内にHTMLコードを挿入します。 <BR>⑤IE 範囲を折りたたむ <BR>□collapse() メソッド: ブール値を渡します。始点まで折りたたむ場合は true、終点まで折りたたむ場合は false。 <BR>□折り畳みが完了したかどうかを確認します:boundingWidth 属性が 0 に等しい <BR>var isCollapse = (range.boundingWidth == 0); <BR>⑥IE range を比較<BR>□compareEndPoints() メソッド: 2 つのパラメーター: 比較の種類と比較する範囲。 <BR>◇比較タイプの値の文字列: "startToStart"、"StartToEnd"、"EndToEnd"、および "EndToStart"。 <BR>◇最初の範囲境界が 2 番目の範囲より前にある場合は -1 を返し、等しい場合は 0 を返し、後の場合は 1 を返します。<BR>□isEquanl() は 2 つの範囲が等しいかどうかを判断するために使用されます。 <BR>□inRange() は、範囲に別の範囲が含まれているかどうかを判断するために使用されます。 <BR>⑦IE 範囲をコピー <BR>duplicate() メソッドを使用してテキスト範囲をコピーし、コピーを返します。 <BR>var newRange = range.duplicate();</script>