核心：浏览器网页就是一个DOM树形结构
-
更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
-
遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
-
添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
-
删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。
7.1 获得节点
要操作一个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;
这是原生代码，之后我们尽量都使用 jQuery
7.2 更新节点
<div id="div1"></div>
<script>
var div1 = document.getElementById('div1');
</script>
-
操作文本
div1.innerText = '123'修改文本的值div1.innerHTML = '<strong>123</strong>'可以解析HTML文本标签
-
操作JS
div1.style.color = 'red' //属性使用''包裹 div1.style.fontSize = '100px' div1.style.padding = '1em'
7.3 删除节点
步骤：先获取父节点，再通过父节点删除自己
<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(self);
//删除是一个动态的过程，删除后，下标是会发生变化的
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>
7.4 插入节点
直接插入
当我们获得了某个DOM节点，假设这个DOM节点是空的， 我们通过innerHTML就可以增加一个元素，但是如果这个DOM节点已经存在元素了我们就不能这么干了，会发生覆盖。此时我们要使用追加操作appendChild()
appendChild() 追加插入
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="web">JavaWeb</p>
</div>
<script>
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js); //追加到后面
</script>
追加后得到的代码
创建一个新的标签，实现插入
<script>
var js = document.getElementById('js'); //已经存在的节点
var list = document.getElementById('list');
//list.appendChild(js); //追加到后面
//通过JS创建一个新的节点
//创建一个p标签
var newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = 'hello,newP';
list.appendChild(newP);
//创建一个标签节点(通过这个属性，可以设置任意的值)
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
var myStyle = document.createElement('style'); //创建一个空的style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color:pink;}'; //设置标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>
insertBefore()
var js = document.getElementById('js');
var ee = document.getElementById('ee');
//要包含的节点 insertBefore(新节点,目标节点);
ee.insertBefore(js,ee);
