寫在前面:暫時只是粗略的排版,之後還會整理。也可到 http://bulabula.top/高三筆記/筆記10-12.txt 下載TXT版javascript
10、 DOM
1)、DOM(文檔對象模型)是針對HTML 和XML 文檔的一個API(應用程序編程接口)。DOM描繪了一個層次化的節點樹,容許開發人員添加、移除和修改頁面的某一部分。
10.1 節點層次
10.1.1 Node類型
1)、JavaScript 中的全部節點類型都繼承自Node 類型。全部節點類型都共享着相同的基本屬性和方法。
2)、每一個節點都有一個nodeType 屬性,用於代表節點的類型。
節點類型由在Node 類型中定義的下列12 個數值常量來表示,任何節點類型必居其一:
Node.ELEMENT_NODE(1);
Node.ATTRIBUTE_NODE(2);
Node.TEXT_NODE(3);
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_REFERENCE_NODE(5);
Node.ENTITY_NODE(6);
Node.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8);
Node.DOCUMENT_NODE(9);
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Node.NOTATION_NODE(12)。
1. nodeName 和nodeValue 屬性
1)、使用nodeName 和nodeValue 屬性能夠了解節點的具體信息。
2)、 對於元素節點,nodeName 中保存的始終都是元素的標籤名,而nodeValue 的值則始終爲null。
2. 節點關係
1)、每一個節點都有一個childNodes 屬性,其中保存着一個NodeList 對象。NodeList 是一種類數組對象,用於保存一組有序的節點,能夠經過位置來訪問這些節點。
訪問NodeList中的節點能夠經過方括號,也可使用item()方法。栗子:someNode.childNodes[0]; 或 someNode.childNodes.item(0);
2)、每一個節點都有一個parentNode 屬性,該屬性指向文檔樹中的父節點。包含在childNodes 列表中的全部節點都具備相同的父節點,所以它們的parentNode 屬性都指向同一個節點。
previousSibling和nextSibling 屬性能夠訪問childNodes 列表中某個節點的同胞節點。
父節點的firstChild 和lastChild屬性分別指向其childNodes 列表中的第一個和最後一個節點。
3)、hasChildNodes()方法在節點包含一或多個子節點的狀況下返回true。用來檢測節點是否包含其餘節點。
4)、ownerDocument屬性指向表示整個文檔的文檔節點。
3. 操做節點
1)、appendChild()方法用於向childNodes 列表的末尾添加一個節點。添加完成後childNodes會即時更新,並返回appendChild()新增的節點。若是傳入到appendChild()中的節點已是文檔的一部分了,那結果就是將該節點從原來的位置轉移到新位置。
2)、insertBefore()方法用於把節點放在childNodes 列表中某個特定的位置上,而不是放在末尾。該方法接受兩個參數:要插入的節點和做爲參照的節點。插入節點後,被插入的節點會變成參照節點的前一個同胞節點(previousSibling),同時被方法返回。
3)、replaceChild()方法用於替換並移除節點。方法接受的兩個參數是:要插入的節點和要替換的節點。要替換的節點將由這個方法返回並從文檔樹中被移除,同時由要插入的節點佔據其位置。
4)、removeChild()方法用於移除節點。方法接受一個參數,即要移除的節點。被移除的節點將成爲方法的返回值。
4. 其餘方法
1)、cloneNode()方法用於建立調用這個方法的節點的一個徹底相同的副本。方法接受一個布爾值參數,表示是否執行深複製;爲true時,複製節點及其整個子節點樹;爲false時只複製節點自己。複製後返回的節點副本屬於文檔全部,手動指定父節點。
10.1.2 Document類型
1)、JavaScript 經過Document 類型表示文檔。在瀏覽器中,document 對象是HTMLDocument(繼承自Document 類型)的一個實例,表示整個HTML 頁面。並且,document 對象是window 對象的一個屬性,所以能夠將其做爲全局對象來訪問。
Document 節點具備下列特徵:
nodeType 的值爲9;
nodeName 的值爲"#document";
nodeValue 的值爲null;
parentNode 的值爲null;
ownerDocument 的值爲 null;
其子節點多是一個DocumentType(最多一個)、Element(最多一個)、ProcessingInstruction或Comment。
1. 文檔的子節點
1)、雖然DOM 標準規定Document 節點的子節點能夠是DocumentType、Element、ProcessingInstruction或Comment。
document.documentElement、document.childNodes[0]和document.firstChild均可以取到html元素,但經過documentElement更快捷更直接。
document.body 屬性能夠取得對<body>的引用。
document.doctype屬性能夠取得對<!DOCTYPE>的引用。
2. 文檔信息
1)、document.title;//取得文檔標題。document.title = "New Title";//設置新標題。
2)、document.URL;//取得完整的URL
3)、document.domain;//取得域名 注:因爲document.domain 字符串不同,內外兩個頁面之間沒法相互訪問對方的JavaScript 對象。但若是將這兩個頁面的document.domain 值都設置爲"wrox.com",它們之間就能夠通訊了。
4)、document.referrer;// 取得來源頁面的URL
3. 查找元素
1)、getElementById()方法接收一個參數:要取得的元素的ID。若是找到相應的元素則返回該元素,若是不存在帶有相應ID 的元素,則返回null。如有N個元素的ID相同,則返回第一次出現的元素。注:IE7 及較低本最好不讓表單字段的name 特性與其餘元素的ID 相同。
2)、getElementsByTagName()方法接受一個參數,即要取得元素的標籤名,而返回的是包含零或多個元素的NodeList。在HTML 文檔中,這個方法會返回一個HTMLCollection 對象,做爲一個「動態」集合,該對象與NodeList 很是相似。
HTMLCollection 對象還有一個方法,叫作namedItem(),使用這個方法能夠經過元素的name特性取得集合中的項。
栗子: var images = document.getElementsByTagName("img");
var myImage = images.namedItem("myImage");
3)、getElementsByName()方法會返回帶有給定name 特性的全部元素。
4. 特殊集合
1)、除了屬性和方法,document 對象還有一些特殊的集合。這些集合都是HTMLCollection 對象,爲訪問文檔經常使用的部分提供了快捷方式,包括:
document.anchors,包含文檔中全部帶name 特性的<a>元素;
document.applets,包含文檔中全部的<applet>元素,由於再也不推薦使用<applet>元素,因此這個集合已經不建議使用了;
document.forms,包含文檔中全部的<form>元素,與document.getElementsByTagName("form")獲得的結果相同;
document.images,包含文檔中全部的<img>元素,與document.getElementsByTagName("img")獲得的結果相同;
document.links,包含文檔中全部帶href 特性的<a>元素。
5. DOM 一致性檢測
1)、document.implementation 屬性就是爲此提供相應信息和功能的對象,與瀏覽器對DOM的實現直接對應。
6. 文檔寫入
1)、write()、writeln()、open()和close()。
10.1.3 Element類型
1)、Element 類型用於表現XML或HTML元素,提供了對元素標籤名、子節點及特性的訪問。
Element 節點具備如下特徵:
nodeType 的值爲1;
nodeName 的值爲元素的標籤名;
nodeValue 的值爲null;
parentNode 多是Document 或Element;
其子節點多是Element、Text、Comment、ProcessingInstruction、CDATASection 或EntityReference。
2)、訪問元素的標籤名,可使用nodeName 屬性,也可使用tagName 屬性,返回值相同。
1. HTML 元素
1)、每一個HTML元素中都存在的下列標準特性:
id,元素在文檔中的惟一標識符。
title,有關元素的附加說明信息,通常經過工具提示條顯示出來。
lang,元素內容的語言代碼,不多使用。
dir,語言的方向,值爲"ltr"(left-to-right,從左至右)或"rtl"(right-to-left,從右至左),也不多使用。
className,與元素的class 特性對應,即爲元素指定的CSS類。
2. 取得特性
1)、getAttribute()方法主要用於取得自定義特性。傳遞給getAttribute()的特性名與實際的特性名相同。栗子:div.getAttribute("data-zidingyi")。
3. 設置特性
1)、setAttribute()方法接受兩個參數:要設置的特性名和值。。若是特性已經存在,setAttribute()會以指定的值替換現有的值;若是特性不存在,setAttribute()則建立該屬性並設置相應的值。
2)、removeAttribute()方法用於完全刪除元素的特性。調用這個方法不只會清除特性的值,並且也會從元素中徹底刪除特性。
4. attributes 屬性
1)、Element 類型是使用attributes 屬性的惟一一個DOM 節點類型。attributes 屬性中包含一個NamedNodeMap,與NodeList 相似,也是一個「動態」的集合。
5. 建立元素
1)、document.createElement()方法能夠建立新元素。這個方法只接受一個參數,即要建立元素的標籤名。
2)、appendChild()、insertBefore()或replaceChild()方法能夠把新元素添加到文檔樹。
栗子: var div = document.createElement("div");
div.id = "myNewDiv";
div.className = "box";
或者:
var div = document.createElement("<div id=\"myNewDiv\" class=\"box\"></div >");
而後添加:
document.body.appendChild(div);
6. 元素的子節點
1)、childNodes 屬性中包含了它的全部子節點,這些子節點有多是元素、文本節點、註釋或處理指令。
10.1.4 Text類型
1)、文本節點由Text 類型表示,包含的是能夠照字面解釋的純文本內容。純文本中能夠包含轉義後的HTML 字符,但不能包含HTML 代碼。
Text 節點具備如下特徵:
nodeType 的值爲3;
nodeName 的值爲"#text";
nodeValue 的值爲節點所包含的文本;
parentNode 是一個Element;
不支持(沒有)子節點。
2)、能夠經過nodeValue 屬性或data 屬性訪問Text 節點中包含的文本,這兩個屬性中包含的值相同。對nodeValue 的修改也會經過data 反映出來,反之亦然。
使用下列方法能夠操做節點中的文本。
appendData(text):將text 添加到節點的末尾。
deleteData(offset, count):從offset 指定的位置開始刪除count 個字符。
insertData(offset, text):在offset 指定的位置插入text。
replaceData(offset, count, text):用text 替換從offset 指定的位置開始到offset+count 爲止處的文本。
splitText(offset):從offset 指定的位置將當前文本節點分紅兩個文本節點。
substringData(offset, count):提取從offset 指定的位置開始到offset+count 爲止處的字符串。
1. 建立文本節點
1)、document.createTextNode()用來建立新文本節點,這個方法接受一個參數——要插入節點中的文本。
栗子: var element = document.createElement("div");// 建立一個div元素
element.className = "message";// 給div添加class
var textNode = document.createTextNode("Hello world!");// 建立文本節點
element.appendChild(textNode);// 把文本節點添加到div元素
document.body.appendChild(element);// 最後把div元素添加到body
2. 規範化文本節點
1)、normalize()方法能夠合併同胞文本節點。
3. 分割文本節點
1)、:splitText()方法用來分割文本節點。
10.1.5 Comment類型
1)、註釋在DOM中是經過Comment 類型來表示的。Comment 節點具備下列特徵:
nodeType 的值爲8;
nodeName 的值爲"#comment";
nodeValue 的值是註釋的內容;
parentNode 多是Document 或Element;
不支持(沒有)子節點。
2)、Comment 類型與Text 類型繼承自相同的基類,所以它擁有除splitText()以外的全部字符串操做方法。與Text 類型類似,也能夠經過nodeValue 或data 屬性來取得註釋的內容。
3)、document.createComment()方法傳入遞註釋文本也能夠建立註釋節點。
10.1.6 CDATASection類型
1)、CDATASection 類型只針對基於XML 的文檔,表示的是CDATA 區域。與Comment 相似,CDATASection 類型繼承自Text 類型,所以擁有除splitText()以外的全部字符串操做方法。
CDATASection 節點具備下列特徵:
nodeType 的值爲4;
nodeName 的值爲"#cdata-section";
nodeValue 的值是CDATA 區域中的內容;
parentNode 多是Document 或Element;
不支持(沒有)子節點。
2)、document.createCDataSection()來建立CDATA 區域,只需爲其傳入節點的內容便可。
10.1.7 DocumentType類型
1)、DocumentType類型包含着與文檔的doctype 有關的全部信息,它具備下列特徵:
nodeType 的值爲10;
nodeName 的值爲doctype 的名稱;
nodeValue 的值爲null;
parentNode 是Document;
不支持(沒有)子節點。
10.1.8 DocumentFragment類型
1)、在全部節點類型中,只有DocumentFragment 在文檔中沒有對應的標記。DOM 規定文檔片斷(document fragment)是一種「輕量級」的文檔,能夠包含和控制節點,但不會像完整的文檔那樣佔用額外的資源。
DocumentFragment 節點具備下列特徵:
nodeType 的值爲11;
nodeName 的值爲"#document-fragment";
nodeValue 的值爲null;
parentNode 的值爲null;
子節點能夠是Element、ProcessingInstruction、Comment、Text、CDATASection 或EntityReference。
2)、document.createDocumentFragment()方法能夠建立文檔片斷。
10.1.9 Attr類型
1)、元素的特性在DOM 中以Attr 類型來表示。
特性節點具備下列特徵:
nodeType 的值爲2;
nodeName 的值是特性的名稱;
nodeValue 的值是特性的值;
parentNode 的值爲null;
在HTML 中不支持(沒有)子節點;
在XML 中子節點能夠是Text 或EntityReference。
10.2 DOM 操做技術
10.2.1 動態腳本
1)、使用<script>元素能夠向頁面中插入JavaScript 代碼,一種方式是經過其src 特性包含外部文件,另外一種方式就是用這個元素自己來包含代碼。
動態加載script文件到頁面:
function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
10.2.2 動態樣式
1)、可以把CSS 樣式包含到HTML 頁面中的元素有兩個。其中,<link>元素用於包含來自外部的文件,而<style>元素用於指定嵌入的樣式。
動態加載CSS樣式到頁面:
function loadStyles(url){
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
}
10.2.3 操做表格
1)、爲了方便構建表格,HTML DOM 還爲<table>、<tbody>和<tr>元素添加了一些屬性和方法。
爲<table>元素添加的屬性和方法以下:
caption:保存着對<caption>元素(若是有)的指針。
tBodies:是一個<tbody>元素的HTMLCollection。
tFoot:保存着對<tfoot>元素(若是有)的指針。
tHead:保存着對<thead>元素(若是有)的指針。
rows:是一個表格中全部行的HTMLCollection。
createTHead():建立<thead>元素,將其放到表格中,返回引用。
createTFoot():建立<tfoot>元素,將其放到表格中,返回引用。
createCaption():建立<caption>元素,將其放到表格中,返回引用。
deleteTHead():刪除<thead>元素。
deleteTFoot():刪除<tfoot>元素。
deleteCaption():刪除<caption>元素。
deleteRow(pos):刪除指定位置的行。
insertRow(pos):向rows 集合中的指定位置插入一行。
爲<tbody>元素添加的屬性和方法以下:
rows:保存着<tbody>元素中行的HTMLCollection。
deleteRow(pos):刪除指定位置的行。
insertRow(pos):向rows 集合中的指定位置插入一行,返回對新插入行的引用。
爲<tr>元素添加的屬性和方法以下:
cells:保存着<tr>元素中單元格的HTMLCollection。
deleteCell(pos):刪除指定位置的單元格。
insertCell(pos):向cells 集合中的指定位置插入一個單元格,返回對新插入單元格的引用。
10.2.4 使用NodeList
1)、理解NodeList 及其「近親」NamedNodeMap 和HTMLCollection都是「動態的」;換句話說,每當文檔結構發生變化時,它們都會獲得更新。所以,它們始終都會保存着最新、最準確的信息。從本質上說,全部NodeList 對象都是在訪問DOM文檔時實時運行的查詢。
11、 DOM 擴展
1)、對DOM 的兩個主要的擴展是Selectors API(選擇符API)和HTML5。
11.1 選擇符API
11.1.1 querySelector()方法
1)、querySelector()方法接收一個CSS 選擇符,返回與該模式匹配的第一個元素,若是沒有找到匹配的元素,返回null。
11.1.2 querySelectorAll()方法
1)、querySelectorAll()方法接收的參數是一個CSS 選擇符,返回的是一個NodeList 的實例(相似數組)。
11.1.3 matchesSelector()方法
1)、matchesSelector()方法接收一個參數,即CSS 選擇符,若是調用元素與該選擇符匹配,返回true;不然,返回false。
11.2 元素遍歷
1)、Element Traversal API 爲DOM元素添加了如下5 個屬性。
childElementCount:返回子元素(不包括文本節點和註釋)的個數。
firstElementChild:指向第一個子元素;firstChild 的元素版。
lastElementChild:指向最後一個子元素;lastChild 的元素版。
previousElementSibling:指向前一個同輩元素;previousSibling 的元素版。
nextElementSibling:指向後一個同輩元素;nextSibling 的元素版。
11.3 HTML5
11.3.1 與類相關的擴充
1. getElementsByClassName()方法
getElementsByClassName()方法能夠經過document對象及全部HTML 元素調用該方法。
栗子: document.getElementsByClassName("className");
div.getElementsByClassName("className");
2. classList 屬性
1)、classList 屬性是新集合類型DOMTokenList 的實例。包含以下方法:
add(value):將給定的字符串值添加到列表中。若是值已經存在,就不添加了。
contains(value):表示列表中是否存在給定的值,若是存在則返回true,不然返回false。
remove(value):從列表中刪除給定的字符串。
toggle(value):若是列表中已經存在給定的值,刪除它;若是列表中沒有給定的值,添加它。
11.3.2 焦點管理
1)、document.activeElement 屬性,這個屬性始終會引用DOM 中當前得到了焦點的元素。
2)、document.hasFocus()方法,這個方法用於肯定文檔是否得到了焦點。
11.3.3 HTMLDocument的變化
1. readyState 屬性
1)、 Document 的readyState 屬性有兩個可能的值:
loading,正在加載文檔;
complete,已經加載完文檔。
2. 兼容模式
1)、document.compatMode 的屬性獲取瀏覽器採用了哪一種渲染模式。
3. head 屬性
1)、document.head 屬性用來引用文檔的<head>元素。
栗子:var head = document.head || document.getElementsByTagName("head")[0];
11.3.4 字符集屬性
11.3.5 自定義數據屬性
1)、HTML5 規定能夠爲元素添加非標準的屬性,但要添加前綴data-。能夠經過元素的dataset 屬性來訪問自定義屬性的值。
11.3.6 插入標記
1. innerHTML 屬性
1)、在讀模式下,innerHTML 屬性返回與調用元素的全部子節點(包括元素、註釋和文本節點)對應的HTML 標記。
在寫模式下,innerHTML 會根據指定的值建立新的DOM樹,而後用這個DOM樹徹底替換調用元素原先的全部子節點。
2. outerHTML 屬性
1)、在讀模式下,outerHTML 返回調用它的元素及全部子節點的HTML 標籤。
在寫模式下,outerHTML會根據指定的HTML 字符串建立新的DOM 子樹,而後用這個DOM子樹徹底替換調用元素。
3. insertAdjacentHTML()方法
1)、insertAdjacentHTML()接收兩個參數:插入位置和要插入的HTML 文本。第一個參數必須是下列值之一:
"beforebegin",在當前元素以前插入一個緊鄰的同輩元素;
"afterbegin",在當前元素之下插入一個新的子元素或在第一個子元素以前再插入新的子元素;
"beforeend",在當前元素之下插入一個新的子元素或在最後一個子元素以後再插入新的子元素;
"afterend",在當前元素以後插入一個緊鄰的同輩元素。
11.3.7 scrollIntoView()方法
1)、scrollIntoView()能夠在全部HTML 元素上調用,經過滾動瀏覽器窗口或某個容器元素,調用元素就能夠出如今視口中。若是給這個方法傳入true 做爲參數,或者不傳入任何參數,那麼窗口滾動以後會讓調用元素的頂部與視口頂部儘量平齊。若是傳入false 做爲參數,調用元素會盡量所有出如今視口中,(可能的話,調用元素的底部會與視口頂部平齊。)不過頂部不必定平齊。
11.4 專有擴展
11.4.1 文檔模式
1)、要強制瀏覽器以某種模式渲染頁面,可使用HTTP 頭部信息X-UA-Compatible,或經過等價的<meta>標籤來設置:<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">。
12、
12.2.3 元素大小
1. 偏移量
1)、經過下列4 個屬性能夠取得元素的偏移量:
offsetHeight:元素在垂直方向上佔用的空間大小,以像素計。包括元素的高度、(可見的)水平滾動條的高度、上邊框高度和下邊框高度。
offsetWidth:元素在水平方向上佔用的空間大小,以像素計。包括元素的寬度、(可見的)垂直滾動條的寬度、左邊框寬度和右邊框寬度。
offsetLeft:元素的左外邊框至包含元素的左內邊框之間的像素距離。
offsetTop:元素的上外邊框至包含元素的上內邊框之間的像素距離
2)、計算元素在頁面上的偏移量:
//左偏移量
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
//上偏移量
function getElementTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += current. offsetTop;
current = current.offsetParent;
}
return actualTop;
}
2. 客戶區大小
1)、客戶區大小(client dimension),指的是元素內容及其內邊距所佔據的空間大小。
2)、clientWidth 屬性是元素內容區寬度加上左右內邊距寬度。
3)、clientHeight 屬性是元素內容區高度加上上下內邊距高度。
3. 滾動大小
1)、滾動大小(scroll dimension),指的是包含滾動內容的元素的大小。有些元素(例如<html>元素),即便沒有執行任何代碼也能自動地添加滾動條;但另一些元素,則須要經過CSS 的overflow 屬性進行設置才能滾動。
如下是4 個與滾動大小相關的屬性。
scrollHeight:在沒有滾動條的狀況下,元素內容的總高度。
scrollWidth:在沒有滾動條的狀況下,元素內容的總寬度。
scrollLeft:被隱藏在內容區域左側的像素數。經過設置這個屬性能夠改變元素的滾動位置。
scrollTop:被隱藏在內容區域上方的像素數。經過設置這個屬性能夠改變元素的滾動位置。
4. 肯定元素大小
1)、IE、Firefox 3+、Safari 4+、Opera 9.5 及Chrome 爲每一個元素都提供了一個getBoundingClientRect()方法。這個方法返回會一個矩形對象,包含4 個屬性:left、top、right 和bottom。
因爲該方法各瀏覽器實現不一致,故給出以下兼容各瀏覽器的方法:
function getBoundingClientRect(element) {
var scrollTop = document.documentElement.scrollTop;
var scrollLeft = document.documentElement.scrollLeft;
if (element.getBoundingClientRect) {
if (typeof arguments.callee.offset != "number") {
var temp = document.createElement("div");
temp.style.cssText = "position:absolute;left:0;top:0;";
document.body.appendChild(temp);
arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
document.body.removeChild(temp);
temp = null;
}
var rect = element.getBoundingClientRect();
var offset = arguments.callee.offset;
return {
left: rect.left + offset,
right: rect.right + offset,
top: rect.top + offset,
bottom: rect.bottom + offset
};
} else {
var actualLeft = getElementLeft(element);
var actualTop = getElementTop(element);
return {
left: actualLeft - scrollLeft,
right: actualLeft + element.offsetWidth - scrollLeft,
top: actualTop - scrollTop,
bottom: actualTop + element.offsetHeight - scrollTop
}
}
}
css