DOM对象

核心：

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

1、更新：更新Dom节点

2、遍历dom节点：得到Dom节点

3、删除：删除Dom节点

4、添加：添加一个新节点

要操作一个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

更新节点

<div id="id1">

    </div>

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

 操作文本

id1.innerText = 123  //修改文本的值

id1.innerHTML = '<strong>456<\strong>'  //超链接 加粗

操作CSS

id1.style.color = 'red';  //属性使用字符串包裹
id1.style.font = '20px'; 

删除节点

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

<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(p1);


    //删除是一个动态过程 删完第一个元素 原本的第二个元素就变成了第一个 所以都是[0]
    father.removeChild(father.children[0])
    father.removeChild(father.children[0])
    father.removeChild(father.children[0])

<\script>

插入节点

我们获得了某个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');


</script>

 js追加到了list后面

 

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

<script>

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

    list.appendChild(newP);

//创建一个标签节点（通过这个属性，可以设置任意的值）
    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:green;}';//设置标签内容

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