操作DOM对象（重点）

核心

浏览器网页就是一个DOM树形结构

·更新：更新DOM节点

·遍历DOM节点：得到DOM节点

·添加DOM节点

·删除DOM节点

要操作一个DOM节点，首先就要获取这个DOM节点

 1 <div id = "father">
 2     <h1>标题一</h1>
 3     <p id="p1">p1</p>
 4     <p class="p2">p2</p>
 5 </div>
 6 
 7 <script>
 8     var p1 = document.getElementById("p1");
 9     var h1 = document.getElementsByTagName("h1");
10     var p2 = document.getElementsByClassName("p2");
11     var father = document.getElementById("father");
12 </script>

这是原生代码，之后我们都尽量使用jQuery

 

更新节点

1 <div id="id1">
2 
3 </div>
4 
5 <script>
6   var id1 = document.getElementById('id1')
7 </script>

操作文本

·id1.innerText='123'  修改文本的值

·id1.innerHTML = '<strong>123</strong> 可以解析HTML文本标签

操作css

1 id1.style.color = "yello"; // 属性使用字符串包裹
2 id1.style.fontSize = '20px'; // - 转 驼峰命名问题
3 id1.style.padding = '2em';

 

删除节点

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

 1 <div id = "father">
 2     <h1>标题一</h1>
 3     <p id="p1">p1</p>
 4     <p class="p2">p2</p>
 5 </div>
 6 
 7 <script>
 8    var self = document.getElementById('p1');
 9    var father = self.parentElement;
10    father.removeChild(self);
11    
12    //删除是一个动态的过程，这样是错误的
13     father.removeChild(father.children[0]);
14     father.removeChild(father.children[1]);
15     father.removeChild(father.children[2]);
16     
17 </script>

注意：删除多个节点的时候，children是时刻变化的，删除节点的时候一定要特别注意

 

插入

 

posted on 2021-05-07 10:19  Love&Share  阅读(61)  评论(0)  编辑  收藏  举报

导航