JS高級程序之DOM拓展

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的特性值為value

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中定義樣式的方法有三種：外部<link>，嵌入<style>，使用style屬性在元素標簽里進行修改。

12.2.1訪問元素的樣式

CSS屬性 javaScript屬性

background-image style.backgroundImage

color style.color

display style.display

font-family style.fontFamily

1：DOM樣式屬性和方法：

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

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

length：應用給于是你素的CSS屬性的數量。

parentRule：表示CSS信息的CSSRule對象

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

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

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

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

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

setProperty（）將給定屬性設置為相應的值，并加上優先權限標志。

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

2計算的樣式

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

例子：取得元素樣式

12.2.2 操作樣式表

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

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

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

media：當前樣式表支持的所有媒體類型的集合

ownerNode：指向擁有當前樣式表的節點的指針

parentStyleSheet:一個指向導入他樣式表的指針

title：ownerNode中title屬性的值。

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

cssRules樣式表中的規則集合

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

deleteRule（index）：刪除指定的規則

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

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

1：CSS規則：

CSSStyleSheet對象包含以下對象：

cssText：返回整條規則對應的文本。

parentRule：如果當前規則是導入規則，這個屬性就返回導入規則；否則就是null

parentStyleSheet：當前規則所屬的樣式表

SelectorText：返回當前規則的選擇符文本。

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

type：表示規則類型的常量值。

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

2：創建規則

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

例子：

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

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

3.刪除規則：

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

1：偏移量

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

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

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

offsetLeft：元素的左邊框至包含元素的左內邊框之間的像素距離。

offsetTop：元素上外邊框至元素上內邊框之間的距離。

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

2：客戶區的大小：

盒子模型分為外邊距（margin）內邊距（padding）邊框（border）和內容（contain）區域

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

3：滾動大小：

滾動大小指的是包含滾動內容的元素的大小

包含了四個值：

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

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

scrollLeft：被影藏在內容區域左邊的像素數

scrollTop：被影藏在內容區域上方的像素數

scrollHeight和scrollWidth只要用于確定元素內容的實際大小。

通過scrollLeft和scrollRgiht屬性既可以確定當前滾動的狀態，也可以設置元素滾動的位置。

4：確定元素大小

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

12.3 遍歷

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

12.3.1 NodeIterator

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

root：想要作為搜索起點的樹中的節點。

whatToshow：表示要訪問哪些節點的數字代碼。

filter：是一個NodeFilter對象

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

DOM2級遍歷和范圍

（1）遍歷即使用NodeIterator或TreeWalker對DOM執行深度優先的遍歷

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

（3）范圍是選擇DOM機構中特定部分，然后再執行相應操作的一種手段。

（4）使用范圍選區可以在刪除文檔中某些部分的同時，保持文檔結構的格式良好，或者復制文檔的相應部分。

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

17章：錯誤處理及調試：
17.1.1 IE

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

17.2.1try-catch語句：

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

1：finally子句

finally在try語句中一定會被執行，不管catch語句是否已經執行，他會忽略catch語句。

2：錯誤類型：

Error

EvalError

RangeError

ReferenceError

SyntaxError

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