首頁 > 文章 > web前端 > JS高級程式之DOM拓展

JS高級程式之DOM拓展

小云云原創: 2018-03-07 13:30:131472瀏覽

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（如果列表中存在給定的值，刪除，沒有給定的值就添加它。）

e9132549569fb02f168a4ec8b3ac532894b3e26ee717c64999d7867364b1b4a3
3f1c4e4b6b16bbbd69b2ee476dc4f83a
var elem = document.getElementById("select");
var classNum =elem.classList;
console.log(classNum);
2cacc6d41bbb37262a98f745aa00fbf0

到這裡就可以用上述的方法來對著裡的參數進行操縱了。

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

12.2.1訪問元素的樣式

CSS屬性 javaScript屬性

background-image style.backgroundImage

color style. color

display 與中使用 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：如果樣式變是透過2cdf5bf648cf2f33323966d7f58a7f3f包含的，則是樣式表的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

JS高級程式之DOM拓展

相關文章