DOM簡介: 文件檔物件模型DOM(Document Object Module) - 定義使用者操作文件檔物件的介面,最常與Javascript建立溝通的橋樑並擷取頁面元素及屬性。 DOM的節點: 元素節點(element node) - <html>、<body>、<meta>、<h2>、<p>、<li>等都是元素節點;元素節點可以包含其它元素,例:<ul>都包含了<li>,唯一沒有被包含的就只有根節點<html>。 文字節點(text node) - 展示的內容即為文字節點,例<h2>內容</h2>,被<h2>標記中的文字"內容", 此為文字節點。 屬性節點(attribute node) - title、alt、href、src、class、id、style等都是屬性節點。 DOM範例結構圖: <html> <head> <title>HTML DOM</title> </head> <body> <h1>Document Object Module</h1> <a href="#">HTML</a> </body> ![]() node常用的屬性和方法: attributes - 如果該節點是一個Element,則以NamedNodeMap形式返回該元素的屬性 childNodes - 以Node[]的形式存放當前節點的子節點。如果沒有,返回空數組 firstChild - 以Node的形式返回當前節點的第一個子節點,如沒有返回null lastChild - 以Node的形式返回當前節點的最後一個子節點,如沒有返回null nextSibling - 以Node的形式返回當前節點的兄弟下一個節點,如沒有返回null nodeName - 節點的名字,Element節點則代表Element的標記名稱 nodeType - 代表節點的類型 parentNode - 以Node的形式返回當前節點的父親節點,如沒有返回null previousSibling - 以Node的形式返回緊挨當前節點,位於它之前的兄弟節點,如沒有返回null appendChild() - 通過把一個節點增加到當前節點的childNodes[]組,給文檔樹增加節點 cloneNode() - 複製當前節點,或當前節點以及它的所有子節點 hasChildNodes() - 如果當前節點擁有子節點,則將返回true insertBefore() - 給文檔樹插入一個節點,位置在當前節點的指定子節點之前,如果該節點已經存在,則刪除它在插入到它的位置 removeChild() - 從文檔樹中刪除並返回指定的子節點 replaceChild() - 從文檔樹中刪除並返回指定的子節點,用另一個節點替換它 訪問節點最常用的方式: getElementById() - 獲取某個指定的值的元素。 getElementsByTagName() - 獲取包含某個相同標籤的元素的NodeList。 設定節點屬性方式: getAttribute() - 查詢元素節點的屬性名稱,僅接受一個參數。 setAttribute() - 設定元素節點的屬性名稱,接受二個參數(屬性名稱,修改的值)。 建立和新增節點: createElement() - 建立元素節點。 createTextNode() - 建立文字節點。 刪除節點: removeChild() - 通常刪除節點是透過父節點來刪除子節點。 替換節點: replaceChild() - 通常針對欲替換節點的父節點來操作。接受二個參數(新節點,目標節點)。 特定節點"前"插入節點: insertBefore() - 通常針對欲插入節點的父節點來操作。接受二個參數(新節點,目標節點)。 建立文件檔碎片,以提高頁面效率: createDocumentFragment() - 建立文件檔碎片,用意是提高頁面效率。 非標準DOM innerHTML屬性: innerHTML - 該屬性可以讀取內容,同時還可以設置內容。 修改CSS類別 className - 可以修改替換一個節點的CSS類別。若採用追加CSS類別的話,前提是保證CSS類別中的各個屬性與原先的屬性不重複。 參考資料: |