DOM

 

DOM

node類型（基本類型，如下其餘類型的鼻祖）

　　一、nodeType

　　　　　　parentNode:父節點

　　　　　　childNodes:子節點(理解成一個數組)

　　　　　　 someNode.firstChild == someNode.childNodes[0];

　　　　　　 someNode.lastChild == someNode.childNodes[someNode.childNodes.length-1];

　　　　　　 previouSiblings和nextSibling：兄弟節點

　　　　　　 hasChildNodes()判斷是否有子節點

　　　　　　 元素文本都算是節點

　　二、操做節點

　　　　　　插入

　　　　　　　　appendChild();向末尾插入,(標籤的裏面)

　　　　　　　　insertBefore();將節點插入到某個特定位置，第一個參數插入的節點，第二個參數參照節點

　　　　　　替換

　　　　　　　　replaceChild()：第一個參數：新節點，第二個參數是要替換的

　　　　　　移除

　　　　　　　　removeChild(node);節點參數

　　　　　　　　

　　　　　　複製

　　　　　　　　cloneNode();布爾參數，true是深複製

Document類型（對象）（得到，寫入文檔節點，location用法）

　　document對象是window對象的屬性。

　　一、文檔信息

　　　　　　documentElement屬性（指向html元素）

　　　　　　body屬性（body元素）

　　　　　　document.doctype;//取得<!DOCTYPE>的引用

　　　　　   document.title:獲取或設置title的值

　　　　　　取：var title = document.title

　　　　　　改：document.title = 「xxx」

　　二、網頁信息

　　　　　　

　　　　　　　　document.location.href === document.URL

　　　　　　(在console打印時少用等號)

　　　　　　　　例：document.domain = "www.baidu.html",domain是能夠設置的

　　　　　　獲取前一個頁面的url:document.referrer 　　　　　　

　　　　　　location對象的用法,如下新增

　　　　　　

　　  三、獲取元素

　　　　　　getElementById();取得id

　　　　　　getElementsByTagName();取得標籤名

　　　　　　getElementByName();根據name屬性名返回元素，經常使用在單選按鈕中

　　四、寫入元素

　　　　　　write():字符串參數，直接原樣輸出到文檔流中，在頁面加載完成後執行會複寫整個頁面

　　　　　　writeIn();同上，可是在末尾會添加換行符　　

　　　　　　open(),close()打開或關閉網頁的輸出流

Element類型（建立標籤名和屬性特性的操做）

　　提供了對元素標籤的名，子節點及特性的訪問

　　一、訪問標籤名

　　　　　　元素.tagName;//"DIV"

　　　　　　元素.nodeName;//"DIV"

　　二、html

　　　　　　屬性：id,className,title,lang,dir,這些屬性均可以用來獲取或修改屬性值

　　　　　　　　var ele = document.getElementById("id");

　　　　　　獲取：

　　　　　　　　alert(ele.id);

　　　　　　修改：

　　　　　　　　ele.id = "someOtherId";

　　三、取得元素特性

　　　　　　getAttribute(屬性名);//ele.getAeeribute("id");//id//getAttribute("class")

　　　　　　　　特色：style特性，用getAttribute();訪問獲取到的是css文本，經過屬性訪問則會返回一個對象。

　　四、設置元素特性

　　　　　　setAttribute("設置的特姓名"，值);

　　　　　　　　ele.setAttribute("class","newClass");

　　　　　　　　另外一種寫法：ele.class = "newClass";//注意自定義的屬性這樣修改會報錯

　　五、刪除元素的特性

　　　　　　removeAttribute();會完全刪除元素特性

　　六、attributes屬性

　　　　　　只有Element類型使用，動態的特性類型集合，包含NameNodeMap對象，有如下方法（不經常使用）

　　　　　　　  （nodeName:特性名稱，nodeValue:特性的值）

　　　　　　　　getNamedItem(name);返回nodeName屬性等於name的節點；

　　　　　　　　removeNamedItem(name);移除nodeName屬性等於name的節點；返回的是被刪除的節點

　　　　　　　　setNamedltem(node);向列表中添加節點

　　　　　　　　item(pos);返回位於數字pos處的節點

　　　　　　　　例：var id  = ele.attributes.getNamedItem("id").nodeValue;//獲取元素的id特性

　　　　　　　　　　var id = ele.attributes["id"].nodeValute;//這裏把attributes理解爲對象

　　　　　　　　　　設置新值：

　　　　　　　　　　ele.attributes[」id「].nodeValue = "newid";

　　　　　　用這個屬性來迭代屬性的值，attributes.length,用for遍歷（把元素屬性封裝到數組裏）

　　七、建立新元素

　　　　　　document.createElement(標籤名);

　　　　　　例：var div = document.createElement("div");

　　　　　　　　div.id = "newId"

　　　　　　只是建立了個新元素，但未把它添加到文檔樹裏

　　八、將新元素添加到文檔樹裏

　　　　　　document.body.appendchild(div);

text類型

　　純文本內容，不能包含元素標籤，沒有子節點

　　訪問

　　　　　　nodeValue屬性和data屬性

 

　　 建立

　　　　　　document.createTextNode();

　　

　　添加

　　　　　　appendData(text);將內容添加到節點末尾（標籤裏面）

　   插入

　　　　　　insertData(offset,text);在offset位置插入count

　　刪除

　　　　　　deleteData(offset,count);從offert位置開始刪除count個字符

　　替換

　　　　　　replaceData(offset,count,text);用text替換offset到count的文本

　　分割

　　　　　　splitText(offset);從offset開始將文本分爲兩個文本節點

　　　　　　返回從數字開始以後的文本，包含數字下的那個字符。原文本留下數字以前的文本。

　　獲取

　　　　　　substringData(offset,count);提取從offset開始到count結尾的文本

　　length屬性

　　　　　　nodeValue.length = data.length

　　合併文本節點，假設一個元素下有兩個文本節點，用這個方法合併後只有一個

　　　　　　normalize();

Comment類型

　　註釋相關，和text類型繼承同一個基類

　　建立註釋

　　　　　　document.createComment();

CDATASection類型

　　用在XML文檔下，表示CDATA區域

DocumentType類型

　　包含文檔有關doctype的有關信息

DocumentFragment類型

　　建立了文本片斷，不會顯示在文檔流中，看成一個備用倉庫使用

　　建立

　　　　　　document.createDocumentFragment();　

Attr類型

　　表示元素特性，特性也就是存在於attributes屬性中的節點

　　  屬性：name,value,specified:布爾值，區別指定的仍是默認的

　　建立

　　　　　　document.createAttribute();

　　賦值

　　　　　　var attr = document.createAttribute("align");

　　　　　　attr.value = "left";

　　獲取

　　　　　　ele.attributes["align"].value

　　　　　　ele.getAttributeNode("align").value;

　　　　　　ele.getAttribute("value");

　　添加

　　　　　　ele.setAttributeNode("align");

DOM操做技術

動態腳本

　   建立隨時調用的腳本

　　　　

　　　　　　 用script元素的text屬性來添加腳本內容

　　　　　　或者用appendChild()來添加（ie下會出錯），執行起來有點像eval()方法

動態樣式

　　建立外部樣式

　　

　　建立內部樣式（會實時執行）

　　

　　以上添加樣式代碼在ie下會出錯，另外一個方法：

　　　　style.styleSheet.cssText = "body{width:100px;}",

　　　　styleSheet是style元素的屬性

操做表格

　　各類table屬性。。。

使用NodeList

　　有點像NamedNodeMap和HTMLCollection

　　動態的dom流，能夠用for,length屬性迭代，每次訪問都會查詢一次文檔，因此要減小直接對dom的操做。

總結：

　　　　　　一、node是最基本的節點類型，其餘類型都繼承自它。

　　　　　　二、document類型表示整個文檔，跟節點，document是document類型的實例。

　　　　　　三、element節點表示文檔的html和xml元素。

　　　　　　四、操做文本節點。

 

DOM拓展

選擇符API

　　document類型新增

　　一、querySelector();接收一個css選擇符

　　　　　　

　　二、querySelectorAll();接收一個css選擇符

　　　　　　取得該選擇符下的全部元素，返回一個NodeList

　　　　　　例：var p = document.querySelectorAll("p strong");//取得p元素下的全部strong元素

　　element類型新增

　　三、matchesSelector()；接收一個css選擇符參數，判斷元素是不是個css選擇符的引用，返回true或者false。不經常使用

元素遍歷（查找）

　　節點類型

　　　　　　childElementCount：返回子元素的個數，不包括文本節點和註釋

　　　　　　filstElementChild：返回第一個子元素，firstChild的元素版

　　　　　　lastElementChild：返回最後一個子元素

　　　　　　previousElementChild：返回前一個同胞元素，previousSibling的元素版

　　　　　　nextElementChild：返回後一個同胞元素，nextSibling的元素版

HTML5

　　類相關

　　　　　　一、getElementsByClassName();

　　　　　　　　　　例：取得id爲text下的全部類名爲info的元素

　　　　　　　　　　document.getElementById("text").getElementsByClassName("info");

　　　　　　二、元素的classList屬性，表示元素的類列表，一樣這個屬性是新集合DOMTokenList的實例，它有如下方法(兼容性較差)

　　　　　　　　　　添加類

　　　　　　　　　　　　add(value);

　　　　　　　　　　　　例：ele.classList.add("newClass")

　　　　　　　　　　判斷是否存在類

　　　　　　　　　　　　contains(value);返回布爾值

　　　　　　　　　　刪除

　　　　　　　　　　　　remove(value);

　　　　　　　　　　刪除或給定，有則刪除，無則添加

　　　　　　　　　　　　toggle(value);

　　焦點管理

　　　　　　一、document.activeElement：得到當前得到焦點的元素，文檔加載完表示的是body,加載中是null

　　　　　　二、document.hasFocus()：檢查文檔是否得到焦點,用這個方法判斷用戶是否正在與頁面交互　

　　HTMLDocument的變化

　　　　　　一、readyState屬性

　　　　　　　　　　兩個值：

　　　　　　　　　　　　loading正在加載的文檔

　　　　　　　　　　　　complete已經加載完成的文檔

　　　　　　　　　　if(document.readyState == complete){}等於onload事件

　　　　　　二、compatMode屬性，區分頁面渲染模式

　　　　　　　　　　兩個值：

　　　　　　　　　　　　CSS1Compat：標準模式

　　　　　　　　　　　　BackCompat：混雜模式

　　　　　  三、document.head屬性，兼容性差

　　字符集屬性（編碼相關）

　　　　　　一、document.charset = "UTF-8";修改charset的值

　　　　　　二、defaultCharset：表示瀏覽器默認的字符集是什麼，兼容性差

　　自定義數據屬性

　　　　　　爲元素添加屬性，但要data-爲開頭，

　　　　　　　　　　例：<div id="add" data-num = "123"></div>

　　　　　　dataset屬性來獲取或設置自定義屬性

　　　　　　　　　　例：ele.dataset.num = "1234";//這個ele最好是id獲取的元素，惟一的

　　插入標記

　　　　　　一、innerHTML屬性：返回或調用元素的全部子節點（包括註釋和文本）相似於jq的html()方法。

　　　　　　　　

　　　　　　　　　　不能單純的直接插入script和style標籤

　　　　　　二、outerHTML屬性

　　　　　　　　　　可讀：獲取調用元素的全部子節點的html標籤

　　　　　　　　　　修改：替換包括調用元素在內的全部內容

　　　　　　三、insertAdjacentHTML()方法

　　　　　　　　　　

　　　　　　四、scrollIntoView()方法：對全部html元素可用，滾動頁面，讓元素出如今視口中，兼容差

專有拓展

　　一、文檔模式

　　二、children屬性

　　　　　　表示元素子節點，等同於childNodes

　　三、contains()方法

　　　　　　檢查某個元素是否是被調用元素（使用這個方法的祖先元素）的子元素。是，則返回對，接收一個元素參數。

　　四、插入文本

　　　　　　　innerText屬性：會返回調用元素下的全部節點數裏的文本內容（會拼接起來），修改的話也會所有複寫能夠添加html代碼。若是要過濾掉html代碼，在使用一遍innerText便可。在ie的兼容上可使用textContent　

　　　　　　outerText屬性：調用和innerText同樣，可是修改會徹底覆蓋元素，包括調用的元素，也就等同於刪除了調用元素，不建議使用。　

　　五、滾動

　　　　　　scrollIntoViewIfNeeded(alignCenter);

　　　　　　scrollByLines(lineCount);

　　　　　　scrollByPages(pageCount);

　　

DOM2和DOM3

　　這部份內容就是升級了dom的用法，增長了許多屬性方法，增強了交互功能。

　　DOM變化

　　　　　　一、DocumentType類型，新增3個屬性：

　　　　　　　　　　publicId,systemId,internalSubset,這三個都是有關文檔類型聲明的屬性

　　　　　　二、視圖模塊新增defaultView屬性，指向給定的窗口，是視圖部分惟一新增的屬性，ie不支持，但在ie下有個等價的屬性parentWindow

 　　　　　　  三、建立新html文檔document.implementation.createHTMLDocument("new doc");兼容不好

　　　　　 四、一些node類型的變化

　　　　　　　　　　比較節點的引用對象和類型返回布爾值：isSameNode()和isEqualNode()，參數是比較節點，可使被調用的節點也能夠是其餘節點

　　　　　　　　　　setUserData(),將屬性，值，函數綁定給某個節點，三個參數，屬性，value，數據處理函數

　　　　　　　　　　　　　　例：document.body.serUserData("name","newBody",function(){})

　　　　　　　　　　getUserData(),得到設置的屬性值

　　　　　　　　　　　　　　例：var data = document.body.getUserData("name")

　　　　　　五、框架的變化

　　樣式　

　　　　　（style屬性）針對行內

　　　　　　　　訪問：

　　　　　　　　　　ele.style.backgroundImage//ele.style.color//ele.style.cssFloat！！

　　　　　　　　獲取：alert(ele.style.color)

　　　　　　　　重寫：cssText

　　　　　　　　　　ele.style.cssText = "color:red;font-size:10px";

　　　　　　　　遍歷：length，item()

　　　　　　　　getPropertyValue(屬性名)方法；返回屬性值的字符串表示

　　　　　　　　　　ele.style.getPropertyValue("color")

　　　　　　　　刪除

　　　　　　　　　　ele.style.removeProperty("border");

　　　　　　計算的樣式(不論是行內仍是外鏈等等)都是隻讀的用法

　　　　　　　　　　一、document.dafultView.getComputedStyle("要計算樣式的元素"，「僞元素的字符串，例：after，沒有就填null」)

　　　　　　　　　　

　　　　　　　　　　　　ie不支持，可是有個相同的屬性：ele.currentStyle

　　　　　　　操做樣式表（鏈入樣式表和<style>插入的樣式表）

　　　　　　　　　　　　一、文檔中樣式表的集合：document.styleSheets,有個length屬性

　　　　　　　　　　　　　　getStyleSheet():返回某個樣式表對象

　　　　　　　　　　　　二、css規則

　　　　　　　 元素大小（元素的屬性，只讀的）

　　　　　　　　　　　　offsetHeight,offsetWidth：元素的寬高，包括邊框，水平滾動條

　　　　　　　　　　　　offsetLeft,offsetTop：元素的外邊框到包含元素的內邊框間的距離

　　　　　　　　　　

　　　　　　　　　　　　若是容器是body，那麼getElementLeft()和offsetLeft是同樣的

　　　　　　　客戶區大小（只讀的）

　　　　　　　　　　　　clientWidth屬性：內容區寬度加內邊距寬度

　　　　　　　　　　　　clientHeight屬性：同上

　　　　　　　　　　

 

 

　　　　　　　　　　瀏覽器的視口大小：document.body.clientWidth。。。

　　　　　　滾動

　　　　　　　　　　scrollHeight：沒有滾動條的狀況下，元素內容的總高度，能夠獲取元素的實際高度

　　　　　　　　　　scrollWidth：同上

　　　　　　　　　　scrollLeft：被隱藏在內容區域左側的像素數，設置這個屬性能夠改變元素的滾動位置

　　　　　　　　　　scrollTop：同上，scrollTop = 0;讓元素滾回到頂部

　　　　　　　　

　　　　　　　肯定元素的大小

　　　　　　　　getBoundingClientRect(),返回元素的一個矩形模型，有left,right,top,bottom四個屬性，表示相對於視口的位置

　　遍歷

　　　　dom2定義了兩個用於順序遍歷dom結構的類型：NodeIterator和TreeWalker,IE不支持遍歷dom

　　　　　　　　一、NodeIterator

　　　　　　　　　　建立該類型的實例：document.createNodeIterator()　四個參數

　　　　　　　　　　主要方法：nextNode()向前遍歷，previousNode()向後遍歷

　　　　　　　　二、TreeWalker

　　　　　　　　　　升級版遍歷，多方向遍歷，除了上述兩個方法，還有：

　　　　　　　　　　　　parentNode();父節點，

　　　　　　　　　　　　firstChild();第一個子節點

　　　　　　　　　　　　lastChild();當前節點最後一個子節點；

　　　　　　　　　　　　nextSibling();當前節點的下一個同輩節點；

　　　　　　　　　　　　previousSibling();遍歷到當前節點的上一個同輩節點

　　　　　　　　　　建立一個遍歷實例：document.createTreeWalker();一樣有四個參數

　　範圍

　　　　選擇文檔中的一個區域

　　　　　建立dom範圍：var range = document.createRange();

　　　　   每一個範圍是range類型的實例，有如下屬性或方法　　　　

 

　　　　　　　　　　添加內容：

　　　　　　　　　　　　selectNode(),接收一個dom節點，用該節點內容來填充範圍，會選擇整個節點，包括子節點。

　　　　　　　　　　　　selectNodeContents(),只選擇節點的子節點

　　　　　　　　　　實現複雜選擇：

　　　　　　　　　　　　setStart()和setEnd()

　　　　　　操做dom範圍裏的內容

　　　　　　　　刪除：一、deleteContents()

　　　　　　　　　　　二、extractContents();也是刪除，可是它會返回範圍的文檔片斷，能夠用這個返回的添加到其餘元素裏

　　　　　　　　克隆：cloneContents,複製文檔片斷的一個副本

　　　　　　　　插入：insertNode();向範圍選取的開始出插入一個節點

　　　　　　　　　　　surroundContents：環繞範圍添加內容

　　　　　　　　摺疊：collapse();一個參數，true摺疊到開始位置，false摺疊到結束位置

　　　　　　　　比較：compareBoundaryPoints();來肯定某些範圍是否有公共邊界

　　　　　　　　複製：cloneRange();複製範圍的一個副本

　　　　　　　　清理使用後的範圍：detach();一旦清除就不能在使用了