DOM(Document Object Model)文檔對象模型，DOM是一種與瀏覽器、平台和語言無關的接口，使用該接口可以訪問頁面其他的標准組件。
DOM Core統一了訪問網頁文檔的方法，並為不同類型的節點對象提供了統一的操作方法和屬性。javascript中的getElementById()、getElementsByTagName()、getAttribute()和setAttribute()等都是DOM Core模塊的組成部分。
getElementById()：利用標記的id屬性值訪問標記元素。
getElementsByTagName()：利用標記的名稱訪問所有同名標記元素。
getAttribute()：獲取指定元素的屬性值。
setAttribute()：為指定元素的屬性設置屬性值。
1、創建元素
jQuery實現：
jQuery工廠函數$()創建一個h1對象，格式如下: $(html)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>jQuery創建元素</title>
5 <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
6 <script type="text/javascript">
7 $(function () {
8 // $("body").append("<h1></h1>");
9 var $h1 = $("<h1></h1>");
10 $("body").append($h1);
11 });
12 </script>
13 </head>
14 <body>
15 </body>
16 </html>
javascript實現：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>JavaScript創建元素</title>
5 <script type="text/javascript">
6 window.onload = function () {
7 var h1 = document.createElement("h1");
8 document.body.appendChild(h1);
9 }
10 </script>
11 </head>
12 <body>
13 </body>
14 </html>
2、創建文本
jQuery實現：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>jQuery創建文本</title>
5 <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
6 <script type="text/javascript">
7 $(function () {
8 var $h1 = $("<h1>DOM文檔對象模型</h1>");
9 $("body").append($h1);
10 });
11 </script>
12 </head>
13 <body>
14 </body>
15 </html>
javascript實現：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>JavaScript創建文本</title>
5 <script type="text/javascript">
6 window.onload = function () {
7 var h1 = document.createElement("h1");
8 var txt = document.createTextNode("DOM文檔對象模型");
9 h1.appendChild(txt);
10 document.body.appendChild(h1);
11 }
12 </script>
13 </head>
14 <body>
15 </body>
16 </html>
3、創建屬性
jQuery實現：
<!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 runat="server">
<title>jQuery創建文本</title>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var $h1 = $("<h1 id='title' class='red'>DOM文檔對象模型</h1>");
$("body").append($h1);
});
</script>
</head>
<body>
</body>
</html>
javascript實現：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>JavaScript創建文本</title>
5 <script type="text/javascript">
6 window.onload = function () {
7 var h1 = document.createElement("h1");
8 var txt = document.createTextNode("DOM文檔對象模型");
9 h1.appendChild(txt);
10 h1.setAttribute("id", "title");
11 h1.setAttribute("class", "red");
12 document.body.appendChild(h1);
13 }
14 </script>
15 </head>
16 <body>
17 </body>
18 </html>