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>