DOM:可以通過JavaScript,以編程方式控制網頁上的所有元素及屬性。
1.理解DOM。
創建一個文檔節點對象(document),然後從文檔中出現的第一個標記開始,按照XHTML的結構層次,一個一個地加載。每加載一個標記、註釋、或者屬性,就將其當作節點(node)。
DOM的主要思想是HTML上每個元素分別對應DOM中的一個節點。
*文檔節點Document--最頂層的節點,它代表整個 XHTML文檔。每個Web文檔都有一個文檔節點。
*文檔類型節點DocumentType--不能包含子節點。
*元素節點Element--表示起始標記和結束標記之間的內容,唯一可以同時包含屬性和子節點的節點類型。
*文本節點Text--代表XHTML文檔中元素的起始標記和結束標記之間,或者CDataSection內包含的普通文本。此節點類型不能包含子節點。
*屬性節點--Attr--代表元素節點開始標記內指定的屬性。此節點類型不能包含子節點。
節點的屬性和方法:
nodeName nodeValue nodeType firstChild lastChild childNodes ownerDocument
previousSibling nextSibling hasChildNodes() attributes appendChild() removeChild()
replaceChild(newnode,oldnode) insetBefore(newnode,oldnode)
NodeList---節點數組。
2.使用DOM
1>.
var ohead = document.documentElement;
HTML DOM 頁定義了document.body作爲指向<body/>元素的指針。
var oBody = document.body;
2>.
處理元素屬性。DOM定義了三個元素方法來幫助訪問特性。
getAttribute(name) setAttribute(name,newvalue) removeAttribute(name)
這些方法可以直接處理特性值,完全的隱藏Attr節點。例如,獲取某個元素的id屬性:
var sid = op.getAttribute("id");
如要更改id:
op.setAttribute("id","newid");
3>.
訪問指定節點。
* getElementsByTagName() 方法 ?
var oImgs = document.getElementsByTagName("img") ;
* getElementsById() 方法
var vDiv = document.getElementsById("div1");
4>.
創建和操作節點。
createAttribute(name) createComment(text) createDocumentFragment() createElement(Tagname) createTextNode(text)
5>.
innerHTML。
可以通過innerHTML屬性將HTML字符串賦值給一個元素。 ?
雖然innerHTML並不是DOM標準的一部分,但是innerHTML幾乎被所有的瀏覽器支持。但Table和Select不支持。