简介

核心

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

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

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

获得DOM节点

<dl id="app">
   <dt>java</dt>
    <dd>陈捷</dd>
    <dd>李泽群</dd>
</dl>
    <div id="reset">
        <span id="an1">链接1</span>
        <span class="an2">链接2</span>
        <span class="an3">链接3</span>
        <span class="an4">链接4</span>
        <span class="an5">链接5</span>
    </div>
<h1>123</h1>
<script >
    'use strict'
    var d = document.getElementById('reset');
    var dd = document.getElementById('app');
    var d1 = document.getElementById('an1');
    var d2 = document.getElementsByClassName('an2');
    var d3 = document.getElementsByClassName('an3');
    var d4 = document.getElementsByClassName('an4');
    var d5 = document.getElementsByTagName('span')

    var father = document.getElementById('father');
    var childrens = father.children;//获取父节点下的所有子节点
     // father.firstChild;  //第一个节点
    // father.lastChild;    //最后一个节点
    // father.previousElementSibling; //获取上一个节点
    // father.nextElementSibling;   //获取下一个节点
</script>

这是原生代码，之后尽量都是用jQuery();

1、更新节点

var a = document.getElementById('id1')
undefined
a.innerText= 666 //插入修改节点
666
a.innerHTML = '<a href="">666</a>'
"<a href="">666</a>"

操作文本

• a.innerText= 666 修改文本值（但会覆盖节点）
• a.innerHTML = <a href="">666</a> 可以解析HTML文本标签

操作JS（JavaScript能让网页上变动）
样式

id1.style.color = 'red'    //属性使用 字符串 包裹
id1.style.color = 'yellow'
id1.style.fontSize = '200px' // -  转  驼峰命名问题

2、删除节点

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

<dl id="father">
    <dt id="id2">java</dt>
    <dd>傻逼陈捷</dd>
    <dd>傻逼李泽群</dd>
</dl>
<script >
    var salf = document.getElementById('id2');
    var father = salf.parentElement;
    father.removeChild(salf);

    //删除是一个动态的过程
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);
    </script>

注意：删除多个节点的时候，children是时刻在变化的，删除节点的时候一定要注意~

3、插入节点

先获得某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML，就可以增加一个元素。但如果这个DOM节点本身存在元素，那么innerHTML会将原本的元素覆盖！

那么最好是在后面追加元素

append

appendChild() //追加到后面

<p id="js">JavaScript</p>
<div id="List">
    <p id="se">C#</p>
    <p id="ee">Java</p>
    <p id="me">C++</p>
</div>

<script>
    var js = document.getElementById("js");
    var list = document.getElementById("List");
    list.appendChild(js);
</script>

创建新标签，实现插入

document.createElement('p')

//通过js 创建一个新的节点
var newP = document.createElement('p');//创建一个p标签
newP.id = 'newP';
newP.innerText = '666我的宝贝';
salf.appendChild(newP); //将p标签追加在salf后面

包括也能添加Script、css

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

//非常多的玩法，只有你想不到，没有他做不到，所以为什么javascript这么随意
var body = document.getElementsByTagName('body')
    body[0].style.backgroundColor = '#000';//第一种增加方式
    body[0].setAttribute('style','background-color: rgb(0, 0, 0);')//第二种方式，建议使用第二种，因为后端都是通过这种方式去增加
//需要注意的是像这种取值，取到的是一个集合

第三种方式

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

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

JavaScript方法方式许许多多，只要逻辑行的通都可以。

insert

insertBefore方法可在已有的子节点前插入一个新的子节点

<p id="js">JavaScript</p>
<div id="List">
    <p id="se">C#</p>
    <p id="ee">Java</p>
    <p id="me">C++</p>
</div>

<script>
    var ee = document.getElementById("ee");
    var js = document.getElementById("js");
    var list = document.getElementById("List");
    //要包含的节点.insertBefore(newNode,targetNode)
    list.insertBefore(js,ee);
</script>

replaceChild(newNode,oldNode) 替换节点··

removeChild(Node) 删除子节点