操作DOM对象

DOM：文档对象模型
核心：
浏览器网页就是一个Dom树形结构
要操作一个Dom节点，就必须要先获得这个Dom节点

获得dom节点：

    //对应JSS选择器
   var h1= document.getElementsByTagName('h1')
   var p1= document.getElementById('p1')
   var p2= document.getElementsByClassName('p2')
   var father= document.getElementById('father')

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

这是原生代码，之后尽量都是用JQ

更新节点：

<div id="div1">

</div>

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

</script>

操作文本：

id1.innerText='456'//修改文本的值
id1.innerHTML='<strong>1234<strong>' //可以解析HTML标签

操作JS：

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

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

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

</div>
<script>
var h1= document.getElementsByTagName('h1')；
var father = p1.parentElement；
father.removeChild(p1)

//删除时一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>

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

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

追加：

<p id="JS">JS</p>
<div id="list">
    <p id="SE">JavaSE</p>
    <p id="EE">JavaEE</p>
    <p id="ME">JavamME</p>
</div>

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

</script>

创建一个新的标签，实现插入

<script>
    var js =document.getElementById('JS');// 已存在的节点
    var list =document.getElementById('list');
    //通过JS创建一个新的节点
    var newP = document.createElement('P'); //创建一个P标签
    newP.id='newP';
    newP.innerText='hello';

    list.appendChild(newP); //往list里添加子节点
    // 创建一个标签节点
   var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript')

    var myStyle = document.createElement('style');//创建了一个空style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML='body{background-color: chartreuse};';//设置标签内容
    document.getElementsByTagName('head')[0].appendChild(myStyle)

</script>

insert：

   var ee =  document.getElementById('ee');
   var js =  document.getElementById('JS');
   var list =  document.getElementById('list');
    // 要包含的节点.insertBefore(newNode,targetNode)
    ee.insertBefore(js,ee)