学习博客：【JavaScript】操作DOM对象

DOM：文档对象模型

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

获得DOM节点后，可对DOM节点进行操作：更新、遍历、删除、添加

遍历节点

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


<script>
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');

    var childrens = father.children[index];    //获得父节点下的所有子节点
    father.firstChild;
    father.lastChild;

</script>

更新节点

操作文本

id1.innerText = '123'	修改文本
id1.innerHTML = '<strong>566<strong>'	修改HTML文本标签

操作js

id1.style.color = 'red'	//属性使用字符串包裹
'red'
id1.style.color = 'green'	//
'green'
id1.style.fontSize = '100px'
'100px'
id1.style.padding = '2em'
'2em'

删除节点

获取父节点 --> 通过父节点删除自己

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


<script>
    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;

</script>

father.removeChild(p1)

p1.parentElement.removeChild(p1)

father.removeChild(p1)

删除节点是动态的过程，删除多个节点时，children时刻变化

插入节点

对于某个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');
</script>

list.appendChild(js)	//追加

创建一个新标签实现插入

    //创建新节点
    var newP = document.createElement('p'); //创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hi,Java';

    list.appendChild(newP);

    //创建一个标签节点
    var myScript = document.createElement('script');
    myScript.setAttribute('type', 'text/javascript');

    list.appendChild(myScript);

 	var ee = document.getElementById('ee');
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    //插入
    list.insertBefore(js,ee);   // .insertBefore(newNode, targetNode)
    //替换    newNode必须先被建立   targetNode相关属性内容都将被移除
    list.replaceChild(js,ee);   // .replaceChild(newNode, targetNode)