持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第31天点击查看活动详情
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)
