過程本身就是收穫: 7月 2016

節點概論

常見的節點物件類型，他個別有常數值來表示，可以使用屬性的nodeType來取得

DOCUMENT_NODE = 9
ELEMENT_NODE = 1
ATTRIBUTE_NODE = 2
TEXT_NODE = 3
DOCUMENT_FRAGMENT_NODE = 11
DOCUMENT_TYPE_NODE = 10

處理節點的屬性

childNodes-取得子節點的集合
firstChild-取得第一個節點，但他會包含文字及註解
lastChild-取得最後一個節點，但他會包含文字及註解
nextSibling-取得下一個節點，但他會包含文字及註解
nodeName-取得節點的名稱
nodeType-取得節點的類型
nodeValue-取得節點的值
parentNode
previousSibling-取得上一個節點，但他會包含文字及註解

處理節點的方法

appendChild()-加入節點，加在節點的最後一個
cloneNode()-複製節點

//只複製節點本身
document.querySelector('ul').cloneNode();
//複製節點及子結點
document.querySelector('ul').cloneNode(true);

compareDocumentPosition()-取得所選取的節點及傳入的節點之間的資訊
contains()-是否包含某個節點
hasChildNodes()-是否有子節點
insertBefore()-加入節點，加在節點的前一個節點

//在ul的第一個li前加入一個新的li
ul.insertBefore(li, ul.firstChild);

isEqualNode()-判斷節點是否相同
removeChild()-移除節點
replaceChild()-替換節點

//把divA替換成newSpan
divA.parentNode.replaceChile(newSpan, divA);

文件方法

document.createElement()-建立元素
document.createTextNode()-建立文字節點

HTML Element 屬性

innerHTML-建立HTML字串，並加入到DOM
outerHTML-建立HTML字串，並取代自己
textContent-建立文字節點，並加入到DOM
innerText-建立文字節點，並加入到DOM(非標準的用法)
outerText-建立文字節點，並取代自己(非標準的用法)
firstElementChild-取得第一個節點，但他不包含文字及註解
lastElementChild-取得最後一個節點，但他不包含文字及註解
nextElementChild-取得下一個節點，但他不包含文字及註解
previosElementChild-取得上一個節點，但他不包含文字及註解
children

HTML 元素方法

insertAdjacentHTML()-這個方法比前面inner或outer還要精確，來看個範例

<i id="elm">how</i>
var elm = document.getElementById("elm");
elm.insertAdjacentHTML('beforebegin', '<span>Hey-</span>');
elm.insertAdjacentHTML('afterbegin', '<span>dude-</span>');
elm.insertAdjacentHTML('beforeend', '<span>-are</span>');
elm.insertAdjacentHTML('afterend', '<span>-you?</span>');
//
console.log(document.body.innerHTML);
//<span>Hey-</span><i id="A"><span>dude-</span>how<span>-are</span></i>
//<span>-you?</span>

節點通常取回來的型態是NodeList或HTMLCollection，他很像陣列但又不是javascript的陣列，如果要轉成javascript的陣列可以透過js的方法來轉型

[].slice.call(ulElementChildNodes);

文件節點

HTMLDocument常用的屬性與方法

docType-文件定義類型
documentElement-html Tag的節點
implementation.*-document.implementation.hasFeature()方法來偵測規格，像是Core、CSS等支援的版本，但又不能全然的信任，還是要自行偵測
activeElement-取得目前focus的節點
body-取得身體的部分
head-取得頭的部分
title-取得標題名稱
lastModified-取得最後一次修改的時間
referrer-取得網址參考
URL-取得完整網址
defaultView-取得window物件
compatMode-取得相容的版本
ownerDocument-取得自身的windows物件
hasFocus()-判斷節點是否有聚焦

元素節點

HTML * Element物件的屬性與方法

createElement()-建立元素
tagName-取得tag名稱
children-取得子元素
getAttribute()-取得屬性
setAttribute()-設定屬性
hasAttribute()-判斷是否有此屬性
removeAttribute()-移除屬性
classList()-class的集合，可運用add()、remove()、contains()、toggle()來設定class
dataset-屬性裡為data-開頭的屬性
attributes-取得屬性集合

選擇元素節點

有兩種取元素的種類方式

一種是平常常用的getElementById、getElementByTagName、getElementByClassName等
另一種則是querySelector()、querySelectorAll()
第一種可隨著頁面的動態取得當下的元素，但第二種方式則是取得頁面一開始完成節點的快照

元素節點幾何與捲動幾何

這章講到幾個跟元素大小距離有關的用法

offsetParent-父層
offestTop-取得離上麵的距離
offsetLeft-取得離右邊的距離
getBoundingClientRect()-可以取得上下左右的邊寬大小
offsetHeight-取得整體的高度(邊線＋內拒＋內容)
offsetWidth-取得整體的寬度(邊線＋內拒＋內容)
clientHeight-取得整體的高度(內拒＋內容)
clientWidth-取得整體的寬度(內拒＋內容)
elementFromPoint()-取得特定地癲最上面的元素
scrollHeight-捲動的節點的高度
scrollWidth-捲動的節點的寬度
scrollTop-取得設定距離上方捲動的像素
scrollLeft-取得設定距離左方捲動的像素
scrollIntoView()-將元素捲入可視區

元素節點行內樣式

這章節基本上就是在說元素的樣式設定在tag的style裡，原則上跟CSS差不多，而且現在大部分都以設定CSS為主要方式，所以這章節跳過

文字節點

幾個常用的屬性

textContent-設定會取回所有文字節點
splitText()-將文字節點拆開來
appendData()-加入文字到文字節點的最後面
deleteData()-移除文字節點裡的某一段文字，用字元的起始位置及長度
insertData()-插入文字節點裡的某一段文字，用字元的起始位置及文字
replaceData()-替換文字節點裡的某一段文字，用字元的起始位置、長度及文字
subStringData()-取得文字節點裡的某一段文字，用字元的起始位置及長度
normalize()-將兩個同級的文字節點合併在一起
data-與nodeValue一樣會取回文字節點的內容
document.createTextNode()-建立一個純文字的節點

DocumentFragment節點

為了避免動態網頁有過多的渲染，我們盡可能使用DocumentFragment來做一次性的插入HTML文件，操作方式都相同，只是要先把create出來的節點及元素先append到Fragment在append到document

CSS樣式表與CSS規則

這章節都在說明可對CSS檔案做一些增刪，基本上我們不太會這樣使用

DOM的JavaScript

用defer 來延遲下載及執行js檔
用async來非同步下載及執行js檔

DOM事件

介紹了所有事件，像是onclick、onfocus、onblur等
事件得冒泡行為
addEventListener()-註冊事件
removeEventListener()-移除註冊的事件
preventDefault()-取消預設的事件
stopPropagation()-停止事件流，也就是冒泡行為
stopImmediatePropagation()-停止事件流及同一個目標的其他事件
createEvent()-建立事件
initCustomEvent()-初始化事件
dispatchEvent()-呼叫自訂事件

過程本身就是收穫

標籤

2016年7月17日星期日

DOM深入精要

標籤

2016年7月17日 星期日

DOM深入精要

2016年7月17日星期日