document的屬性和方法:
document.createElement(tagName)
:文檔對象上的createElement方法可以創建由tagName指定的元素.如果以串div作為方法參數,就會生成一個div元素.
document.createTextNode(text)
:文檔對象的createTextNode方法會創建一個包含靜態文本text的文本節點.
document.createAttribute():
用指定的名字創建新的Attr節點.
document.createComment()
:用指定的字符串創建新的Comment節點.
document.getElementById():
返回文檔中具有指定id的Element節點.
document .getElementsByTagName():
返回文檔中具有指定標記名的所有Element節點.返回為一Element節點數組;
節點的屬性和方法:
<element>.appendChild(childNode)
:appendChild方法將指定的節點增加到當前元素的子節點列表(作為一個新的子節點).例如,可以增加一個option元素,作為select元素的子節點.
<element>.getAttribute(name) :
該方法用來獲得元素中name屬性的值.
<element>.setAttribute(name,value) :
該方法用來設置元素中name屬性的值.
<element>.insertBefore(newNode,targetNode)
:該方法將節點newNode作為當前元素的子節點插到targetNode子節點元素的前面.
<element>.removeAttribute(name)
:該方法從元素中刪除屬性name.
<element>.removeChild(childNode)
:該方法從元素中刪除子元素childNode.
<element>.replaceChild(newNode,oldNode)
:該方法將節點oldNode替換為節點newNode.
<elemnet>.hasChildNodes() :該方法返回一個布爾值,指示元素是否有子元素.
<element>.tagName :元素的標記名稱,比如<p>元素為PHTML文檔返回的tagName均為大寫;
<element>.getAttributeNode() :以Attr節點的形式返回指定屬性的值;
<element>.getElementsByTagName() :返回一個Node數組,包含具有指定標記名的所有Element節點的子孫節點,其順序為在文檔中出現的順序.
<element>.hasAttribute() :如果該元素具有指定名字的屬性,則返回true;
<element>.removeAttributeNode() :從元素的屬性列表中刪除指定的Attr節點.
<element>.setAttributeNode() :把指定的Attr節點添加到該元素的屬性列表中．
<element>.cloneNode(true) :復制當前節點,true表示復制當前節點以及它的所有子孫節點.
Node對象常用屬性:
<element>.attributes :如果該節點是一個Element,則以namedNodeMap形式返回該元素的屬性.
<element>.childNodes :以Node[]的形式存放當前節點的子節點.如果沒有子節點,則返回空數組.
<element>.firstChild :以Node的形式返回當前節點的第一個子節點.如果沒有子節點,則為null.
<element>.lastChild :以Node的形式返回當前節點的最后一個子節點.如果沒有子節點,則為null.
<element>.nextSibling :以Node的形式返回當前節點的兄弟下一個節點.如果沒有這樣的節點,則返回null.
<element>.previousSibling :以Node的形式返回緊挨當前節點,位于它之前的兄弟節點.如果沒有這樣的節點,則返回null.
<element>.parentNode :以Node的形式返回當前節點的父節點.如果沒有父節點,則返回null.
<element>.nodeType :代表節點的類型.
<element>.nodeName :節點的名字,Element節點則代表Element的標記名稱.
備注::
如果使用appendChild將<tr>元素直接增加到<table>中,則在IE中這一行并不出項,但在其他瀏覽器中卻會顯示出來.對此的解決之道是,將<tr>元素增加到表的<tbody>元素中,這種解決辦法在所有的瀏覽器中都能正確工作.
???????????? 關于setAttribute方法,IE也有麻煩.IE不能使用setAttribute正確地設置class屬性.對此有一個跨瀏覽器的解決方法,即同時使用setAttribute("class","newclassName")和setAttribute("className","newClassName").另外,在IE中不能使用setAttribute設置style屬性.最能保證瀏覽器兼容的技術不是<element>.setAttribute("style","font-weight:bold;"),而是<element>.style.cssText="font-weight:bold;".
實踐:
<html>
<head>
<title>測試</title>
</head>
<script language="javascript">
function show()
{
???????? var showdiv???????? =???????? document.createElement("div");
???????? showdiv.setAttribute("id","div1");
???????? showdiv.innerHTML = "這就是所謂的動態創建！";
???????? showdiv.style.height = "100px";
???????? showdiv.style.backgroundColor = "yellow";
???????? document.body.appendChild(showdiv);
}
</script>
<body>
<a href="javascript:show();">點我</a>
</body>
</html>
前言：與傳統的方法不同，DOM作為一種“手術刀”型的開發工具能夠對document做到“細致入微”的照顧。因為DOM是基于文檔樹模型建立起來的一套方法因此能夠對文檔做幾乎任何方面的修改。不論您是希望修改結構還是在內容，使用DOM都是一個不錯的選擇。
今天要談到到了是四個典型的DOM方法以及他們的使用策略：
createElement()方法 createTextNode()方法 appendChild()方法 insertBefore()方法1.creatElement()方法
規則document.creatElement(nodeName)
例如我們可以使用如下的語句來創建一個段落。
document.creatElement("p")
2.creatTextNode()方法
規則document.creatTextNode(text)
例如我們可以使用如下語句來創建一條語句用來問候大家。
document.creatTextNode("Hello World")
3.appendChild()方法
規則parent.appendChild(child)
創建了所需要的結構或內容以后還需要將所創建的東西插入到文檔當中才能算成功。例如我們可以使用如下的方法來建立起我們需要創建的HTML內容。請注意這完全是動態建立的。
var para = document.createElement("p");
var testdiv = document.getElementById("testdiv");
var txt = document.createTextNode("Hello World");
testdiv.appendChild(para);
para.appendChild(txt);
這樣我們就把之前所建立的結構與內容插如到了我們所需要的地方。不過問題也隨之而來，appendChild()方法只能創建已知元素結點的最后一個子結點，如果當父元素已經擁有幾個子元素的時候，我們是無法通過appendChild()方法來選擇插入點的。
4.insertBefore()方法
規則parentElement.inserBefore(newElemenet,targetElement)
在使用的時候，我們不需要知道父元素到底是誰，因為我們可以通過這樣的語法獲得父元素：
targetElement.parentNode
這樣看上去似乎有點好笑，當別人問你父親是誰的時候，你卻告訴別人，我的父親就是“我的父親”。不過在DOM中，它確實就是一個能實際使用的方法。
補充一個有意義的函數：
當看到有insertBefore()方法之后，也許會想當然的認為還有insertAfter()方法。不過要讓你失望了，DOM并沒有提供這樣的方法。我想是因為它可以通過混合使用insertBefore()方法和appendChild()方法來實現吧。但是，我們總希望它能夠是對稱。所以我們自己動手編寫一個insertAfter()方法，把它作為函數存放在我們的文檔中。
function insertAfter(newelElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
}else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
至此，我們至少能夠用以上的幾個DOM方法來創建簡單的HTML文檔。使用DOM的好處有兩點：第一，文檔與行為互相分離，這符合現代工程學的先進理念。請時刻記住，混合在一起的永遠都不是最好的辦法。第二，動態創建的結構與內容并不影響原先的文檔內容，這樣使得我們能清楚的完成“替換”與“插入”的不同操作。
是的DOM就是這樣一種細致的工具。細致而強大的確是DOM能夠在世界上成為標準的有力條件。