1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <script type="text/javascript">
6
7 window.onload = function () {
8
9 // ----------------- 节点的方法 -----------------
10 // ----------------- 节点属性的方法 -----------------
11 /*
12 setAttribute(name, value) 给节点添加属性
13 getAttribute(name) 获取节点属性的值
14 removeAttribute(name) 删除节点属性
15 */
16 // body节点
17 var node_body = document.body;
18
19 // img节点
20 var node_img = node_body.firstChild;
21
22 // 增加属性
23 node_img.setAttribute("src", "images/001.jpg");
24 node_img.setAttribute("width", "200");
25 node_img.setAttribute("border", "3");
26 node_img.setAttribute("style", "cursor:pointer;");
27
28 // 删除属性
29 node_img.removeAttribute("border");
30
31 // ----------------- 节点的操作 -----------------------
32 /*
33 createElement(tagName) 创建一个HTML标记, 一个节点
34 appendChild() 将创建的子节点, 追加到某个父节点下
35 removeChild() 删除子节点
36 */
37 // 创建img节点
38 var imgObj = document.createElement("img");
39
40 // 增加属性
41 imgObj.setAttribute("src", "images/002.jpg");
42 imgObj.setAttribute("width", "200");
43 imgObj.setAttribute("border", "3");
44
45 // 追加到body节点下
46 node_body.appendChild(imgObj);
47 }
48
49 </script>
50 </head>
51 <body><img />
52 </body>
53 </html>
