<JavaScript><DOM> 十一. 核心DOM的方法-优快云博客

本文介绍如何使用JavaScript进行DOM元素的操作，包括节点属性的设置与删除、创建新的节点并将其添加到页面中。通过具体实例展示了如何对HTML中的img标签进行属性设置，并在页面上动态创建并插入新的图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 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>