8.操作DOM（重点）
DOM：文档对象模型
核心：浏览器网页就是一个Dom树形结构
- 更新：更新Dom节点
- 遍历dom节点：得到Dom节点
- 删除：删除一个Dom节点
- 添加：添加一个新的节点
要操作一个Dom节点，就必须 要先获得这个Dom节点
获得dom节点
<div id = "father"></div>
<h1>标题</h1>
<p id="p1">p1</p>
<p class="2">p2</p>
</div>
<script>
//对应CSS选择器
let h1 = document.getElementsByTagName(‘h1‘);
let p1 = document.getElementById(‘p1‘);
let p2 = document.getElementsByClassName(‘p2‘);
let father = document.getElementById(‘father‘);
let childrens = father.children; //获取父节点下的所有子节点
//father.firstChild
//father.lastChild
这是原生代码，之后 都是用jQuery（）；
更新节点
<div id="id1">
</div>
<script>
let id1 = document.getElementById(‘id1‘);
</script>
操作文本
- id1.innerText=‘456‘修改文本的值
- id1.innerHTML=‘123‘可以解析HTML文本
操作css
id1.style.color = ‘red‘ //属性使用字符吕包裹
"red"
id1.style.fontSize=‘20px‘//驼峰命名
"20px"
id1.style.padding=‘2em‘
"2em"
删除节点的步骤，先获取父节点，在通过父节点删除自己
<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])
</script>
注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意！
插入节点
我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干了!会产生覆盖
追加
<p id="js">JavaScript</p>
<div id="list">
<p id="va">Java</p>
<p id="ee">JavaEE</p>
<p id="me">JavaSE</p>
</div>
<script>
let js = document.getElementById(‘js‘)
let list = document.getElementById(‘list‘);
list.appendChild(js); //追加到后面
</script>
创建一个新的标签，实现插入
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="va">Java</p>
<p id="ee">JavaEE</p>
<p id="me">JavaSE</p>
</div>
<script>
let js = document.getElementById(‘js‘)//已经存在的节点
let list = document.getElementById(‘list‘);
//通过JS创建一个新的节点
let newP = document.createElement(‘p‘);//创建一个p标签
newP.id = ‘newP‘;
newP.innerText = ‘hello‘;
list.appendChild(newP);
//创建一个标签节点 通过这个标签可以设置任意的值
let myScript = document.createElement(‘script‘);
myScript.setAttribute(‘type‘,‘text/javascript‘);
</script>
<script>
let js = document.getElementById(‘js‘)//已经存在的节点
let list = document.getElementById(‘list‘);
//通过JS创建一个新的节点
let newP = document.createElement(‘p‘);//创建一个p标签
newP.id = ‘newP‘;
newP.innerText=‘hello‘;
//创建一个标签节点
let myScript = document.createElement(‘script‘);
myScript.setAttribute(‘type‘,‘text/javascript‘);
//可以创建一个Style标签
let myStyle = document.createElement(‘style‘);//创建了一个空style标签
myStyle.setAttribute(‘type‘,‘text/css‘);
myStyle.innerHTML = ‘bady{background-color:chartreuse;}‘;//设置标签内容
document.getElementsByTagName(‘head‘)[0].appendChild(myStyle)
</script>
insert
let ee = document.getElementById(‘ee‘);
let js = document.getElementById(‘js‘);
let list = document.getElementById(‘list‘);
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
转载https://www.cnblogs.com/qianguyihao/p/8366012.html