SelectorsAPI的核心兩個方法，：querySelector（）和querySlelctorAll（），在兼容的瀏覽器中，可以通過Domcument及Element類型的實例可以調(diào)用他們。

11.1.1 querySelector（）方法：

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

通過document調(diào)用querySelector（）方法會在文檔元素的范圍內(nèi)查找到匹配的元素。

Elementquery調(diào)用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

這個方法接收一個參數(shù)，即css選擇符，如果調(diào)用的方法和該元素匹配則返回true。

11.2 元素遍歷

Elment Traversal API 為DOM元素添加了以下5個屬性。

1：childElementCount：返回子元素的個數(shù)

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

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

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

5：nextElementSibling：指向后一個同輩元素；

11.3HTML5

11.3.1與類相關(guān)的擴充

1：getElementByClassName（）該方法接收一個參數(shù)，一個或者多個類名的字符串，返回帶有指定的所有元素的NodeList。

2：classList屬性：（對class=“這里的操作”）

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

add（value）：將給定的字符串添加到列表中。

contains（value）：表示列表中是否存在給定的值，有的話就發(fā)返回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>

到這里就可以通過上述的方法來對著里的參數(shù)進行操縱了。

11.3.2 焦點管理

HTML5也添加了輔助管理DOM的功能。首先就是document.activeElement屬性,這個屬性始終會引用DOM當(dāng)前獲得的焦點元素。可以獲得當(dāng)前用戶焦點的元素。

使用。focus（）方法

11.3.3 HTMLDocument的變化

1:readyState屬性

這個屬性有兩個值

1；loading，正在加載文檔

2：complete，已經(jīng)加載完文檔。

使用document.readyState屬性最恰當(dāng)?shù)姆绞骄褪怯盟麃韺崿F(xiàn)一個指示文檔已經(jīng)加載完成的指示器。表示文檔已經(jīng)加載完成。

if(document.readyState=="complete"){
 //執(zhí)行操作
}

2：兼容模式：

自從IE6開始區(qū)分渲染頁面的模式是標(biāo)準(zhǔn)的還是混雜的，IE給document添加了一個名為compatMode的屬性，用來告訴開發(fā)人員頁面采用了那種渲染模式。

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

分別對應(yīng)了標(biāo)準(zhǔn)模式和混雜模式。

3：head屬性

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

11.3.4 字符集屬性

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

11.3.6插入標(biāo)記

1：innerHTML屬性

在讀模式下，innerHTML屬性返回調(diào)用元素的所有的子節(jié)點對應(yīng)的HTML標(biāo)記。在寫模式下，innerHTML會根據(jù)指定的值來創(chuàng)建新的DOM樹。

可以利用這個屬性給指定的的標(biāo)簽里面添加標(biāo)簽，但是并不是所有的標(biāo)簽都是支持的

2:outerHTML屬性

在讀模式下，outerHTML返回調(diào)用她的元素及所有子節(jié)點的HTML標(biāo)簽，在寫模式下，outerHTML會根據(jù)指定的HTML字符創(chuàng)建新的DOM樹，然后用這個DOM子樹完全替換調(diào)用元素。

var val = elem.outerHTML;

讀模式：返回所有的HTML標(biāo)簽

寫模式：取代對應(yīng)的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（）方法

插入標(biāo)記的最后一個方法。

接收兩個參數(shù)：插入位置和要插入的HTML文本。第一個元素必須是下列值之一。

1：beforebegin，在當(dāng)前元素之前插入一個緊鄰的同輩元素。

2：afterbegin，在當(dāng)前元素之下插入一個新的子元素或者在第一個元素之前插入新的元素

3：beforeend，在當(dāng)前元素之下插入一個新的子元素或者在最后一個元素之后再插入新的元素

4：afterend在，在元素之后添加一個緊鄰的同輩元素。

4：內(nèi)存與性能問題；

使用本節(jié)介紹的方法替換子節(jié)點可能會導(dǎo)致瀏覽器的內(nèi)存問題，不過使用innerHTML屬性還是會給我們帶來很多的遍歷，原因是，再設(shè)置innerHTML或outerHTML的時候會創(chuàng)建一個HTML的解析器，這個解析器是在瀏覽器級別的代碼基礎(chǔ)上運行的，因此比js快了很多。

11.3.7scrollIntoView方法

滾動

11.4.1文檔模式：

文檔模式?jīng)Q定了你可以使用哪個級別的css，可以在js中使用哪些API：

總共有四種文檔模式：

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

IE7：以IE7標(biāo)準(zhǔn)模式渲染頁面，IE8以及更高版本中的新功能都無法使用

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

IE9 一IE9標(biāo)準(zhǔn)模式渲染頁面。新功能都能使用。比如EMACSript5的功能。

11.4.2 children屬性

children屬性和childNodes幾乎沒有什么區(qū)別，都是用來返回所有子節(jié)點的

11.4.3contain（包含）方法：

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

父節(jié)點.contain（某個節(jié)點）：如果返回true，就是包含，否則就返回false。

還可以使用compareDocumentPosition（）比較文件位置，會返回一些掩碼用來確定位置關(guān)系

為了模仿contain（）方法應(yīng)該注重的是返回16；

11.4.4 插入文本：

1：innerText屬性

會操作元素中所有的值，并按照由淺入深的方式把文檔拼接起來。

和innerHTML的區(qū)別是：innerHTML會吧元素標(biāo)簽都顯示出來，但是innerText只會返回拼接好的字符串

寫入的時候也是只會顯示一個文本子節(jié)點。

2：outerText屬性

除了作用范圍擴大到了包含他的節(jié)點之外，outerText與innerText基本上沒有多大的區(qū)別。在讀取文本的時候結(jié)果完全一樣，但是寫入的時候就完全不一樣了。outerText不只是替換掉調(diào)用他的元素的子元素，而是會替換整個元素，建議不要使用。

11.4.5滾動：

1：scrollIntoviewIfNeeded（alignCenter）：只在當(dāng)元素在視口中不可見的情況下，才滾動瀏覽器。

2：scrollByLines（lineCount）：將元素的內(nèi)容滾動到指定的頁面高度，lineCount可以使正值也可以是負值。

3：scrollBypage（pageCount）：將元素的內(nèi)容滾動到指定的頁面高度，具體高度由元素的高度決定。

注意：scrollIntoView（）和scrollIntoviewIfNeeded（alignCenter）的作用對象是元素容器，而scrollByLines（lineCount）和scrollBypage（pageCount）的作用對象是是元素本身。

12章：DOM2和DOM3

12.1.1針對XML命名空間的變化

有了XML命名空間，不同的XML文檔的元素就可以混合在一起，不用擔(dān)心命名沖突，從技術(shù)上說，HTML不支持XML命名空間，但XHTML支持XML命名空間。

1：Node類型的變化

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

localName：不帶命名空間前綴的節(jié)點名稱。

namespaceURL：命名空間URL揮著Null。

prefix：命名空間前綴或者null。

2：document類型的變化

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

createElementNs（namespaceURI,tagName）：使用給定的tagName創(chuàng)建一個屬于命名空間namespaceURI的新元素。

createAttributeNS（nameSpaceURI，attributeName）使用給定的attributeName創(chuàng)建一個屬于命名空間nameSpaceURI的新特性。

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

3：Element類型的變化

“DOM2級”中有關(guān)Element的變化，主要涉及操作特性。新增方法如下。

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

getAttributeNodeNS（namespaceURI，localName）取得屬于命名空間namespaceURI且名為localName的特性節(jié)點

getElementsByTagNameNS（namespaceURI，tagName）返回屬于命名空間namespaceURI的nodeList

hasAttributeNS（namespaceURI，localName）確定當(dāng)前元素是一個有名為localNaem的特性，而且該特性的命名空間是namespaceURI

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

setAttributeNS（namespaceURI，qualifiedName，value）：設(shè)置屬于命名空間namespaceURI且名為qualifiedName的特性值為value

setAttributeNodeNS（attNode）設(shè)置屬于命名空間namespaceURI的特性節(jié)點

4：NamedNodeMap類型的變化

由于特性是通過NamedNodeMap表示的，因此這些方法多數(shù)情況下只針對特性使用

1：getNamedItemNS（namespaceURI，localName）：取得屬于命名空間namespaceURI且名為localName的項

2：removeNamedItemNS（namespaceURI，localName）：移除屬于命名空間namespaceURI且名為localName的項

3：setNamedItemNS（node）：添加node，這個節(jié)點已經(jīng)事先指定了命名空間信息。

由于一般都是通過元素訪問特性，所以這些方法很少使用。

12.1.2 其他方面的變化

1：documentType類型的變化

添加了三個屬性：publicID systemId 和internalSubset。

2：document類型的變化：

DOM2級核心還為document。implementation對象規(guī)定了兩個新方法：creatDocumentType（）和creatDocument（）

前者用于創(chuàng)建一個新的DocumentType節(jié)點，接受三個參數(shù)：文檔類型，publicID、systemID；

創(chuàng)建新文檔時需要使用到createDocument（）方法，同樣也接受三個參數(shù)：namesp-aceURI、文檔元素的標(biāo)簽名、新文檔類型

3：Node類型的變化

就只是添加了isSupported（）方法：用于確定當(dāng)前節(jié)點具有什么能力。

這個方法接收兩個參數(shù)，特性名和特性版本號。

12.2樣式

在HTML中定義樣式的方法有三種：外部<link>，嵌入<style>，使用style屬性在元素標(biāo)簽里進行修改。

12.2.1訪問元素的樣式

CSS屬性 javaScript屬性

background-image style.backgroundImage

color style.color

display style.display

font-family style.fontFamily

1：DOM樣式屬性和方法：

“DOM2級樣式”規(guī)范還為style對象定義了一些屬性和方法。這些屬性和方法在提供元素style特性的同時，也可以修改樣式。下面列出了這些屬性和方法。

cssText：可以訪問到style中的CSS代碼

length：應(yīng)用給于是你素的CSS屬性的數(shù)量。

parentRule：表示CSS信息的CSSRule對象

getPropertyCssValue（propertyName）：返回包含給定屬性值的CssVal對象。

getPropertyPriority（propertyName）：如果屬性給定了！important設(shè)置，就返回！important，否則就返回空字符串

getPropertyValue（）返回給定屬性的字符串值

item（）返回給定位置的CSS屬性的名稱

removeProperty（propertyName）：從樣式中刪除給定的樣式

setProperty（）將給定屬性設(shè)置為相應(yīng)的值，并加上優(yōu)先權(quán)限標(biāo)志。

在實際開發(fā)中，getPropertyValue（）用的比較頻繁

2計算的樣式

getComputedStyle（）方法。這個方法需要接受兩個參數(shù)：要取得計算樣式的元素和一個偽元素字符串。如果不需要偽元素字符串，可以填null。

例子：取得元素樣式

12.2.2 操作樣式表

CSSStyleSheet 繼承自StyleSheet，后者可以作為一個接口來定義非CSS樣式表。從StyleSheet接口繼承而來的屬性如下。

disable：表示樣式表是否被禁用布爾值

href：如果樣式變是通過<link>包含的，則是樣式表的URL：否則，是null

media：當(dāng)前樣式表支持的所有媒體類型的集合

ownerNode：指向擁有當(dāng)前樣式表的節(jié)點的指針

parentStyleSheet:一個指向?qū)胨麡邮奖淼闹羔?/p>

title：ownerNode中title屬性的值。

type：表示樣式表類型的字符串

cssRules樣式表中的規(guī)則集合

ownerRule：如果樣式表是通過@import導(dǎo)入的，這個屬性就是一個指針，指向表示導(dǎo)入的規(guī)則，否則，值為null

deleteRule（index）：刪除指定的規(guī)則

insertRule：（方法）向cssRule集合中插入rule字符串

應(yīng)用于文檔的所有樣式都是通過docuement.stylesheets集合來表示的

1：CSS規(guī)則：

CSSStyleSheet對象包含以下對象：

cssText：返回整條規(guī)則對應(yīng)的文本。

parentRule：如果當(dāng)前規(guī)則是導(dǎo)入規(guī)則，這個屬性就返回導(dǎo)入規(guī)則；否則就是null

parentStyleSheet：當(dāng)前規(guī)則所屬的樣式表

SelectorText：返回當(dāng)前規(guī)則的選擇符文本。

Style：一個CSSStyleDeclaration對象，可以通過它設(shè)置和取得規(guī)則中特定樣式的樣式表。

type：表示規(guī)則類型的常量值。

其中最常用的屬性是cssText，selectorText和Style。

2：創(chuàng)建規(guī)則

DOM規(guī)定。要向現(xiàn)在有樣式的表中添加新規(guī)則，需要使用insertRule（）方法。這個方法接受兩個參數(shù)：規(guī)則文本和插入的索引

例子：

sheet.insertRule("body{background-color:silver}",0);//DOM方法。

跨瀏覽器的方式插入規(guī)則，可以使用下面的函數(shù)。這個函數(shù)接受四個值：要向其中添加規(guī)則的樣式表以及與addRule（）相同的三個參數(shù)，如圖：

3.刪除規(guī)則：

從樣式表中刪除規(guī)則的方法是deleteRule（）

1：偏移量

元素可見的大小由其高度、寬度決定，包括所有的內(nèi)邊距、滾動條的邊框大?。ㄗ⒁?，不包括外邊框）。通過下列四個屬性可以取得元素的偏移量。

offsetHeight：元素在垂直放上上占用的空間大小，一像素計；

offsetWidth：元素在水平方向上占用空間的大小，以像素記。

offsetLeft：元素的左邊框至包含元素的左內(nèi)邊框之間的像素距離。

offsetTop：元素上外邊框至元素上內(nèi)邊框之間的距離。

其中offsetLeft和offsetTop屬性與包含元素有關(guān)，包含元素的引用存在offsetParent屬性中

2：客戶區(qū)的大?。?/p>

盒子模型分為外邊距（margin）內(nèi)邊距（padding）邊框（border）和內(nèi)容（contain）區(qū)域

客戶區(qū)就類似于盒子模型的contain區(qū)域，有兩個屬性，clienWidth和clienHeight

3：滾動大?。?/p>

滾動大小指的是包含滾動內(nèi)容的元素的大小

包含了四個值：

scrollHeight：在沒有滾動條的情況下，元素內(nèi)容的總高度

scrollWidth：在沒有滾動條的情況下，元素內(nèi)容的總寬度

scrollLeft：被影藏在內(nèi)容區(qū)域左邊的像素數(shù)

scrollTop：被影藏在內(nèi)容區(qū)域上方的像素數(shù)

scrollHeight和scrollWidth只要用于確定元素內(nèi)容的實際大小。

通過scrollLeft和scrollRgiht屬性既可以確定當(dāng)前滾動的狀態(tài)，也可以設(shè)置元素滾動的位置。

4：確定元素大小

各個瀏覽器為每個元素都提供了一個getBoundingClientRect（）方法，這個方法返回一個矩形對象，包含四個屬性：left、top、right、和bottom

12.3 遍歷

DOM2級遍歷和范圍模塊定義了兩個用于輔助完成順序遍歷DOM結(jié)構(gòu)的類型：NodeIterator和TreeWalker。

12.3.1 NodeIterator

NodeIterator類型是兩者中比較簡單的一個，可以使用document.creatNodeIterator()方法創(chuàng)建他的新實例。這個方法接收四個參數(shù)

root：想要作為搜索起點的樹中的節(jié)點。

whatToshow：表示要訪問哪些節(jié)點的數(shù)字代碼。

filter：是一個NodeFilter對象

entityReferenceExpansion：布爾值，表示是否要擴展實體引用。

DOM2級遍歷和范圍

（1）遍歷即使用NodeIterator或TreeWalker對DOM執(zhí)行深度優(yōu)先的遍歷

（2）NodeIterator是一個簡單的接口，只允許以一個節(jié)點的步幅前后移動。而TreeWalker在提供相同功能的同時，還支持在DOM結(jié)構(gòu)的各個方向上移動，包括父節(jié)點、同輩節(jié)點、和子節(jié)點等方向。

（3）范圍是選擇DOM機構(gòu)中特定部分，然后再執(zhí)行相應(yīng)操作的一種手段。

（4）使用范圍選區(qū)可以在刪除文檔中某些部分的同時，保持文檔結(jié)構(gòu)的格式良好，或者復(fù)制文檔的相應(yīng)部分。

（5）IE8及更早版本不支持“DOM2級 遍歷和范圍”模塊，但它提供了一個專有的文本范圍對象，可以用來完成簡單的基于文本的操作范圍。IE9完全支持DOM遍歷

17章：錯誤處理及調(diào)試：
17.1.1 IE

IE是唯一一個在瀏覽器界面窗體中顯示JS錯誤的，發(fā)生JS錯誤時，瀏覽器左下角會出現(xiàn)一個黃色的圖標(biāo)，旁邊顯示著Error on page

17.2.1try-catch語句：

try{
 //可能出錯的語句
}catch（error）{
 //怎么處理 
}

1：finally子句

finally在try語句中一定會被執(zhí)行，不管catch語句是否已經(jīng)執(zhí)行，他會忽略catch語句。

2：錯誤類型：

Error

EvalError

RangeError

ReferenceError

SyntaxError

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com