高程3總結#第10章DOM
阿新 • • 發佈：2018-12-09
DOM
節點層次
Node型別
- DOM1級定義了一個Node介面，該介面將由DOM中的所有節點型別實現
-
節點型別由在Node型別中定義的12個數值常量來表示，任何節點型別必居其一
- Node.ELEMENT_NODE();
- Node.ATTRIBUTE_NODE();
- Node.TEXT_NODE();
- Node.CDATA_SECTION_NODE();
- Node.ENTITY_REFERENCE_NODE();
- Node.ENTITY_NODE();
- Node.PROCESSING_INSTRUCTION_NODE();
- Node.COMMENT_NODE();
- Node.DOCUMENT_NODE();
- Node.DOCUMENT_TYPE_NODE();
- Node.DOCUMENT_FRAGMENT_NODE();
- Node.NOTATION_NODE();
- 使用nodeName和nodeValue檢測節點型別
-
節點關係，儲存NodeList物件，是一種陣列物件，用於儲存一組有序的節點，可以通過位置來訪問這些節點。
-
childNodes
var firstChild=someNode.childNodes(); var secondChild=someNode.childNodes.item(); var count=someNode.childNodes.length(); - parentNode，每個節點都有parentNode屬性，屬性指向文件樹的節點，包含在childNodes列表中的所有節點都具有相同的父節點，因此它們的parentNode屬性都指向同一個節點。此外包含在childNodes列表中的每個節點相互之間都是同胞節點。
- 通過使用列表中每個節點的previousSibling和nextSibling屬性可以訪問同一列表中的其他節點。列表中第一個節點的previousSibling屬性值為null，而列表中最後一個節點nextSibling屬性的值同樣也為null
- 父節點的firstChild和lastChild屬性分別指向childNodes列表中的第一個和最後一個節點。
-
-
操作節點
-
appendChild()，向childNodes列表的末尾新增一個節點。新增節點之後，childNodes的新曾節點、父節點以及以前的最後一個子節點的關係都會相應地得到更新
//someNode 有多個子節點 var returnedNode = someNode.appendChild(someNode.firstChild); alert(returnedNode == someNode.firstChild); //false alert(returnedNode == someNode.lastChild); //true -
insertBefore()，把節點放在childNodes列表中某個特定的位置上。接收兩個引數，要插入的點和作為參照的節點
//插入後成為最後一個子節點 returnedNode = someNode.insertBefore(newNode, null); alert(newNode == someNode.lastChild); //true //插入後成為第一個子節點 var returnedNode = someNode.insertBefore(newNode, someNode.firstChild); alert(returnedNode == newNode); //true alert(newNode == someNode.firstChild); //true //插入到最後一個子節點前面 returnedNode = someNode.insertBefore(newNode, someNode.lastChild); alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true -
replaceChild()，替換節點。接收兩個引數，要插入的節點和要替換的節點，要替換的節點將由這個方法返回並從文件樹中移除，同時由要插入的節點佔據其位置
//替換第一個子節點 var returnedNode = someNode.replaceChild(newNode, someNode.firstChild); //替換最後一個子節點 returnedNode = someNode.replaceChild(newNode, someNode.lastChild); -
removeChild()，移除節點，接收一個引數，即要移除的節點。
//移除第一個子節點 var formerFirstChild = someNode.removeChild(someNode.firstChild); //移除最後一個子節點 var formerLastChild = someNode.removeChild(someNode.lastChild); - cloneNode()，接收一個布林值引數，表示是否執行深複製，在引數為true的情況下，執行深複製，也就是複製節點及其整個子節點樹，在引數為false的情況下，執行淺複製，即只複製節點本身。
-
Document型別
-
document物件是HTMLDocument的一個例項，表示整個HTML頁面，而且，document物件是window物件的一個屬性，因此可以將其作為全域性物件來訪問。
- nodeType值為9
- nodeName值為"#document"
- nodeValue值為null
- parentNode值為null
- ownerDocument值為null
-
document物件有一些標準的Document物件所沒有的屬性，這些屬性提供了document物件所表現的網頁的一些資訊
//取得文件標題 var originalTitle = document.title; //設定文件標題 document.title = "New page title"; //取得完整的 URL var url = document.URL; //取得域名 var domain = document.domain; //取得來源頁面的 URL var referrer = document.referrer; - 查詢元素，getElementById()、getElementByTagName()和getElementByName()
-
特殊集合
- document.anchors，包含文件中所有帶name特性的<a>元素
- document.applets，包含文件中所有的<applet>元素，因為不再推薦使用<applet>元素，所以這個集合不再使用
- document.forms，包含文件中所有的<form>元素
- document.images，包含文件中所有的<img>元素
- document.links，包含文件中所有帶href特性的<a>元素
-
文件寫入功能，write()、writeln()、open()和close()
<html> <head> <title>document.write() Example</title> </head> <body> <p>The current date and time is: <script type="text/javascript"> document.write("<strong>" + (new Date()).toString() + "</strong>"); </script> </p> </body> </html>
Element型別
-
用於表現XML或HTML元素，提供了對元素標籤名、子節點及特性的訪問
- nodeType值為1
- nodeName值為元素的標籤名
- nodeValue值為null
- parentNode可能是Document或Element
-
HTML元素存在一些標準特性
- id，元素在文件中唯一的識別符號
- title，有關元素的附加說明資訊，一般通過工具提示條顯示出來
- lang，元素內容的語言程式碼，很少使用
- dir，語言的方向
- className，與元素的class特性對應
-
取得特性，設定屬性，移除屬性。getAttribute()、setAttribute()和removeAttribute()
var div = document.getElementById("myDiv"); alert(div.getAttribute("id")); //"myDiv" alert(div.getAttribute("class")); //"bd" alert(div.getAttribute("title")); //"Body text" alert(div.getAttribute("lang")); //"en" alert(div.getAttribute("dir")); //"ltr" div.setAttribute("id", "someOtherId"); div.setAttribute("class", "ft"); div.setAttribute("title", "Some other text"); div.setAttribute("lang","fr"); div.setAttribute("dir", "rtl"); div.removeAttribute("class"); -
attribute屬性
var id = element.attributes.getNamedItem("id").nodeValue; var id = element.attributes["id"].nodeValue; element.attributes["id"].nodeValue = "someOtherId"; var oldAttr = element.attributes.removeNamedItem("id"); element.attributes.setNamedItem(newAttr); - 建立元素，createElement()，標籤名在HTML文件中不區分大小寫，在XML文件中，區分大小寫。
Text型別
-
包含的是照字面解釋的純文字的內容
- nodeType值為3
- nodeName值為"#text"
- nodeValue值為節點所包含的文字
- parentNode是一個Element
- 不支援子節點
-
操作方法
- 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為止處的字串
-
建立文字節點document.createTextNode()
var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); document.body.appendChild(element); -
規範化文字節點normalize()
var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); var anotherTextNode = document.createTextNode("Yippee!"); element.appendChild(anotherTextNode); document.body.appendChild(element); alert(element.childNodes.length); //2 element.normalize(); alert(element.childNodes.length); //1 alert(element.firstChild.nodeValue); // "Hello world!Yippee!" -
分割文字節點splitText()
var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); document.body.appendChild(element); var newNode = element.firstChild.splitText(5); alert(element.firstChild.nodeValue); //"Hello" alert(newNode.nodeValue); //" world!" alert(element.childNodes.length); //2
Comment型別
-
註釋在DOM中通過Comment型別來表示
- nodeType值為8
- nodeName值為"#comment"
- nodeValue值是註釋的內容
- parentNode可能是Document或Element
- 不支援子節點
- COmment型別與Text型別繼承自相同的基類，因此它擁有splitText()之外的所有字串操作方法。與Text型別相似，也可以通過nodeValue或data屬性類取得註釋的內容。
-
使用document.createCommet()併為其傳遞註釋文字也可以建立註釋節點
var comment=document.createComment("A comment")
CDATASection型別
-
與Comment類似，繼承自Text型別，擁有除splitText()之外的所有字串操作方法
- nodeType值為4
- nodeName值為"#cdata-section"
- nodeValue值為CDATA區域中的內容
- parentNode可能是Document或Element
DocumentType型別
-
包含著與文件的doctype有關的所有資訊
- nodeType值為10
- nodeName值為doctype的名稱
- nodeValue值為null
- parentNode是Document
- 不支援子節點
DocumentFragment型別
-
輕量級文件，可以包含和控制節點，不會像完整的文件那樣佔用額外的資源
- nodeType值為11
- nodeName值為"#document-fragement"
- nodeValue值為null
- parentNode值為null
Attr型別
-
特性是存在於元素的attribute屬性中的節點
- nodeType值為2
- nodeName值是特性的名稱
- nodeValue值為特性的值
- parentNode值為null
- 在HTML中不支援子節點
- 在XML中子節點可以是Text或EntityReference
DOM操作技術
動態指令碼
- 頁面載入時不存在，但將來的某一時刻通過修改DOM動態新增的指令碼。兩種方式建立：插入外部檔案和直接插入JavaScript程式碼
動態樣式
- 能夠把CSS樣式包含到HTML頁面中的元素有兩個，其中<ling>元素用於包含來自外部的檔案，而<style>元素用於指定嵌入的樣式
操作表格
-
屬性和方法
- 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> 元素新增的屬性和方法如下。
//建立 table var table = document.createElement("table"); table.border = 1; table.width = "100%"; //建立 tbody var tbody = document.createElement("tbody"); table.appendChild(tbody); // 建立第一行 tbody.insertRow(0); tbody.rows[0].insertCell(0); tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1")); tbody.rows[0].insertCell(1); tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1")); // 建立第二行 tbody.insertRow(1); tbody.rows[1].insertCell(0); tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2")); tbody.rows[1].insertCell(1); tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2")); //將表格新增到文件主體中 document.body.appendChild(table);