11.操作DOM对象

获取DOM节点¶

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

更新: 更新Dom节点
遍历dom节点: 得到Dom节点
删除: 删除一个Dom节点
添加: 添加一个新的节点
要操作一个Dom节点，就必须要先获得这个Dom节点

HTML

   <div id="father">
       <h1>title</h1>
       <p id="p1">p1</p>
       <p class="p2">p2</p>
   </div>

   <script>
       // 对应css选择器
       var h1=document.getElementsByTagName('h1');
       var p1=document.getElementById('p1');
       var p2=document.getElementsByClassName('p2');
       var father=document.getElementById('father');

       var childrens=father.children;//获取父节点下所有子节点
       var firstChild=father.firstChild;
       var lastChild=father.lastChild;

   </script>

Text Only

h1
HTMLCollection { 0: h1
, length: 1 }

p1
<p id="p1">

p2
HTMLCollection { 0: p.p2
, length: 1 }

father
<div id="father">

childrens
HTMLCollection { 0: h1, 1: p#p1, 2: p.p2
, length: 3, … }

lastChild
#text "\n   "

firstChild
#text "\n

更新DOM节点¶

Text Only

   <div id="id1">

   </div>

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

操作文本

Bash

id1.innerText='123'//修改文本
"123"
id1.innerHTML='<strong>321</strong>'//解析html标签
"<strong>321</strong>"

操作JS

Text Only

id1.style.color='yellow'
"yellow"
id1.style.fontSize='20px'
"20px"
id1.style.padding='2em'
"2em"

删除DOM节点¶

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

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

HTML

   <div id="father">
       <h1>title</h1>
       <p id="p1">p1</p>
       <p class="p2">p2</p>
   </div>

   <script>
       var self=document.getElementById('p1');
       var father=p1.parentElement;
       father.removeChild(p1);//页面不显示p1了

       // 以下方法为什么不可以？
       // 删除children[0]后，children[0]变成了下一个元素，数组动态变化
       father.removeChild(father.children[0]);
       father.removeChild(father.children[1]);
   </script>

创建和插入DOM节点¶

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过 innerHTML 就可以增加一个元素了，但是这个DOM 节点已经存在元素了，我们就不能这么干了!会产生覆盖追加

Text Only

   <p id="js">JavaScript</p>
   <div id="list">
       <p id="se">JavaSE</p>
       <p id="ee">JavaEE</p>
       <p id="me">JavaME</p>
   </div>

   <script>
       var js=document.getElementById('js');
       var list=document.getElementById('list');
       list.appendChild(js);//追加到list中
   </script>

创建新标签实现插入

Text Only

 <p id="js">JavaScript</p>
   <div id="list">
       <p id="se">JavaSE</p>
       <p id="ee">JavaEE</p>
       <p id="me">JavaME</p>
   </div>

   <script>
       var list=document.getElementById('list');

       var newP=document.createElement('p');//创建一个p标签
       newP.id='newP';
       newP.innerText="hello";
       list.appendChild(newP);//追加到list
   </script>

Text Only

       var list=document.getElementById('list');
       //创建一个p标签
       var newP=document.createElement('p');
       newP.id='newP';
       newP.innerText="hello";
       // 创建标签节点
       var myScript=document.createElement('script');
       myScript.setAttribute('type','text/javascript');

       //创建style标签
       var myStyle=document.createElement('style');
       myStyle.setAttribute('type','text/css');
       myStyle.innerHTML='body{background-color:chartreuse;}'

       document.getElementsByTagName('head')[0].appendChild(myStyle);

insert

Text Only

<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>

   var ee = document.getElementById('ee');
   var js = document.getElementById('js');
   var list = document.getElementById('list');
    list.insertBefore(js,ee);
</script>