DOM
DOM是Document Object Model的縮寫，每次載入網頁時，瀏覽器便會建立DOM，DOM將網頁內的物件以樹狀排列。例如head跟body是html的children，title又是head的child，而html為整個樹的root。這個結構可以協助我們取得網頁內的物件，進而針對物件進行新增修改刪除等操作。HTML DOM document物件是網頁中所有物件的擁有者，所以document便是表示整個網頁，要取得網頁中的物件，永遠都要使用document關鍵字開頭。document擁有以下方法來讓我們取得、改變與增刪物件。
- Finding:
- document.getElementById(id): 根據id尋找。
- document.getElementsByTagName(name): 根據標籤名尋找。
- document.getElementsByClassName(name): 根據類別名尋找。
- 部分舊版的指令在html5依然支援。
- document.anchors: returns all <a>
- document.baseURI
- document.body: returns the <body> element
- document.cookie
- document.doctype
- document.documentElement: returns the <html> element
- document.documentMode
- document.documentURI
- document.domain
- document.embeds: returns all <embed> elements
- document.forms: returns all <form> elements
- document.head: returns the <head> element
- document.images: returns all <img> elements
- document.implementation
- document.inputEncoding
- document.lastModified
- document.links: returns all <area> and <a> elements that have a href attribute
- document.readyState
- document.referrer
- document.scripts: returns all <script> elements
- document.strictErrorChecking
- document.title: returns the <title> element
- document.URL
- Some other document properties & Methods:
- document.createElement(element): 建立元件。
- document.createAttribute(): 建立屬性node。
- document.createComment(): 建立comment node。
- document.createEvent(): 建立event node。
- document.createTextNode(): 建立text node。
- document.lastModified: 傳回last modified的時間日期。
- document.write(text): 寫上文字。
- 屬性:
- element.accessKey: 設定或傳回element的accesskey。
- element.attributes: 傳回element的屬性。
- element.childElementCount: 傳回element的child數。
- element.childNodes: 傳回一個element的child節點(包含文字跟註解)。
- element.children: 傳回一個element的child節點(不包含文字跟註解)。
- element.classList: 傳回一個element的class name(s)。
- element.clientHeight: 傳回一個element的height，包含padding。
- element.clientLeft: 傳回一個element左邊邊界的寬。
- element.Top: 傳回一個element上方邊界的寬。
- element.Width: 傳回一個element的width，包含padding。
- element.contentEditable: 設定或傳回element是否是editable。
- element.dir: 設定或傳回element的dir屬性之值。
- element.firstChild: 傳回element的first child。
- element.firstElementChild: 傳回element的first child element。
- element.id: 設定或傳回一個element的id。
- element.innerHTML: 設定或傳回一個element的html內容。
- element.innerText: 設定或傳回一個node及其後代的文字內容。
- element.isContentEditable: 傳回element是否editable。
- element.lang: 設定或傳回一個element的lang屬性值。
- element.lastChild: 傳回element的last child。
- element.lastElementChild: 傳回element的last child element。
- element.namespaceURI: 傳回一個element的namespace URI。
- element.nextSibling: 傳回一個element的下一個sibling。
- element.nextElementSibling: 傳回一個element的下一個sibling element。
- element.nodeName: 傳回node的名字。
- element.nodeType: 傳回node的型態
- element.nodeValue: 設定或傳回node的值。
- element.offsetHeight: 傳回element的height，包含padding,border跟scrollbar。
- element.offsetWidth: 傳回element的width，包含padding,border跟scrollbar。
- element.offsetLeft: 傳回element水平向的offset position。
- element.offsetParent: 傳回element對其container的offset position。
- element.offsetTop: 傳回element垂直向的offset position。
- element.ownerDocument: 傳回root element。
- element.parentNode: 傳回element的parent node。
- element.parentElement: 傳回element的parent element。
- element.previousSibling: 傳回node的前一個sibling node。
- element.previousElementSibling: 傳回前一個sibling element。
- element.scrollHeight: 傳回element的entire height，包含padding。
- element.scrollLeft: 設定或傳回element content水平向scrolled的pixels數值。
- element.scrollTop: 設定或傳回element content垂直向scrolled的pixels數值。
- element.scrollWidth: 傳回element的entire width，包含padding。
- element.style: 設定或傳回element的style。
- element.tabIndex: 設定或傳回element的tabindex屬性值。
- element.tagName: 傳回element的tag name。
- element.textContent: 設定或傳回node及其後代之文字內容。
- element.title: 設定或傳回element的title屬性值。
- 方法:
- element.addEventListener(): 附加event handler到element。
- element.appendChild(): 附加一個child到element。
- element.blur(): 移除element的焦點。
- element.click(): 對element模擬mouse-click。
- element.cloneNode(): 複製一個element。
- element.compareDocumentPosition(): 比較兩個element的document position。
- element.contains(): 是否一個node為另一個node的descendant，傳回boolen。
- element.focus(): 給一個element focus。
- element.getAttribute(): 傳回element的屬性值。
- element.getAttributeNode(): 傳回特定屬性node。
- element.hasAttribute(): 傳回element是否有某特定屬性。
- element.hasAttributes(): 傳回element是否有任何屬性。:
- element.hasChildNodes(): 傳回element是否有任何child nodes。
- element.insertAdjacentElement(): 插入一個HTML element至目前element的相對位置(beforebegin, afterbegin,beforeend, afterend)。
- element.insertAdjacentHTML(): 插入HTML formatted text至目前element的相對位置。
- element.insertAdjacentText(): 插入text至目前element的相對位置。
- element.insertBefore(): 插入一個新的child node至一child node之前。
- element.isDefaultNamespace(): 是否特定的namespaceURI是default。
- element.isEqualNode(): 兩個elements是否相等。
- element.isSameNode(): 兩個elements是否是相同node。
- element.isSupported(): 是否特定feature在element上被支援。
- element.normalize(): 加入相鄰文字節點並移除空白文字節點至一個element。
- element.querySelector(): 傳回符合特定CSS selector(s)之element的first child。
- element.querySelectorAll(): 傳回符合特定CSS selector(s)之element的所有child elements。
- element.removeAttribute(): 移除element的一個特定屬性。
- element.removeAttributeNode(): 移除特定屬性的Node，並傳回該node。
- element.removeChild(): 移除一個element的child node。
- element.removeEventListener(): 移除一個element的一個event handler。
- element.replaceChild(): 替換一個element的child node。
- element.scrollIntoView(): Scrolls某一element至視窗的可見區域。
- element.setAttribute(attribute, value): 設定某屬性之值。
- element.setAttributeNode(): 設定或改變某一屬性之node。
- element.toString(): 傳回代表某一element之字串。
Finding elements
根據上述，舉例說明如何取得網頁物件。 >>
先設計以下html。
加上函數。
按以下按鈕看結果。
Say hello inside h5
再試試看使用getElementsByTagName。 >>
加上函數。
第一個p
第二個p
第三個p
顯然使用byTagName會得到所有相同Tag的物件(所以是Elements)，而且這些物件會放在類似array的結構內(稱為collection)。 此外，第三個p顯然在css有個名為p11的class來改變其背景顏色。
接下來再試試看使用getElementsByClassName。 >>
加上函數。
h6
p
顯然跟getElementsByTagName類似，只是這次抓取所有相同class name的物件。
另一個類似的方式為使用querySelectorAll()方法，此方法可以抓取相同CSS selector的元件。 >>
加上函數。
h6
p
記得argument是CSS selector，所以要用.js11_4。
上述兩方式效果類似，一個傳回collection，一個傳回nodelist，差別是collection是elements的集合，而nodelist是document nodes的集合。 文件中所有東西都是node，而element是一種特殊的node。只有nodelist物件可以包含屬性node與文字node。 我們可以根據名稱，id，或index number取得collection內的元件，但是只能使用index number來取得nodelist內的元件。
Event Linstener
可以使用addEventListener方法直接將event跟函數連結在物件上，效果跟上述的按鈕相同。 >>
加上函數。
跟之前使用onclick類似，有一點要注意的是addEventListener的script要寫在元件(button)之後(如上)，不然會因傳回空(null)而出錯。
跟之前一樣的，同一個element可以同時有超過一個event。 >>
Event Bubbling & Event Capturing
當一個element位於另一個element之內成巢狀排列(Nested)時，若是兩者的event同時被觸發，哪一個element的event要先執行? >>
加上函數。
在addEventListener參數加上false表示是Bubbling，true表示Capturing。在之下的圖形中按下bubbling，會發現內層的element之event先執行，Capturing則外層先執行。 可知Bubbling表示由內而外，Capturing表示由外而內。
Bubbling
Capturing
removeEventListener()
Event handler也可以被移除，使用removeEventListener()方法。 >>
加上函數。
按這裡移除listener
顯示滑鼠位置
Navigating Between Nodes
我們已經了解整個在HTML document中任何東西都是一個node，例如整個document是一個document node， 每一個HTML element都是一個element node，文字是一個文字node，每一個屬性是屬性node，連註解也是一個註解node。 而所有這些形成一個樹狀排列。通常html是root，head, body是他的child，head跟body彼此是siblings。因此我們 可以利用之前列出的許多方法找到某一個node的對應關係物件，例如其child或是parent。 >>
設計一個按鈕並利用之前用來展示bubbling&capturing的物件。
加上函數。
按下按鈕後可以發現兩者皆得到相同的文字，對於p來說，其內的文字是其child node，但是text並不是一個element， 所以使用nodeValue取得其內的值。而p是div的first element child，不是第一個node child，所以使用firstElementChild取得p， 此時使用innerHTML來得到element內的值。此外，顯然children取得所有的child elements，而childNodes取得所有的child nodes。 要注意的是對於element來說，其nodeValue是undefined。
Adding & Deleting
可以使用前述的方法來增減文件。>>
加上函數。
此時按下Button A可看見變化。 再加上Button B的函數。
使用setAttribute()可得到與setAttributeNode()一樣的效果。 再加上Button C的函數。
可以看到加上第一個p的sibling，接著再加上Button D的函數。
可以看到移除了最後一個p。