JavaScriptの基礎知識のまとめ-DOM拡張

DOMはAPIとして十分に完備されていますが、より多くの機能のために、いくつかの独自の拡張があります.
セレクタAPI
ブラウザがCSSクエリーをオリジナルでサポートするために、セレクタAPIは、DocumentクラスとElementクラスを介して呼び出すことができるquerySelector()とquerySelectorAll()の2つの主要な方法を提供します.サポートされているブラウザは、IE 8+、FireFox 3です.5,Safari3.1+,ChromeとOpera 10+

querySelector() 1.このメソッドはCSSセレクタを受信し、モードに一致する最初の要素を返し、一致する要素が見つからない場合nullを返します.

var myDiv = document.querySelector('#myDiv'); //   id myDiv      
var img  = document.body.querySelector('.button'); // body class button      

querySelectorAll()このメソッドは、実際にはすべての属性とメソッドを持つNodeListのインスタンスを返します.

var myDiv = document.querySelector('#myDiv'); //   id myDiv   
var img  = document.body.querySelector('.button'); // body class button    nodeList

matchesSelector()Selectors API Level 2仕様は、ElementタイプのメソッドmatchesSelector()を追加しました.この方法はCSSセレクタを受信し、呼び出し要素がセレクタと一致するとtrueを返す.そうでなければfalseを返します.

if (document.body.matchesSelector("body.page1")) {
  //true
}

要素の遍歴
エレメント間のスペースの場合、IE 9以降のバージョンではテキストノードは返されず、他のブラウザではテキストノードが返されるため、childNodesやfristChildなどのプロパティを使用するときの動作が一致しません.差異を補うために、Emelent Transversal仕様では、新しい属性のセットが定義されています.1.childElementCount:テキストノードとコメントを含まないサブ要素の数を返します.2.firstElementChild:最初のサブエレメントを指す;firstChildの要素版.3.lastElementChild:最後のサブエレメントを指します.LastChildの要素版.4.previousElementSibling:前の世代の要素を指す.previousSiblingの要素版.5.nextElementSibling:次の世代の要素を指します.nextSiblingの要素版.

//              
var i;
var len;
var child = element.firstElementChild;
while(child != element.lastElementChild) {
  processChild(child);  //      
  child = child.nextElementSibling;
}

HTML 5関連の拡張

クラス関連拡張

1.getElementsByClassName():このメソッドは、1つ以上のクラス名を含む文字列を受信し、指定したタイプのすべての要素を持つNodeListを返します.サポートされているブラウザは、IE 9+、Firefox 3+、Safari 3です.1+,ChromeとOpera 9.5+;

var allCurrentUsernames = document.getElementsByClassName("username current");  
//  class   a b   

2.classList:要素のclassを取得し、DOMTokenListのインスタンスを返します.lengthプロパティは長さ、item()、カッコ参照を表します.さらに、add()、contain()、remove()、toggle()でサポートされているブラウザは、Firefox 3のみです.6+とChorme

//   
div.classList.remove('user');
//   
div.classList.add('current');
//   
div.classList.toggle('user');
//          
if(div.classList.contains('bd') && !div.classList.contains('disabled')) {
}
    
for (var i =0,len=div.classList.length;i < len; i++) {
   doSomething(div.classList[i]);
}

フォーカス管理HTML 5にもDOMフォーカスの管理を補助する機能が追加されています.まずdocumentですActiveElementプロパティ.このプロパティは、DOMで現在フォーカスされている要素を常に参照します.サポートされているブラウザは、IE 4+、Firefox 3+、Safari 4+、Chrome、Opera 8+;1.デフォルトでは、ドキュメントのロードが完了したばかりのときにdocument.ActiveElementに保存されているのはdocumentです.body要素の参照.2.ドキュメントのロード中、document.ActiveElementの値はnullです.3.documentが追加する.hasFocus()メソッドは、ドキュメントがフォーカスされているかどうかを決定するために使用されます.

HTML Documentの変化HTML 5ページはHTML Documentを拡張し、新しい機能を追加しました.1.readyStateプロパティ.ドキュメントのロードステータスを表します.サポートされているブラウザは、IE 4+、Firefox 3です.6+,Safari,ChromeとOpera 9+;2.document.compatModeは、標準モードではCSS 1 Compatに等しく、ハイブリッドモードではBackCompatに等しい.

if (document.readyState == 'complete') {
//      ，    
}
//    
var head = document.head || document.getElementsByTagName('head')[0];

3.document.headプロパティ、ドキュメントの要素を参照します.サポートされているブラウザ:Safari 5,Chrome

文字セット属性HTML 5には、テキストに関連する文字セットもいくつか追加されています.1.charsetプロパティは、ドキュメントで実際に使用されている文字セットを表します.また、新しい文字セットを指定することもできます.デフォルトはUTF-16です.2.defaultCharsetは、デフォルトのブラウザおよびオペレーティングシステムの設定に基づいて、現在のドキュメントのデフォルトの文字セットが何であるべきかを示します.

カスタムデータ属性

タグ1を挿入する.innerHTMLプロパティは、呼び出し要素のすべてのサブノードに対応するHTMLタグを返します.書き込みモードでは、innerHTMLは指定した値に基づいて新しいDOMツリーを作成し、呼び出し要素の元のすべてのサブノードをこのDOMツリーで完全に置き換えます.2.outerHTMLプロパティ読み取りモードでは、呼び出されたすべての要素とすべてのサブノードのHTMLラベルを返します.リライトモードでは、指定したHTML文字列に基づいて新しいDOMサブツリーが作成され、呼び出し要素がこのDOMサブツリーで完全に置き換えられます.3.insertAdjacentHTML()メソッドは、2つのパラメータ、挿入位置、挿入するHTMLテキストを受信します.

div.innerHTML = 'hello world!';
div.innerHTML = "hello,\""reader\""!";

scrollIntoView()メソッドこのメソッドは、すべてのHTML要素で呼び出すことができ、ブラウザウィンドウまたはコンテナ要素をスクロールすることで、ビューポートに呼び出す要素が表示されます.このメソッドにtrueをパラメータとして入力するか、パラメータを入力しない場合は、ウィンドウがスクロールすると、呼び出し要素の上部がビューポートの上部とできるだけ平らになります.パラメータとしてfalseが入力されると、呼び出しパラメータはできるだけすべてビューポートに表示され、できれば呼び出し元の下部はビューポートの上部と平らになります.

document.forms[0].scrollIntoView();

独自の拡張機能

ドキュメントモードIE 8は、「ドキュメントモード」という新しい概念を導入した.ページのドキュメントモードによって、どの機能が使用できるかが決まります.すなわち、ドキュメントモードは、どのレベルのcssを使用できるか、JavaScriptでapiを使用できるか、ドキュメントモード(doctype)をどのように扱うかを決定します.ブラウザにページを強制的にレンダリングするには、HTTPヘッダ情報X-UA-Compatibleを使用するか、等価なラベルで設定します:

childrenプロパティこのプロパティはHTML Collectionのインスタンスであり、要素内で同じか要素のサブノードのみが含まれます.サポートされているブラウザは、IE 5、Firefox 3です.5+,Safari 2(バグあり)、Safari 3,ChromeとOpera 8;

var childCount = element.children.length;
var firstChild = element.children[0];

contains()メソッドは、ある子孫ノードが存在するかどうかを検出します.サポートするブラウザは:IE,Firefox 9.5+,Safari,ChromeとOpera 9+;

alert(document.documentElement.contains(document.body));  //true

挿入テキストHTML 5で気に入られていない2つの属性はinnerTextとouterTextです.

スクロール