セレクタAPI

Selector API Level 1の核心は2つの方法である:querySelector()とquerySelectorAll().実際、jQueryの核心はCSSセレクタを介してDOMドキュメントをクエリーして要素の参照を取得することである.

QuerySelector()メソッド

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

console.log(document.querySelector("body")); //HTMLBodyElement
console.log(document.querySelector("#divId")); //HTMLDivElement
console.log(document.querySelector(".info")); //HTMLParagraphElement
console.log(document.querySelector("p.info")); //HTMLParagraphElement
console.log(document.body.querySelector(".info")); //HTMLParagraphElement
console.log(document.querySelector("body.title")); //null

try{
    document.querySelector(wtf);
}catch(e){
    console.log(e); //ReferenceError stack: message: wtf is not defined
}

このように、サポートされていないセレクタが入力されると、このメソッドはエラーを放出します.

QuerySelectorAll()メソッド

この方法はCSSセレクタを受信し、1つの要素だけでなくすべての一致する要素を返します.このメソッドはNodeListのインスタンスを返します.最下位のインプリメンテーションは、ドキュメントを絶えず検索する動的クエリーではなく、要素のセットのスナップショットに似ています.これにより、NodeLIstオブジェクトの使用を回避できます.このメソッドを呼び出すことができるタイプには、Document、DocumentFragment、Elementがあります.次のようになります.

var p = document.querySelector("#divId").querySelector(".info");
console.log(p.firstChild.nodeValue); //  id divId div   className  .info   

var p = document.querySelectorAll("p");
console.log(p.length); //    p   

同様に、ブラウザでサポートされていないセレクタまたはセレクタに構文エラーが入力された場合、このメソッドはエラーを放出します.

matchesSelector()メソッド

このメソッドは、CSSセレクタ、呼び出し要素がセレクタと一致する場合はtrue、そうでない場合falseを返すパラメータを受け入れます.ブラウザの互換性の問題を解決するには、次のパッケージ関数を使用します.

function matchesSelector(element, selector) {
    if (element.matchSelector) {
        return element.matchesSelector(selector);
    } else if (element.msMatchesSelector) { //IE
        return element.msMatchesSelector(selector);
    } else if (element.mozMatchesSelector) { //FireFox
        return element.mozMatchesSelector(selector);
    } else if (element.webkitMatchesSelector) { //safari,chorme
        return element.webkitMatchesSelector(selector);
    } else {
        throw new Error("No supportted!");
    }
}

console.log(matchesSelector(document.body, "body")); //true

要素がElement Transversal仕様を巡回する

要素間のスペースでは、ブラウザごとに異なる反応が起こり、childNodesやfirstChildなどのプロパティを使用するときの動作が一致しません.
これにより、Element Transversal APIはDOM要素に以下の5つの属性を追加した.

childElementCount:サブ要素の個数(テキストノードと注釈を除く);

firstElementChild:最初のサブエレメント;

lastElementChild:最後のサブエレメント;

previousElementSibling:前の世代要素;

nextElementSibling:次の世代要素;

次のようになります.

    
list1
    
list2
    
list3


var ul = document.querySelector("#ulId");
console.log(ul.querySelectorAll("li").length); //3 list
console.log(ul.childElementCount); //3 list
console.log(ul.firstElementChild.firstChild.nodeValue); //list1
console.log(ul.lastElementChild.firstChild.nodeValue); //list3
var li = ul.querySelectorAll("li");
var li1 = li[0];
console.log(li1.firstChild.nodeValue); //list1
console.log(li1.nextElementSibling.firstChild.nodeValue); //list2
console.log(li1.nextElementSibling.previousElementSibling.firstChild.nodeValue); //list1

Element Transversal対応ブラウザは、IE 9+、Firefox 3.5+、Safari 4+、Chrome、Opera 10+