DOM是Document Object Model文檔對象模型的縮寫。根據W3C DOM規范,DOM是一種與瀏覽器，平臺，語言無關的接口，使得你可以訪問頁面其他的標準組件。

Node接口的特性和方法

特性/方法類型/放回類型說明

nodeName	String	節點的名字；根據節點的類型而定義
nodeValue	String	節點的值；根據節點的類型而定義
nodeType	Number	節點的類型常量值之一
ownerDocument	Document	指向這個節點所屬的文檔
firstChild	Node	指向在childNodes列表中的第一個節點
lastChild	Node	指向在childNodes列表中的最后一個節點
childNodes	NodeList	所有子節點的列表
previousSibling	Node	指向前一個兄弟節點；如果這個節點就是第一個兄弟節點，那么該值為null
nextSibling	Node	指向后一個兄弟節點；如果這個節點就是最后一個兄弟節點，那么該值為null
hasChildNodes()	Boolean	當childNodes包含一個或多個節點時，返回真
attributes	NamedNodeMap	包含了代表一個元素的特性的Attr對象；僅用于Element節點
appendChild(node)	Node	將node添加到childNodes的末尾
removeChild(node)	Node	從childNodes中刪除node
replaceChild (newnode, oldnode)	Node	將childNodes中的oldnode替換成newnode
insertBefore (newnode, refnode)	Node	在childNodes中的refnode之前插入newnode

hasChildNodes()?-- 查看是否存在子節點
該方法用來檢查一個元素是否有子節點，返回值是 true 或 false.

var booleanValue = element.hasChildNodes();文本節點和屬性節點不可能再包含任何子節點，所以對這兩類節點使用 hasChildNodes 方法的返回值永遠是 false.

replaceChild() -- 節點替換
把一個給定父元素里的一個子節點替換為另外一個子節點

var reference = element.replaceChild(newChild,oldChild);返回值是一個指向已被替換的那個子節點的引用指針。
如果被插入的子節點還有子節點，則那些子節點也被插入到目標節點中

getAttribute() ? -- 查找屬性節點
返回一個給定元素的一個給定屬性節點的值

var attributeValue = element.getAttribute(attributeName);給定屬性的名字必須以字符串的形式傳遞給該方法。
給定屬性的值將以字符串的形式返回，如果給定屬性不存在，getAttribute() 將返回一個空字符串.

setAttribute() -- 設置屬性節點
將給定元素節點添加一個新的屬性值或改變它的現有屬性的值。

element.setAttribute(attributeName,attributeValue);屬性的名字和值必須以字符串的形式傳遞給此方法
如果這個屬性已經存在，它的值將被刷新；
如果不存在，setAttribute()方法將先創建它再為其賦值。

createElement() -- 創建新元素節點
按照給定的標簽名創建一個新的元素節點。方法只有一個參數：將被創建的元素的名字，是一個字符串.

var reference = document.createElement(element);方法的返回值：是一個指向新建節點的引用指針。返回值是一個元素節點，所以它的 nodeType 屬性值等于 1。
新元素節點不會自動添加到文檔里，新節點沒有 nodeParent 屬性，它只是一個存在于 JavaScript 上下文的對象.
var pElement = document.createElement("p");

createTextNode() -- 創建新文本節點
創建一個包含著給定文本的新文本節點。這個方法的返回值是一個指向新建文本節點引用指針。
? var textNode = document.createTextNode(text);
方法只有一個參數：新建文本節點所包含的文本字符串
方法的返回值：是一個指向新建節點的引用指針。它是一個文本節點，所以它的 nodeType 屬性等于 3.
新元素節點不會自動添加到文檔里，新節點沒有 nodeParent 屬性

var pElementText=document.createElement("li"); var textElement=document.createTextNode("南京"); pElementText.appendChild(textElement);

appendChild() -- 插入節點（1）
為給定元素增加一個子節點： ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ?var newreference = element.appendChild(newChild). ? ? ? ? ? ? ?
? ?給定子節點 newChild 將成為給定元素節點 element 的最后一個子節點。
方法的返回值是一個指向新增子節點的引用指針。
該方法通常與 createElement() createTextNode() 配合使用
新節點可以被追加給文檔中的任何一個元素

var newliElement=document.createElement("li");var textNode=document.createTextNode("北京");newliElement.appendChild(textNode);document.body.appendChild(newliElement);var liElement=document.getElementsByTagName("li");var textValue=liElement[0].firstChild.nodeValue;alert(textValue);

insertBefore()?-- 插入節點（2）
把一個給定節點插入到一個給定元素節點的給定子節點的前面
var reference = element.insertBefore(newNode,targetNode);節點 newNode 將被插入到元素節點 element 中并出現在節點 targetNode 的前面.
節點 targetNode 必須是 element 元素的一個子節點。
該方法通常與 createElement() 和 createTextNode() 配合使用

<ul id="city"> <li value="beijing^" id="beijing">北京</li> </ul> <ul id="city01"> <li value="shanghai^" id="shanghai">上海</li> </ul>//獲取父節點var parentCityNode=document.getElementById("city");//獲取子節點var beijingNode=document.getElementById("beijing");var shanghaiNode=document.getElementById("shanghai");//插入parentCityNode.insertBefore(shanghaiNode,beijingNode);

removeChild() -- 刪除子節點
從一個給定元素里刪除一個子節點
var reference = element.removeChild(node);返回值是一個指向已被刪除的子節點的引用指針。
某個節點被removeChild()方法刪除時,這個節點所包含的所有子節點將同時被刪除。

<ul id="city"> <li value="beijing^" id="beijing">北京</li> </ul> var ulElement=document.getElementById("city"); var liElement=document.getElementById("beijing"); ulElement.removeChild(liElement);如果想刪除某個節點，但不知道它的父節點是哪一個，parentNode 屬性可以幫忙。

<ul id="city"> <li value="beijing^" id="beijing">北京</li> </ul> var liElement=document.getElementById("beijing"); var parentElement=liElement.parentNode; parentElement.removeChild(liElement);

ChildNodes -- 遍歷節點樹

ChildNodes：返回一個數組，這個數組由給定元素節點的子節點構成：

var nodeList = node.childNodes;文本節點和屬性節點都不可能再包含任何子節點，所以它們的 ChildNodes 屬性永遠會返回一個空數組。
如果想知道某個元素有沒有子節點，可以用 hasChildNodes 方法。
如果想知道某個元素有多少個子節點，可以用 childNodes 數組的 length 屬性。
childNodes 屬性是一個只讀屬性。

firstChild -- 獲取第一個子節點

firstChild：該屬性返回一個給定元素節點的第一個子節點，返回這個節點對象的指針。

var reference = node.firstChild;文本節點和屬性節點都不可能包含任何子節點，所以它們的 firstChild 屬性永遠會返回 null。
某個元素的 firstChild 屬性等價于這個元素的 childNodes 節點集合中的第一個節點，即：
var reference = node.ChildNodes[0];firstChild 屬性是一個只讀屬性。

lastChild：獲取最后一個子節點。

nextSibling: 返回一個給定節點的下一個兄弟節點。

previousSibling：返回一個給定節點的上一個兄弟節點。

parentNode：返回一個給定節點的父節點。
parentNode 屬性返回的節點永遠是一個元素節點，因為只有元素節點才有可能包含子節點。
document 節點的沒有父節點。

Document 對象的集合

集合描述

all[]	提供對文檔中所有 HTML 元素的訪問。
anchors[]	返回對文檔中所有 Anchor 對象的引用。
applets	返回對文檔中所有 Applet 對象的引用。
forms[]	返回對文檔中所有 Form 對象引用。
images[]	返回對文檔中所有 Image 對象引用。
links[]	返回對文檔中所有 Area 和 Link 對象引用。

Document 對象的屬性

屬性描述

body	提供對 <body> 元素的直接訪問。對于定義了框架集的文檔，該屬性引用最外層的 <frameset>。
cookie	設置或返回與當前文檔有關的所有 cookie。
domain	返回當前文檔的域名。
lastModified	返回文檔被最后修改的日期和時間。
referrer	返回載入當前文檔的文檔的 URL。
title	返回當前文檔的標題。
URL	返回當前文檔的 URL。

Document 對象的方法

方法描述

close()	關閉用 document.open() 方法打開的輸出流，并顯示選定的數據。
getElementById()	返回對擁有指定 id 的第一個對象的引用。
getElementsByName()	返回帶有指定名稱的對象集合。
getElementsByTagName()	返回帶有指定標簽名的對象集合。
open()	打開一個流，以收集來自任何 document.write() 或 document.writeln() 方法的輸出。
write()	向文檔寫 HTML 表達式 或 JavaScript 代碼。
writeln()	等同于 write() 方法，不同的是在每個表達式之后寫一個換行符。

總結

以上是生活随笔為你收集整理的javaScript DOM编程常用的方法与属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。