操作DOM对象（重点）

核心

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

·更新：更新DOM节点

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

·添加DOM节点

·删除DOM节点

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

<div id = "father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    var p1 = document.getElementById("p1");
    var h1 = document.getElementsByTagName("h1");
    var p2 = document.getElementsByClassName("p2");
    var father = document.getElementById("father");
</script>

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

 

更新节点

<div id="id1">

</div>

<script>
  var id1 = document.getElementById('id1')
</script>

操作文本

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

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

操作css

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

 

删除节点

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

<div id = "father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
   var self = document.getElementById('p1');
   var father = self.parentElement;
   father.removeChild(self);
   
   //删除是一个动态的过程，这样是错误的
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);
    
</script>

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

 

插入