高程3總結#第10章DOM

時間 2021-02-16

標籤 javascript html java node 數組 app dom 工具 url spa 欄目 HTML 简体版

原文原文鏈接

DOM

節點層次

Node類型

DOM1級定義了一個Node接口，該接口將由DOM中的全部節點類型實現
節點類型由在Node類型中定義的12個數值常量來表示，任何節點類型必居其一javascript
- 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對象，是一種數組對象，用於保存一組有序的節點，能夠經過位置來訪問這些節點。html
- childNodesjava
```
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列表中的第一個和最後一個節點。

操做節點node

appendChild()，向childNodes列表的末尾添加一個節點。添加節點以後，childNodes的新曾節點、父節點以及之前的最後一個子節點的關係都會相應地獲得更新數組
```
//someNode 有多個子節點
var returnedNode = someNode.appendChild(someNode.firstChild);
alert(returnedNode == someNode.firstChild); //false
alert(returnedNode == someNode.lastChild); //true
```

insertBefore()，把節點放在childNodes列表中某個特定的位置上。接收兩個參數，要插入的點和做爲參照的節點app

//插入後成爲最後一個子節點
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()，替換節點。接收兩個參數，要插入的節點和要替換的節點，要替換的節點將由這個方法返回並從文檔樹中移除，同時由要插入的節點佔據其位置dom
```
//替換第一個子節點
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對象的一個屬性，所以能夠將其做爲全局對象來訪問。url
- nodeType值爲9
- nodeName值爲"#document"
- nodeValue值爲null
- parentNode值爲null
- ownerDocument值爲null

document對象有一些標準的Document對象所沒有的屬性，這些屬性提供了document對象所表現的網頁的一些信息spa

//取得文檔標題
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);
```