Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>複習Dom操作</title>
<style type="text/css">
#newTest
{
color:Red;
}
</style>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
// //jQuery寫法--頁面加載完成
// $(document).ready(function () {
// });
// //可以簡寫成
// $(function () {
//
// });
//标準js中的寫法 --頁面加載完成
window.onload = function () {
var root = document.documentElement; //DOM根節點 --文檔節點
var farDIV = document.getElementById("farther"); //根據ID獲得DOM的“元素節點”
//元素節點的一些常用的屬性
//document.getElementsByTagName("")//根據元素(标簽)名稱獲得DOM的“元素節點”(可能是單個或一組)
//document.getElementsByName("")//根據name屬性獲得DOM的“元素節點”(可能是單個或一組)
var idNode = farDIV.getAttributeNode("id"); //獲得屬性為id的“屬性節點”
//注意：不要把 getAttribute("id")和getAttributeNode("id")搞混了，前者擷取的是屬性的值，後者擷取的屬性節點
var textNode = farDIV.firstChild; //farDIV的第一個子節點
//DOM中常用的屬性
//屬性（其實隻在屬性節點中定義才有效）
//farDIV.attributes;//傳回該節點的所有屬性對象的數組
//節點名稱
// alert(root.nodeName + ":" + farDIV.nodeName + ":" + idNode.nodeName + ":" + textNode.nodeName);
//nodeType(不支援IE)有五種，分别代表：标簽(元素)節點，屬性節點，文本節點，根節點，注釋節點
//alert(root.nodeType + ":" + farDIV.nodeType + ":" + idNode.nodeType + ":" + textNode.nodeType);
//節點值
//alert(root.nodeValue + ":" + root.nodeValue + ":" + idNode.value + ":" + textNode.nodeValue);
//根節點的一些常用屬性 -- 建立新節點
var newNode = document.createElement("div"); //建立一個div節點
var text = document.createTextNode("這是我手動建立的"); //建立一個文本節點
newNode.appendChild(text); //将文本節點插入div節點中
var attrNode = document.createAttribute("id"); //建立屬性節點，屬性名為“id”
newNode.setAttributeNode(attrNode); //将newNode節點的屬性節點設定為attrNode
newNode.setAttribute("id", "newTest"); //設定newNode節點的id屬性設定為newTest
//var comment = document.createComment("我是注釋");//建立注釋節點
//擷取頁面中的body标簽所在節點
var body = root.lastChild; //擷取root的最後一個子節點
body.appendChild(newNode); //将建立的節點插入body中
//如果添加成功，則CSS會生效（字型變紅，ID選擇器有效）
//擷取元素的屬性 alert(farDIV.id); alert(farDIV.getAttribute("id"));
alert(newNode.getAttribute("id")); //HTML中擷取節點的屬性 -- 在XHTML中的可以簡寫 ：alert(newNode.id); //
//動态的建立表格
//1.可以使用與上面類似的方式，建立節點、拼接、插入... 但是這樣操作似乎很麻煩
//2.可以使用更加簡單的操作方式
};
</script>
</head>
<body>
<div id="farther">我是父div</div>
</body>
</html>
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)