DOM对象介绍
浏览器网页就是一个Dom树形结构！
DOM：文档对象模型
- 更新：更新Dom节点
- 遍历Dom节点：得到Dom节点
- 删除：删除一个Dom节点
- 添加：添加一个新的节点 要操作一个Dom节点，就必须要先获得这个Dom节点
对应css选择器网络异常，图片无法展示|
获得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") </script>
网络异常，图片无法展示
|
- 获得父节点下的所有子节点
网络异常，图片无法展示
|
更新节点
<p id="p1">稀土掘金</p> <script> var a=document.getElementById("p1") </script>
操作文本
a.innerText="123"修改文本的值a.innerHTML="<strong>123</strong>"可以解析HTML文本标签 操作js- a.style.color="red";
- a.style.fontSize="200px";
- a.style.padding="2em"
删除节点（一）
删除节点的步骤：先获取父节点，在通过父节点删除自己
<div id="father"> <h1>标题一</h1> <p id="p1">p1</p> <p class="p2">p2</p> </div> <script> var father=document.getElementById("father") </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])
- 注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意！
插入节点
我们获取了某个节点，假设这个节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素，我们就不能这么干了，会产生覆盖 追加
<body> <p id="js">javaScript</p> <div id="list"> <p id="11">xitu11</p> <p id="22">xitu22</p> <p id="33">xitu33</p> </div> <script> var js=document.getElementById("js") var list=document.getElementById("list") </script> </body>
- list.appendChild(js) 追加到最后面
网络异常，图片无法展示
|
网络异常，图片无法展示
|
创建节点
var jsss=document.createElement("style") jsss.setAttribute('type','text/css') jsss.innerHTML='body{background-color:black}' document.getElementsByTagName('head')[0].appendChild(jsss)
