步步为营-54-DOM
说明:DOM document object model 文档对象模型.将所有的标记加载到内存中,以树形结构处理
1.1 使用JavaScript操作DOM,主要包括两个部分
Browser对象:BOM 指的是window.***
Html Dom对象: 指的是document.***
1.2 BOM
1.2.1 常用的三个对话框
<script> //01-提示框,只有一个"确定"按钮 无返回值 alert("提示框"); //02-确认框 有"确定","取消"两个按钮,"确定"返回==true,"取消"返回==false var result = confirm("确定删除吗?"); alert(result); //03-输入框,一个文本框+有"确定","取消"两个按钮 ;"确定"返回==输入的值,"取消"返回==null var result2 = prompt('请输入年龄', '10'); alert(result2); </script>
1.2.2 window常用事件
1.2.2.1 onload事件
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> window.onload = function () { //02-常用的事件 document.getElementById("btnShow").onclick = function () { alert(this.value); }; } </script> </head> <body> <input type="button" id="btnShow" value="显示"/> </body>
1.3 HTML_DOM
1.3.1 常用的获取对象方法
//HTML DOM 使用 //01-获取元素方法 //01-01 根据id属性获取单个节点 document.getElementById(); //01-02 根据name获取节点列表 document.getElementsByName(); //01-03 通过class名称或的节点列表 document.getElementsByClassName(); //01-04 通过tagName获取单个节点 document.getElementsByTagName();
1.3.2 常用事件
1.3.2.1 onclick事件
<body>
<input type="button" id="btnShow" value="显示"/>
<script>
//HTML DOM 使用
//02-常用的事件
document.getElementById("btnShow").onclick = function() {
alert(this.value);
}
</script>
</body>
1.4 动态操作节点
1.4.1 动态创建元素
document.createElement();
1.4.2 添加子节点
appendChild();
1.4.3 插入节点
insertBefore(新元素对象,原节点);
1.4.4 获取第一个元素
firstChild();
1.4.5 获取所有子节点
childNodes();
1.4.6 删除元素
removeChild(子元素对象)
1.5 获取标签对的数据
1.5.1 innerText //获取标签对内的文本 textContent(火狐浏览器)
1.5.2 innerHTML //获取标签对内的HTML
1.6 通过js操作样式
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> window.onload = function() { var divset = document.getElementById('divSet'); divset.style.width = "200px"; //属性中带-的怎么写 divset.style.backgroundColor = "red"; } </script> </head> <body> <div id="divSet" style="width: 100px; height: 100px; background-color: blue">abc</div> </body> </html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> .worldColor { color: yellow; } </style> <script> window.onload = function() { var divset = document.getElementById('divSet'); divset.style.width = "200px"; //属性中带-的怎么写 divset.style.backgroundColor = "red"; //设置浮动效果(float是关键字) divset.style.cssFloat = 'right'; //通过class设置属性 divset.className = 'worldColor'; } </script> </head> <body> <div id="divSet" style="width: 100px; height: 100px; background-color: blue">abc</div> </body> </html>
1.7 div的显示与隐藏
通过设置样式的display控制显示与隐藏.
block 表示显示,none表示隐藏
1.8 form表单的提交
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> window.onload = function() { var form1 = document.getElementById('form1'); form1.onsubmit = function() { var age = document.getElementById('txtAge').value; if (isNaN(age)) { alert('年龄输入有误!'); return false; } return true; }; } </script> </head> <body> <form id="form1" action="提交表单.html"> <input type="text" id="txtAge" /> <input type="submit" id="submit1" /> </form> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 上周热点回顾(1.20-1.26)
· 【译】.NET 升级助手现在支持升级到集中式包管理