DOM对象：文档对象模型
核心：浏览器就是一个Dom树形结构！
1.更新：更新DOM节点
2.遍历DOM节点：得到DOM节点
3.删除：删除一个DOM节点
4.添加：添加一个新的节点
要操作一个Dom节点，就必须获取这个dom节点
document.getElementsByTagName(“h1”)
获取标签节点
document.getElementById(“id”)
获取id选择器节点
.children //获取父节点下的所有子节点
.firstchild //获取第一个节点
.lastchild //获取最后一个节点
更新节点
操作文本
css.innerText="1354" 修改文本的值
css.innerHTML='<strong>131</strong>' 可以解析html标签
操作js
css.style.color='red' 修改文本的样式
删除节点
删除节点的步骤：先获取父节点，在通过父节点删除自己
1. let fathers=document.getElementById("father")
2.fathers.removeChild(h1)
<body id="father">
<h1>标题1</h1>
<h2> 标题2</h2>
<h3>标题3</h3>
<div id="cs">
</div>
<script type="text/javascript">
let css=document.getElementById("cs");
css.innerText="123";
</script>
</body>
注意：删除多个子节点的时候，children是在时刻变化的，删除节点的时候一定要注意~
根据子节点删除节点
fathers.removeChild(fathers.children[0])
插入结点
我们获得了某个DOM节点，假设这个Dom节点是空的，我们通过inner Text就可以增加一个元素了，但是这个Dom节点已经存在元素了，我们就不能这么干了，会产生覆盖
追加 ：
<body>
<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 type="text/javascript">
let js=document.getElementById('js');
let list=document.getElementById('list');
list.appendChild(js); //追加
</script>
通过js创建 一个新的节点
<body>
<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 type="text/javascript">
let js=document.getElementById('js');
let list=document.getElementById('list');
let newP=document.createElement("p");//创建一个标签
newP.id="p";
newP.innerText="caofeng";
list.appendChild( newP);
list.appendChild(js); //追加
</script>
插入样式
<body>
<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 type="text/javascript">
let js=document.getElementById('js');
let list=document.getElementById('list');
let newP=document.createElement("p");//创建一个标签
newP.id="p";
newP.innerText="caofeng";
list.appendChild( newP);
list.appendChild(js); //追加
let style=document.createElement("style");//创建一个style标签
style.setAttribute("type","text/css");//创建一个
style.innerHTML='body{background-color:green;}';//设置标签的内容
//获取标签为head数组的第一个位置并且添加
document.getElementsByTagName('head')[0].append(style);
</script>