JavaScript的DOM操作

1.核心

由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。

始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：

• 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
• 遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
• 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
• 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

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

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

2.更新节点

<div id="id1">

</div>

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

操作文本

• id1.innerText='456' 修改文本值
• id1.innerHTML='<h1>123</h1>' 可以解析HTML文本标签

操作CSS

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

3.删除节点

要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild 把自己删掉：

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

注意到删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。

当你遍历一个父节点的子节点并进行删除操作时，要注意， children 属性是一个只读属性，并且它在子节点变化时会实时更新。
例如，对于如下HTML结构：

<div id="parent">
	<p>First</p>
	<p>Second</p>
</div>

当我们用如下代码删除子节点时：

var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错

浏览器报错： parent.children[1] 不是一个有效的节点。原因就在于，当First 节点被删除后， parent.children 的节点数量已经从2变为了1，索引[1] 已经不存在了。
因此，删除多个节点时，要注意children 属性时刻都在变化。

4.插入节点

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

<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);//追加到后面

</script>

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

<script>
    var js = document.getElementById('js');//已经存在的节点
    var list = document.getElementById('list');
    // list.appendChild(js);//追加到后面

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

    //可以创建一个style标签
    var myStyle=document.createElement('style');//创建一个空的style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML='body{background-color: red;}';//设置标签内容

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

</script>

insertBefore

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