[JS]14.DOM

DOM：文档对象模型

核心

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

• 更新：更新DOM节点
• 遍历DOM节点：得到DOM节点
• 删除：删除DOM节点
• 添加：添加一个新的节点

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

获得DOM节点

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

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

这是原生代码，以后我们都i用JQuery

更新DOM节点

<div id="id1">
</div>

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

操作文本
可以修改文本的值

id1.innerText = '124'

可以解析HTML文本标签

id1.innerHTML = '<strong>123</strong>'

操作CSS

删除DOM节点

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

创建和插入DOM节点

我们获得了某个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">javame</p>
</div>

<script>

    var js = document.getElementById('js');
    var list = document.getElementById('list');
	list.appendChild(js);

</script>

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

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

    list.appendChild(newp);