操作DOM对象
核心:
浏览器网页就是一个DOM树形结构
- 更新:更新Dom节点
- 遍历Dom节点:得到Dom节点
- 删除:删除一个Dom节点
- 添加:添加一个新的节点
要操作一个Dom节点就必须先获得一个Dom节点
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');
let children = father.children;
id1.innerText='123'修改文本
"123"
id1.innerHTML='<strong>aaaa<strong/>'解析html标签
删除节点的步骤:
先获取父节点,再通过父节点删除自己
<div id="father">
<h1>标题一</h1>
<p id="p1">p1 </p>
<p class="p2">p2</p>
</div>
<script>
let self = document.getElementById('p1');
let father = self.parentElement;
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
</script>
删除节点时,子结点的下标是动态变化的,即删除节点0之后,下一个节点下标就变为0了。
插入节点:
获得某个Dom节点时,若为空,通过innerText可以添加元素,但若该节点不为空,则会覆盖原内容
追加:
<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>
let js = document.getElementById('js');
let list = document.getElementById('list');
list.appendChild(js);
</script>
append为追加元素