7、操作DOM对象（重点）

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

• 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；

• 遍历：遍历该DOM节点下的子节点，以便进行进一步操作；

• 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；

• 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

7.1 获得节点

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

//对应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;
   // father.firstChild;
   // father.lastChild;

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

7.2 更新节点

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

• 操作文本

  • div1.innerText = '123' 修改文本的值
  • div1.innerHTML = '<strong>123</strong>' 可以解析HTML文本标签

• 操作JS

  div1.style.color = 'red' //属性使用''包裹
  div1.style.fontSize = '100px'
  div1.style.padding = '1em'
  

7.3 删除节点

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

<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.removeChild(self);
    //删除是一个动态的过程，删除后，下标是会发生变化的
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
</script>

7.4 插入节点

直接插入

当我们获得了某个DOM节点，假设这个DOM节点是空的， 我们通过innerHTML就可以增加一个元素，但是如果这个DOM节点已经存在元素了我们就不能这么干了，会发生覆盖。此时我们要使用追加操作appendChild()

appendChild() 追加插入

<p id="js">JavaScript</p>
<div id="list">
  <p id="se">JavaSE</p>
  <p id="ee">JavaEE</p>
  <p id="web">JavaWeb</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');
    //list.appendChild(js); //追加到后面

    //通过JS创建一个新的节点
    //创建一个p标签
    var newP = document.createElement('p');
    newP.id = 'newP';
    newP.innerText = 'hello,newP';
    list.appendChild(newP);

    //创建一个标签节点(通过这个属性，可以设置任意的值)
    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:pink;}'; //设置标签内容
    document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>

insertBefore()

var js = document.getElementById('js');
var ee = document.getElementById('ee');
//要包含的节点 insertBefore(新节点,目标节点);
ee.insertBefore(js,ee);