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