更新删除DOM节点（重要）

更新节点

 

 

 属性用字符串包

id1.innerText= ’123‘ ；  //修改文本值

id1.innerHTML='<strong>123</strong>'   //可以解析html文本标签，加粗

id1.style.color='red'   //可以操作css

id1.style.fontSize="39px";    //fontSize驼峰命名

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="id1">
 9 
10 </div>
11 <script>
12     var id1 = document.getElementById("id1");
13     id1.innerText = 'abc';
14     
15 </script>
16 </body>
17 </html>

 

 

删除节点

　　删除节点步骤：先获取父节点，再通过父节点删除自己

 

　　father.removeChild(p1);

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="father">
 9     <h1>标题</h1>
10     <p id="p1">p1</p>
11     <p class="p2">p2</p>
12 </div>
13 
14 
15 
16 <script>
17 
18     var self = document.getElementById("p1");
19     var father = p1.parentElement;
20     father.removeChild(self);
21 
22     //删除是一个动态的过程
23     father.removeChild(father.children[0]);
24     father.removeChild(father.children[1]);
25     father.removeChild(father.children[2]);//这种删除第一个元素后 索引改变 后面会报错
26 </script>
27 
28 </body>
29 
30 
31 </html>

 

　　

　　

 

posted @ 2022-03-29 22:17  doremi429  阅读(63)  评论(0)  编辑  收藏  举报