【JavaScript】操作DOM对象

核心

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

1. 更新：更新DOM节点
2. 遍历DOM节点：得到DOM节点
3. 删除：删除一个DOM节点
4. 添加：添加一个新的节点

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

获得DOM节点

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

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

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

更新节点

    var id1 = document.getElementById("id1");
    
    id1.innerText='123'; //修改文本值
    id1.innerHTML='<strong>123</strong>'; //可以解析HTML文本标签
    id1.style.color = 'red'; //颜色
    id.style.fontSize = '20px'; //字体大小

删除节点

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

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

    <script>
        var p1 = document.getElementById('p1');
        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">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>

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

		var newP = document.createElement('p'); //创建一个P标签
        newP.id = 'newP';
        newP.innerText = 'Hello,kudo';
        
        //创建一个标签节点（通过这个属性，可以设置任意的值）
        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: chartreuse;}'; //设置标签属性
		document.getElementsByTagName('head')[0].appendChild(myStyle);

insert

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