操作DOM对象
2022/7/8 6:21:32
本文主要是介绍操作DOM对象,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
操作DOM对象(重点)
核心
浏览器网页就是一个DOM树形结构!
-
更新:更新DOM节点
-
遍历DOM节点:得到DOM节点
-
删除:删除一个DOM节点
-
添加:添加一个新的节点
要操作一个DOM节点,就必须要先获得这个DOM节点
获得DOM节点
//对应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[index];//获取父节点下的所有子节点 // father.firstChild; // father.lastChild;
这是原生代码,之后我们尽量都使用jQuery();
更新节点
<div id="div1"> </div> <script> let div1 = document.getElementById('div1'); </script>
操作文本
-
div1.innerText='456'修改文本的值
-
div1.innerHTML='123'可以解析HTML文本标签
操作js
div1.style.color = 'red'; //属性使用 字符串 包裹 div1.style.fontSize = '20px';// - 转 驼峰命名问题 div1.style.padding = '2em';
删除节点
删除节点的步骤:先获取父节点,再通过父节点删除自己
<div id="father"> <h1>标题一</h1> <p id="p1">p1</p> <p class="p2">p2</p> </div> <script> let self = document.getElementById('p1'); let father = p1.parentElement; father.removeChild(self); //删除是一个动态的过程 father.removeChild(father.children[0]); father.removeChild(father.children[1]); father.removeChild(father.children[2]); </script>
注意:删除多个节点的时候,children是在时刻变化的,删除节点的时候一定要注意
插入节点
我们获得了某个DOM节点,假设这个DOM节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个DOM节点已经存在元素了,我们就不能这么干了!会产生覆盖
追加
<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.append(js);//追加到后面 </script>
效果:
创建一个新的标签,实现插入
<script> let js = document.getElementById('js');//已经存在的节点 let list = document.getElementById('list'); list.append(js); //通过js创建一个新的节点 let newP = document.createElement('p');//创建一个p标签 newP.id = 'newP'; newP.innerText='hello'; list.appendChild(newP); //创建一个新的标签节点(通过这个属性,可以设置任意的值) let myScript = document.createElement('myScript'); myScript.setAttribute('type','text/javascript'); //可以创建一个style标签 let myStyle = document.createElement('style');//创建了一个style标签 myStyle.setAttribute('type','text/css'); myStyle.innerHTML='body{background-color: #60bcc7;}';//设置标签内容 document.getElementsByTagName('head')[0].appendChild(myStyle); </script>
insertBefore
let ee = document.getElementById('ee'); let se = document.getElementById('se'); let list = document.getElementById('list'); //要包含的节点.insertBefore(newNode,targetNode) list.insertBefore(ee,se);
这篇关于操作DOM对象的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-20测试人员都是画画大神,让我看看谁还不会用代码图?
- 2024-05-20年薪百万的程序员都在用的摸鱼方式……
- 2024-05-19永别了,微服务架构!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了