コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JS 高度なプログラムの DOM 拡張

JS 高度なプログラムの DOM 拡張

小云云
リリース： 2018-03-07 13:30:13
オリジナル
1517 人が閲覧しました

11.1 Selector API:

SelectorsAPI の中心となる 2 つのメソッドは、querySelector() と querySlelctorAll() です。互換性のあるブラウザでは、Domcument タイプと Element タイプのインスタンスを通じて呼び出すことができます。

11.1.1 querySelector() メソッド:

querySelector() メソッドは CSS セレクターを受け取り、セレクターに一致する最初の要素を返します。一致するものがない場合は、null を返します。

ドキュメントを通じて querySelector() メソッドを呼び出すと、ドキュメント要素の範囲内で一致する要素が検索されます。

querySelector() メソッドを呼び出す Elementquery は、要素の子孫要素内で一致する要素のみを検索します

11.1.2 querySelectorAll()

var body=document.querySelector("body");
var p=body.querySelector(".menu_1")
//    var li=p.querySelector("li");
var li=p.querySelectorAll("li");
for(var i=0;i<li.length;i++){
var list={};
list[i]=li[i].innerHTML;
alert(list[i]);
    }
ログイン後にコピー

11.1.3matchesSelector

このメソッドは、CSS セレクターである 1 つのパラメーターを受け取ります。呼び出されたメソッドは、要素に一致する場合に true を返します。

11.2 Element Traversal

Elment Traversal APIは、DOM要素に以下の5つの属性を追加します。

1: childElementCount: 子要素の数を返します。

2: firstElementChild: 最初の子要素、firstChild 要素のバージョンを指します。

3: lastElementChild: 最後の子要素、lastChild 要素のバージョンを指します。 previousElementSibling : 前の兄弟要素を指します。

5: nextElementSibling: 次の兄弟要素を指します。

11.3HTML5

11.3.1 クラス関連の拡張機能

1: getElementByClassName() このメソッドは、1 つまたは指定されたすべての要素を含む NodeList を返すクラス名の文字列。

2: classList 属性: (class="Operation here" の場合)

classList 属性は、新しいコレクション型 DOMTokenList のインスタンスです。他の DOM コレクションと同様です。次のメソッドがあります:

add(value): 指定された文字列をリストに追加します。

contains(value): 指定された値がリストに存在するかどうかを示します。存在しない場合は false を返します。

remove(value) は指定された文字列をリストから削除します

toggle (指定された値がリストに存在する場合は削除し、指定された値が存在しない場合は追加します。) 

<p id="select" class="aa ss dd ff hh "></p>
<script>
var elem = document.getElementById("select");
var classNum =elem.classList;
console.log(classNum);
</script>
ログイン後にコピー

この時点で、次のように渡すことができます。上記のメソッド内でパラメータを操作します。

11.3.2 フォーカス管理

HTML5 には、補助的な DOM 管理の機能も追加されています。 1 つ目は document.activeElement プロパティで、現在フォーカスされている DOM 要素を常に参照します。現在のユーザーがフォーカスしている要素を取得します。

使用します。 focus() メソッド

11.3.3 HTMLDocument の変更点

1:readyState 属性

この属性には 2 つの値があります

1; ドキュメントはロード中です

2: 完了、ドキュメントはロードされました。

document.readyState プロパティを使用する最も適切な方法は、ドキュメントがロードされたことを示すインジケーターを実装するために使用することです。ドキュメントがロードされたことを示します。 

if(document.readyState=="complete"){
       //执行操作
}
ログイン後にコピー

2: 互換モード:

IE6 では、ページのレンダリング モードが標準か混合かを区別するようになったので、IE は、ページが使用するレンダリング モードを開発者に伝えるために、compatMode と呼ばれる属性をドキュメントに追加しました。

戻り値は 2 つあります: CSS1compat と BackComapat です。

はそれぞれ標準モードと混合モードに対応します。

3 .6 タグの挿入

1: innerHTML 属性

読み取りモードでは、innerHTML 属性は、呼び出し元要素のすべての子ノードに対応する HTML タグを返します。書き込みモードでは、innerHTML は指定された値に基づいて新しい DOM ツリーを作成します。

この属性を使用して、指定したタグにタグを追加できますが、すべてのタグがサポートされているわけではありません

2: externalHTML 属性

読み取りモードでは、outerHTML は要素の HTML タグと、それを呼び出すすべての子ノードを返します。書き込みモードでは、outerHTML は指定された HTML 文字に基づいて新しい DOM ツリーを作成し、呼び出し元の要素をこの DOM サブツリーで完全に置き換えます。 

var val = elem.outerHTML;
ログイン後にコピー

読み取りモード: すべての HTML タグを返します。

書き込みモード: 対応する DOM 要素を置き換えます。 

<p id="select" class="aa ss dd ff hh ">
<p>this is a test Demo</p>
</p>
ログイン後にコピー
elem.outerHTML="<p>这是一个测试的demo</p>"
ログイン後にコピー

3: insertAdjeacentHTML() メソッド

マークアップを挿入する最後のメソッドです。

挿入位置と挿入される HTML テキストの 2 つのパラメータを受け取ります。最初の要素は、次のいずれかの値である必要があります。

1: 開始する前に、現在の要素の前に隣接する兄弟要素を挿入します。

2: afterbegin、現在の要素の下、または最初の要素の前に新しい要素を挿入します

3: beforeend、現在の要素の下、または最後の要素の前に新しい子要素を挿入します 次に、新しい要素を挿入します

4: afterend 要素の後に隣接する兄弟要素を追加します。

4: メモリとパフォーマンスの問題;

このセクションで紹介した方法を使用して子ノードを置き換えると、ブラウザでメモリの問題が発生する可能性がありますが、innerHTML 属性を使用すると依然として大量のトラバーサルが発生するためです。または、outerHTML は HTML パーサーを作成します。このパーサーはブラウザー レベルのコードで実行されるため、js よりもはるかに高速です。

11.3.7scrollIntoViewメソッド

Scroll

11.4.1ドキュメントモード:

ドキュメント モードは、使用できる CSS のレベルと、js で使用できる API を決定します:

ドキュメント モードは合計 4 つあります:

IE5: ページを混合モードでレンダリングします。IE8 以降の新機能はすべて使用できません

IE7: IE7 標準モードでページをレンダリングします。IE8 以降の新機能は使用できません。IE8 のすべての新機能を使用できるため、SelectorsAPI と多くの CSS2 レベル セレクターといくつかの CSS3 機能。いくつかの HTML5 機能もあります

IE9 - IE9 標準モードのレンダリング ページ。すべての新機能が利用可能です。例えば、EMACSript5の機能。

11.4.2 Children 属性

Children 属性と childNodes にはほとんど違いはありません。両方ともすべての子ノードを返すために使用されます。

11.4.3contain (contain) メソッド:

ノードが子ノードであるかどうかを判断するために使用されます。特定のノードの子孫は、英語の文字通りの意味を直接理解できます。

親node.contain(特定のノード): trueを返す場合は含まれ、それ以外の場合はfalseを返します。

compareDocumentPosition() を使用してファイルの位置を比較することもできます。これにより、位置関係を決定するためのいくつかのマスクが返されます

contains() メソッドを模倣するには、16 を返すことに注意する必要があります

11.4.4 挿入text:

1: innerText 属性

は要素内のすべての値を操作し、ドキュメントを浅いものから深いものへとつなぎ合わせます。

と innerHTML の違いは、 innerHTML はすべての要素タグを表示しますが、 innerText は結合された文字列のみを返します

書き込み時には、テキストの子ノードが 1 つだけ表示されます。

2: externalText 属性

その範囲がそのノードを含むように拡張されることを除けば、基本的に、outerText と innerText の間に大きな違いはありません。テキストを読むときは結果はまったく同じですが、書くときはまったく異なります。 externalText は、それを呼び出す要素の子要素を置き換えるだけでなく、要素全体を置き換えます。使用しないことをお勧めします。

11.4.5 スクロール:

1:scrollIntoviewIfNeeded(alignCenter): 要素がビューポートに表示されない場合にのみブラウザをスクロールします。

2:scrollByLines(lineCount): 要素のコンテンツを指定されたページの高さまでスクロールします。lineCount には正または負の値を指定できます。

3:scrollBypage(pageCount): 要素のコンテンツを指定されたページの高さまでスクロールします。特定の高さは要素の高さによって決まります。

注:scrollIntoView() とscrollIntoviewIfNeeded(alignCenter)は要素コンテナに対して機能しますが、scrollByLines(lineCount)とscrollBypage(pageCount)は要素自体に対して機能します。

第 12 章: DOM2 と DOM3

12.1.1 XML 名前空間の変更

XML 名前空間を使用すると、名前の競合を気にせずに、異なる XML ドキュメントの要素を混在させることができます。技術的に言えば、HTML XML 名前空間はサポートされていませんが、XHTML はサポートされません。 XML 名前空間をサポートします。

1: ノード タイプの変更

DOM2 レベルでは、ノード タイプには次の名前空間固有のプロパティが含まれます。

localName: 名前空間プレフィックスのないノード名。

namespaceURL: ネームスペース URL が null です。

prefix: 名前空間プレフィックスまたは null。

2: ドキュメント タイプの変更

DOM2 レベルのドキュメント タイプも変更されており、次の名前空間関連のメソッドが含まれています。

createElementNs(namespaceURI,tagName): 指定された tagName を使用して、名前空間 namespaceURI に属する新しい要素を作成します。

createAttributeNS(nameSpaceURI,attributeName) 指定されたattributeNameを使用して、名前空間nameSpaceURIに属する新しい属性を作成します。

getElementByTagNameNs(namespaceURI, tagName) は、名前空間 URI に属する tagName 要素の NodeList を返します。

3: 要素タイプの変更

「DOM レベル 2」の要素に関連する変更は、主に操作上の特性に関係します。新しい方法は以下の通りです。

getAttributeNS(namespaceURI, localName) 名前空間 URI の名前付き localName の属性を取得します

getAttributeNodeNS(namespaceURI, localName) 名前空間 URI に属し、localName という名前の属性ノードを取得します

getElementsByTagNameNS(namespaceURI, tagName) は、次の属性を返しますnamespaceURI

の名前空間nodeListに属しますhasAttributeNS(namespaceURI, localName)は、現在の要素がlocalNaemという名前の属性であり、この属性の名前空間がnamespaceURIであると判断します

removeAttributeNS(namespaceURI, localName)は、名前空間に属する属性を削除しますURI で名前は localName

setAttributeNS(namespaceURI,qualifiedName,value): 名前空間 namespaceURI と名前付きqualifiedName に属する属性値を value に設定します

setAttributeNodeNS(attNode) 名前空間 namespaceURI に属する属性ノードを設定します

4: 変更点NamedNodeMap 型の場合

属性により、NamedNodeMap で表されるため、これらのメソッドはほとんどの場合、機能に対してのみ使用されます

1: getNamedItemNS (namespaceURI, localName): 名前空間 URI に属し、 named localName

2:removeNamedItemNS(namespaceURI, localName):move 名前空間namespaceURIに属しlocalNameという名前の項目を除く

3:setNamedItemNS(node):Addノード、このノードは事前に名前空間情報を指定しています。

プロパティは通常要素を通じてアクセスされるため、これらのメソッドはほとんど使用されません。

12.1.2 その他の変更点

1: documentType タイプの変更点

3 つの属性を追加しました: publicID systemId と externalSubset。

2: ドキュメント タイプの変更:

DOM レベル 2 コアは依然としてドキュメントです。実装オブジェクトは、creatDocumentType() と creatDocument() という 2 つの新しいメソッドを指定します。前者は、新しい DocumentType ノードを作成するために使用され、ドキュメント タイプ、publicID、systemID の 3 つのパラメーターを受け入れます。 document() メソッドは、次の 3 つのパラメータも受け入れます: namesp-aceURI、ドキュメント要素のタグ名、新しいドキュメント タイプ

3: ノード タイプの変更

isSupported() メソッドを追加しました: 現在のノードが何を持っているかを判断するために使用されます能力。

このメソッドは、機能名と機能バージョン番号の 2 つのパラメーターを受け取ります。

12.2 スタイル

HTML でスタイルを定義するには、外部 、埋め込み