javaScript DOM編程常用的方法與屬性，javascriptdom

javaScript DOM編程常用的方法與屬性，javascriptdom

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屬性問題?

這可能是由於不同的瀏覽器各自的實現不同造成的。
我用ie6.0和firefox3.0.11測試了一下，結果不一樣。

不論是否指定input的checked屬性，它們都可以取到這個屬性，但屬性值不同，當指定checked屬性時，ie取到的是false,firefox取到是的是true.

也就是說ie是不支援這個js操作的，而firefox是支援的。

個人意見、僅供參考，如有誤、請指正。
 
Javascript 怎學習DOM編程

dom--文件物件模型，簡單點說就是將你的用戶端（IE/Firefox等）以樹狀結構從大到小拆分成單一的對象讓你操作。
誇張點說，你在用戶端（瀏覽器）所看到的一切元素，js都可以操作。
如果你學過其他語言，特別是java或C#有對象的概念，相信對於dom上手很快的。 你不用去定義類，去執行個體對象，你只要會用這些已有的對象就行了。

dom樹其實就是你可以想像的你的頁面構造

window(表單對象)-document(文檔對象)-documentElement(文檔內容的根)-body-table-tr-td-span.....