高階程式設計(第3版)第十章DOM/筆記
阿新 • • 發佈：2020-07-24
DOM
節點層次
Node型別
- NodeList 是一種類陣列 物件，用於儲存一組有序的節點，可以通過位置來訪問這些節點。
- 基於 DOM結構動態執行查詢的結果，因此 DOM結構的變化能夠自動反映 在 NodeList 物件中
- 以將 NodeList 物件轉換為陣列
- var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);
- 每個節點都有一個 parentNode 屬性
- 操作節點
- appendChild()
- insertBefore()
- replaceChild()
- 替換：接受的兩個引數是：要插入的節點和要替換的節點。
- 移除：接受一個引數，即要移除的節點。
- cloneNode()
- 接受一個布林值引數，表示是否執行深複製（true）。
- 複製後返回的節點副本屬於文件所有，但並沒有為它指定父節點。
- 可通過 appendChild()、insertBefore()或 replaceChild()將它新增到文件中
Document型別
documentElement屬性，該屬性始終指向 HTML 頁面中的 <html>元素。
var html = document.documentElement; //取得對<html>的引用
alert(html === document.childNodes[0]); //true
alert(html === document.firstChild); //true
var body = document.body; //取得對<body>的引用
與對網頁的請求有關的屬性
- URL 屬性中包含頁面完整的 URL（即位址列中顯示的 URL）
- domain 屬性中只包含頁面的域名
- referrer屬性中則儲存著連結到當前頁面的那個頁面的 URL。
- 在沒有來源頁面的情況下， referrer 屬性中可能會包含空字串。
HTMLCollection 物件
- getElementById()
- getElementsByTagName()
- namedItem()
- getElementsByName()
- 常使用情況是取得須具有相同的 name 特性單選按鈕
特殊集合
- document.images，包含文件中所有的<img>元素，
- document.links，包含文件中所有帶 href 特性的<a>元素
Element型別
操作特性的 DOM方法
- getAttribute()
- setAttribute()
- removeAttribute() 。
div.getAttribute("id"));
alert(div.getAttribute("class"));
alert(div.getAttribute("title"));
取得自定義特性
<div id="myDiv" my_special_attribute="hello!"></div>
<div id="myDiv" align="left" my_special_attribute="hello!"></div>
div.setAttribute("class", "ft");
div.removeAttribute("class");
attributes 屬性
遍歷元素的特性
document.createElement()
Text 型別
分割文字節點
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!"
小結
NodeList 物件都是“動態的”，即每次訪問 NodeList 物件，都會執行一次查詢。所以要儘量減少 DOM操作。