javaScript DOM編程經常使用的方法與屬性

標籤：不同的   set   lsp   沒有   insert   介面   white   rms   收集   

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() 將返回一個Null 字元串.

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編程經常使用的方法與屬性