摘要:DOM簡單架構
DOM就是Document Object Modal的簡稱，主要是操控我們HTML與XML的行為，這裡以HTML來說明
屬性名稱 | 屬性功能 | 例子(以FORM為例) |
ChildNode | 傳回目前元素的所有子節點 | 傳回DIV、TABLE1、TABLE2 |
FirstChild | 傳回目前元素的第一個節點 | 傳回DIV |
LastChild | 傳回目前元素的最後一個節點 | 傳回TABLE2 |
ParentNode | 傳回目前元素的父節點 | 傳回BODY |
NextSibling | 傳回與目前元素下一級的兄弟 | 想取得TABLE1元素，須使用FORM.FirstChild.NextSibling |
PreviousSibling | 傳回與目前元上一級的兄弟 | 想取得HEAD元素，須使用FORM.ParentNode.PreviousSibling |
NodeValue | 傳回目前元素的值 | 想取得TITLE元素的值，須使用FORM.ParentNode.PreviousSibling.FirstChild.NodeValue |
DOM中動態方法的列表及說明(介紹大部份常用)
Document.CreateElement(tagName) | 在頁面建立一個元素 |
Document.CreateTextNode(data) | 在頁面的元素中建立其值 |
AppendChild(newChild) | 加入一個節點到目前元素內 |
SetAttribute(attributename,value) | 指定目前元素的屬性值 |
insertBefore(newChild,refChild) | 在指定元素前插入新節點 |
removeChild(oldChild) | 刪除指定的節點 |
removeAttribute(name) | 移除目前節點的屬性值 |
cloneNode(bool) | 複製節點 |
replaceChild(newChild,oldChild) | 將舊節點替換成新節點 |
用幾個例子來做說明
Example 1
今天我要抓頁面上某一個元素的值，我們可以這樣寫
<head runat="server">
<script language="javascript" type="text/javascript">
function test()
{
var mydom = document.getElementById("ptext");
alert(mydom.firstChild.nodeValue);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" value="test" onclick="test()" />
<div>
<p id="ptext">
this is test</p>
</div>
</form>
</body>
</html>
這邊我們利用了nodeValue來幫我們印出結果
Example 2
我們想在網頁上動態的產生元素，我們可以這樣寫
<head runat="server">
<script language="javascript" type="text/javascript">
function dynamic()
{
var mydom = document.getElementById("divlist");
var ele = document.createElement("P");
var elevalue = document.createTextNode("this is created dynamically");
ele.appendChild(elevalue);
mydom.appendChild(ele);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" value="Dynamic Add" onclick="dynamic()" />
<div id="divlist">
</div>
</form>
</body>
</html>
這邊我們利用createElement產生了<p>元素，之後利用createTextNode給予<p>元素的值
最後我們將我們動態產生的<p>元素加入網頁上