JS高級程式之DOM拓展

11.1選擇符API：

SelectorsAPI的核心兩個方法，：querySelector（）和querySlelctorAll（），在相容的瀏覽器中，可以透過Domcument及Element類型的實例可以呼叫他們。

11.1.1 querySelector（）方法：

querySelector（）方法接收一個css選擇符，傳回與該匹配的第一個元素，如果沒有匹配到就傳回null。

透過document呼叫querySelector（）方法會在文檔元素的範圍內查找到符合的元素。

Elementquery呼叫querySelector（）方法只會在該元素後代元素中查找到匹配的元素

11.1.2querySelectorAll（）

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選擇符，如果呼叫的方法和該元素匹配則回傳true。  

11.2 元素遍歷

Elment Traversal API 為DOM元素新增了以下5個屬性。

1：childElementCount：傳回子元素的個數

2：firstElementChild：指向第一個子元素，firstChild 元素版；

3：lastElementChild：指向最後一個子元素，lastChild元素版；

4：previousElementSibling：指向前一個同儕元素；

5：nextElementSibling：指向後一個同儕元素；

11.3HTML5

11.3.1與類別相關的擴充包

1：getElementByClassName（）該方法接收一個參數，一個或多個類別名稱的字串，傳回帶有指定的所有元素的NodeList。

2：classList屬性：（對class=「這裡的動作」）

classList屬性是新集合類型DOMTokenList的實例。與其他DOM集合類似。具有以下方法：

add（value）：將給定的字串新增至清單。

contains（value）：表示清單中是否存在給定的值，有的話就發回傳true 沒有就回傳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的功能。首先就是document.activeElement屬性,這個屬性總是會引用DOM目前所獲得的焦點元素。可以獲得目前使用者焦點的元素。 

使用。 focus（）方法

11.3.3 HTMLDocument的變化

1:readyState屬性

這個屬性有兩個值

##1;loading，正在加載文件

2：complete，已經載入完文件。

使用document.readyState屬性最恰當的方式就是用他來實作一個指示文件已經載入完成的指標。表示文檔已經載入完成。

if(document.readyState=="complete"){
       //执行操作
}

2：相容模式：

自從IE6開始區分渲染頁面的模式是標準的還是混雜的，IE為document添加了一個名為compatMode的屬性，用來告訴開發人員頁面採用了那種渲染模式。

有兩個回傳值：CSS1compat，和BackComapat。

分別對應了標準模式和混雜模式。

3：head屬性

透過document.head不能用就使document.getElementByTagName();

11.3.4 字元集屬性

透過document .charSet=“”；來修改頁面的編碼格式；

11.3.6插入標記

1：innerHTML屬性

在讀取模式下，innerHTML屬性傳回呼叫元素的所有的子節點對應的HTML標記。在寫入模式下，innerHTML會根據指定的值來建立新的DOM樹。

可以利用這個屬性為指定的標籤裡面加上標籤，但並不是所有的標籤都是支援的

2:outerHTML屬性

在讀取模式下，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文字。第一個元素必須是下列值之一。

1：beforebegin，在目前元素之前插入一個緊鄰的同儕元素。

2：afterbegin，在當前元素之下插入一個新的子元素或在第一個元素之前插入新的元素

3：beforeend，在當前元素之下插入一個新的子元素或在最後一個元素之後再插入新的元素

4：afterend在，在元素之後加入一個緊鄰的同儕元素。

4：記憶體與效能問題；

使用本節介紹的方法取代子節點可能會導致瀏覽器的記憶體問題，不過使用innerHTML屬性還是會帶給我們很多的遍歷，原因是，再設定innerHTML或outerHTML的時候會建立一個HTML的解析器，這個解析器是在瀏覽器層級的程式碼基礎上運行的，因此比js快了很多。

11.3.7scrollIntoView方法

捲動

11.4.1文件模式：

文件模式決定了你可以使用哪個等級的css，可以在js中使用哪些API：

總共有四種文件模式：

IE5：以混雜模式渲染頁面， IE8以及更高版本中的新功能都無法使用

IE7：以IE7標準模式渲染頁面，IE8以及更高版本中的新功能都無法使用

IE8：以IE8標準模式渲染,IE8中的新功能都能使用，因此可以使用SelectorsAPI、更多的CSS2級選擇符和某些CSS3功能。還有一些HTML5的功能

IE9 一IE9標準模式渲染頁面。新功能都能使用。例如EMACSript5的功能。

11.4.2 children屬性

children屬性和childNodes幾乎沒有什麼區別，都是用來傳回所有子節點的

11.4.3contain（包含）方法：

用來判斷該節點是不是某節點的後代節點,可以直接理解英文的字面意思，包含。

父節點.contain（某個節點）：如果回傳true，就是包含，否則就回傳false。

也可以使用compareDocumentPosition（）比較檔案位置，會傳回一些遮罩用來決定位置關係

為了模仿contain（）方法應該注重的是傳回16；

11.4.4 插入文字：

1：innerText屬性

會操作元素中所有的值，並以淺入深的方式把文件拼接起來。

和innerHTML的差別是：innerHTML會吧元素標籤都會顯示出來，但是innerText只會回傳拼接好的字串

寫入的時候也只會顯示一個文字子節點。

2：outerText屬性

除了作用範圍擴大到了包含他的節點之外，outerText與innerText基本上沒有多大的區別。在讀取文字的時候結果完全一樣，但是寫入的時候就完全不一樣了。 outerText不只是替換掉呼叫他的元素的子元素，而是會取代整個元素，建議不要使用。

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：Node類型的變更

在DOM2級中，Node類型包含下列特定於命名空間的屬性。

localName：不含命名空間前綴的節點名稱。

namespaceURL：命名空間URL揮舞Null。

prefix：命名空間前綴或null。

2：document類型的變化

DOM2級中的Document類型也發生了變化，包含了下列與命名空間有關的方法。

createElementNs（namespaceURI,tagName）：使用給定的tagName建立一個屬於命名空間namespaceURI的新元素。

createAttributeNS（nameSpaceURI，attributeName）使用給定的attributeName建立一個屬於命名空間nameSpaceURI的新功能。

getElementByTagNameNs（namespaceURI，tagName）傳回屬於命名空間namespaceURI的tagName元素的NodeList。

3：Element類型的變化

「DOM2級」中有關Element的變化，主要涉及操作特性。新增方法如下。

getAttributeNS（namespaceURI，localName）取得命名空間namespaceURI且名為localName的特性

getAttributeNodeNS（namespaceURI，localName）取得屬於命名空間namespaceURI且名為localName的特性節點

getElementsByTagNameNS（namespaceURI，tagName）傳回屬於命名空間namespaceURI的nodeList

hasAttributeNS（namespaceURI，localName）決定目前元素是一個有名為localNaem的特性，而且該特性的命名空間是namespaceURI

#removeAttributeNS（namespaceURI，localName）刪除屬於命名空間namespaceURI且名為localName的特性

setAttributeNS（namespaceURI，qualifiedName，value）：設定屬於命名空間namespaceURI且名為qualifiedName

##setAttributeNodeNS（attNode）設定屬於命名空間namespaceURI的特性節點

4：NamedNodeMap類型的變化

由於特性是透過NamedNodeMap表示的，因此這些方法多數情況下只針對特性使用######1：getNamedItemNS（namespaceURI，localName）：取得屬於命名空間namespaceURI且名為localName的項目######2：removeNamedItemNS（namespaceURI，localName）：移除屬於命名空間namespaceURI且名為localName的項目######3：setNamedItemNS（node）：新增node，這個節點已經事先指定了命名空間資訊。 ###

由於一般都是透過元素存取特性，所以這些方法很少使用。

12.1.2 其他方面的變更

1：documentType類型的變更

新增了三個屬性：publicID systemId 和internalSubset。

2：document類型的變化：

DOM2級核心也為document。 implementation物件規定了兩個新方法：creatDocumentType（）和creatDocument（）

前者用於建立一個新的DocumentType節點，接受三個參數：文件類型，publicID、systemID；

建立新文件時需要使用到createDocument（）方法，同樣也接受三個參數：namesp-aceURI、文件元素的標籤名稱、新文件類型

##3：Node類型的變化

#只是添加了isSupported（）方法：用於確定當前節點具有什麼能力。

這個方法接收兩個參數，特性名稱和特性版本號。

12.2樣式

在HTML中定義樣式的方法有三種：外部，嵌入