DOM 文件物件模型

DOM是JavaScript將整個HTML文件轉換成一個以document物件為根節點的物件階層模型。JavaScript透過DOM來操作HTML文件元素的內容(包含格式)，也就是說，JavaScript動態地透過DOM來變更與取得HTML元素的值與格式，也可以動態地在DOM樹中刪除與加入一個節點物件，進而變更HTML文件的內容。  

節點屬性/Node Properties 

attributes  Returns a live collection of all attributes registered to and element  baseURI  Provides the absolute base URL of an HTML element  childNodes  Gives a collection of an element’s child nodes  firstChild  Returns the first child node of an element  lastChild  The last child node of an element  nextSibling  Gives you the next node at the same node tree level  nodeName  Returns the name of a node  nodeType  Returns the type of a node  nodeValue  Sets or returns the value of a node  ownerDocument  The top-level document object for this node  parentNode  Returns the parent node of an element  previousSibling  Returns the node immediately preceding the current one  textContent  Sets or returns the textual content of a node and its descendants 

節點方法/Node Methods 

appendChild()  Adds a new child node to an element as the last child node  cloneNode()  Clones an HTML element  compareDocumentPosition()  Compares the document position of two elements  getFeature()  Returns an object which implements the APIs of a specified feature  hasAttributes()  Returns true if an element has any attributes, otherwise false  hasChildNodes()  Returns true if an element has any child nodes, otherwise false  insertBefore()  Inserts a new child node before a specified, existing child node  isDefaultNamespace()  Returns true if a specified namespaceURI is the default, otherwise false  isEqualNode()  Checks if two elements are equal  isSameNode()  Checks if two elements are the same node  isSupported()  Returns true if a specified feature is supported on the element  lookupNamespaceURI()  Returns the namespaceURI associated with a given node  lookupPrefix()  Returns a DOMString containing the prefix for a given namespaceURI, if present  normalize()  Joins adjacent text nodes and removes empty text nodes in an element  removeChild()  Removes a child node from an element  replaceChild()  Replaces a child node in an element 

元素方法/Element Methods 

getAttribute()  回傳一個元素節點的指定屬性的值。例：

//取得HTML文件中第1個H1標籤元素的class屬性值，若HTML文件中第1個H1標籤定義如下：
//<H1 class="color font">
//下面敘述x值為"color font"
var x = document.getElementsByTagName("H1")[0].getAttribute("class");
console.log(x);
//輸出 "color font"

  getAttributeNode()  Gets the specified attribute node  getElementsByTagName()  Provides a collection of all child elements with the specified tag name  hasAttribute()  Returns true if an element has any attributes, otherwise false  removeAttribute()  Removes a specified attribute from an element  removeAttributeNode()  Takes away a specified attribute node and returns the removed node  setAttribute()  Sets or changes the specified attribute to a specified value  setAttributeNode()  Sets or changes the specified attribute node