7.js操作DOM对象

7.操作DOM对象

DOM：文档对象模型

核心

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

• 更新：更新Dom节点

• 遍历Dom节点：得到Dom节点

• 删除：删除一个节点

• 添加：添加一个新的节点

  要操作一个Dom节点，就必须要先获得Dom节点

  获得DOM节点

   //对应CSS的选择器
    var h1=document.getElementsByTagName('h1')
    var h2=document.getElementById('p1')
    var h3=document.getElementsByClassName('p2')
    var father=document.getElementById('father')
    var children=father.children//获取父节点下的所有子节点
   // father.firstChild
   // father.lastChild
   // father.lastChild
   // father.nextElementSibling

更新节点

 <div id="id1">
 var id1=document.getElementById('id1');
 </div>

操作文本

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

id1.innerHTML='123'可以解析HTML文本标签

操作JS

 id1.style.color='red'//属性使用字符串包裹
 id1.style.fontSize='500px'//‘-’转驼峰命名
 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=p1.parentElement;
     father.removeChiled(self)
     father.children
     HTMLCollection(3) [h1, p#p1, p.p2, p1: p#p1]
     father.removeChild(father.children[1])
     //此时p2变成father.children[1]
 </script>

删除是一个动态的过程，删除多个节点的时候，children是在时刻变化的

插入节点

获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素，但是这个DOM节点已经存在元素了，就会被覆盖，不能那么做。

通过追加操作

 <p id="js">Javascript</p>
 <div id="list">
     <p id="javaee">JavaEE</p>
     <p id="javase">JavaSE</p>
     <p id="javame">JavaME</p>
 </div>
 <script>
     var js=document.getElementById('js')//已存在的节点
     var list=document.getElementById('list')
 list.appendChild(js)

创建一个新的标签

 //通过JS创建新的节点
 var newP=document.createElement('p')
 newP.id='newP'
 newP.innerText='Hello'
 list.appendChild(newP)
   //创建一个标签节点
     var my=document.createElement('script')
     my.setAttribute('type','text/javascript')