第11章、DOM拡張

11.1セレクタAPI

querySelector()とquerySelectorAll()の2つのメソッドは、CSSセレクタを受信し、querySelector()は、モードに一致する最初の要素を返し、querySelectorAll()は、モードに一致するすべての要素からなるNodeListインスタンスを返します.この2つのメソッドはdocumentタイプとElementタイプで呼び出すことができます.matchesSelector()メソッドはCSSセレクタを受信し、呼び出された要素がマッチングモードに一致するとtrueを返し、そうでない場合falseを返します.

11.2要素遍歴

要素サブノードを直接取得すると、要素間の空白文字がテキストノードに解析されるため、Elementは新しい属性を定義します.childElementCountは、サブ要素の数を返します.FirstElementCountは、最初のサブエレメントを指します.LastElementCountは、最後のサブエレメントを指します.previousElementSiblingは、前の世代の要素を指します.nextElementSiblingは、次の世代要素を指します.これらのプロパティを使用すると、空白のテキストノードを心配する必要がなく、要素ノードにのみ作用します.

11.3 HTML5

11.3.1クラス関連拡張
getElementsByClassName()メソッドは、1つ以上のクラス名を含む文字列というパラメータを受信し、指定したクラス名を持つ要素からなるNodeListを返します.複数のクラス名が入力された場合、前後順は影響しません.classListプロパティは、要素のすべてのクラス名を含む新しい集合タイプDOMTokenListのインスタンスです.add()、文字列パラメータを入力し、要素に指定したクラス名を追加する方法があります.既に存在する場合は追加しません.contains()は、文字列パラメータを入力し、要素に指定したクラス名が含まれているかどうかを検出し、含まれている場合はtrueを返し、そうでない場合はfalseを返します.remove()は、文字列パラメータを入力し、指定したクラス名を削除します.toggle()は、文字列パラメータを入力し、リストにクラス名が存在する場合は削除し、存在しない場合は追加します.
11.3.2焦点管理
document.ActiveElementプロパティは、DOMで現在フォーカスされている要素を常に参照します.ドキュメントのロードが完了したばかりのとき、このプロパティにはdocumentが保存されています.body要素の参照.document.hasFocus()メソッドは,文書に焦点が当てられているか否かを判断する.ドキュメントがフォーカスされているかどうかを検出することで、ユーザーがページと対話しているかどうかを知ることができます.
11.3.3 HTMLドキュメントの変更
document.readyStateプロパティ.loadingはドキュメントをロードしていることを示し、completeはドキュメントのロードが完了したことを示します.document.compatModeプロパティは、ページレンダリングモードが標準かハイブリッドかを表し、標準モードでは「CSS 1 Compat」、ハイブリッドモードでは「BackCompat」の値を表します.document.ドキュメントの要素を参照するheadプロパティ.

//  onload          
if(document.readyState == "complete"){
    //     
}
//         
if(document.compatMode == "CSS1Compat"){
    console.log("    ");
}else{
    console.log("    ");
}
//      head  
var head = document.head || document.getElementsByTagName("head")[0];

11.3.4文字セットのプロパティ
document.charsetプロパティは、ドキュメントで実際に使用されている文字セットを表し、デフォルト値は「UTF-16」で、変更できます.document.defaultCharsetプロパティは、デフォルトのブラウザおよびオペレーティングシステムの設定に基づいて、現在のドキュメントのデフォルト文字セットを表します.
11.3.5カスタムデータ属性
要素は非標準のプロパティを追加できますが、data接頭辞を追加します.要素にレンダリングに関係のない情報、または意味情報を指定します.カスタム属性を追加すると、dataset属性でカスタム属性の値にアクセスできます.属性名にはdata接頭辞がありません.

 var p = document.querySelector("p");
 console.log(p.dataset.myname);  // a

11.3.6 插入标记

使用插入标记技术，直接插入HTML字符串，比DOM操作更加简单，速度也更快。
innerHTML属性，返回调用元素的所有子节点对应的HTML标记，可以修改，会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。
outerHTML属性，返回调用元素本身和其所有子节点对应的HTML标记，可以修改，会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素本身和其原先的所有子节点。
insertAdjacentHTML()方法，接收两个参数，第一个参数必须为以下值：
“beforebegin”，在当前元素前插入一个紧邻的同辈元素。
“afterbegin”，在当前元素的第一个子元素之前插入一个新子元素。
“beforeend”，在当前元素的最后一个子元素之后插入一个新子元素。
“afterend”，在当前元素后插入一个紧邻的同辈元素。
第二个参数为HTML字符串，与innerHTML和outerHTML相同。
多次使用innerHTML会导致性能问题，最好的做法是单独构建好字符串，带一次性将结果字符串赋值给innerHTML。

11.3.7 scrollIntoView()方法

可以在所有元素上调用该方法，让调用元素出现在浏览器视口当中，传入true参数或者不传参数时，元素滚动后会尽量与视口顶部齐平。传入false参数时，元素会尽可能全部出现在视口中（尽可能与底部齐平）。

---

11.4専有拡張

11.4.1 children属性

children属性将只包含元素子节点，会忽略元素之间的空白符。当元素只包含元素子节点时，与childNodes相同。

11.4.2 contains()方法

该方法用于判断一个节点是否为另一个节点的后代，祖先节点调用该方法，接收一个参数，即要检测的后代节点，参数是后代节点则返回true，否则返回false。

    
abc


var a = document.querySelector("#a");
var b = document.querySelector("#b");
console.log(a.contains(b));  // true

compareDocumentPosition()メソッドは、ノード間の関係を検出し、2つのノード関係を表すビットマスクを返すこともできます.1、関係ない;2、前に立つ;4、局居後;8、含む;16は、含まれる.

var a = document.querySelector("#a");
var b = document.querySelector("#b");
console.log(a.compareDocumentPosition(b));  // 20（     4        16）

互換性は、ノードがノードのサブノードであるかどうかを検出する方法です.

function containsNode(node1,node2) {
    if(typeof node1.contains == "function"){
        return node1.contains(node2);
    }else if(typeof node1.compareDocumentPosition == "function"){
    //         ，                 
        return !!(node1.compareDocumentPosition(node2) & 16);
    }else{
    //                   DOM  。
        var node = node2.parentNode;
        do{
            if(node === node1){
                return true;
            }else{
                node = node.parentNode;
            }
        }while (node !== null);
    }
}