DOM_概述与DOM_Document对象_创建DOM对象
DOM_概述
Document object model:文档对象模型
将标记语音文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行crud的动态操作
HTML DOM树
html与dom树的关系
通过这个对象模型,JavaScript 获得创建动态 HTML 的所有力量:
- JavaScript 能改变页面中的所有 HTML 元素
- JavaScript 能改变页面中的所有 HTML 属性
- JavaScript 能改变页面中的所有 CSS 样式
- JavaScript 能删除已有的 HTML 元素和属性
- JavaScript 能添加新的 HTML 元素和属性
- JavaScript 能对页面中所有已有的 HTML 事件作出反应
- JavaScript 能在页面中创建新的 HTML 事件
什么是DOM
W3C DOM 标准被分为 3 个不同的部分:
- Core DOM - 所有文档类型的标准模型
- Document :文档对象
- Element :元秦对象
- Attribute :属性对象
- Text:文本对象
- Comment:注释对象
- Node:节点对象,其他5个父对象
- XML DOM - XML 文档的标准模型
- HTML DOM - HTML 文档的标准模型
核心DOM模型:
- Document :文档对象
- Element :元秦对象
DOM_Document对象_创建DOM对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document对象</title> </head> <body> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> <div class="cls1">div4</div> <div class="cls1">div5</div> <input type="text" name="username"> <script> /* Document:文档对象 1. 创建(获取):在html dom模型中可以使用window对象来获取 1. window.document 2. document 2. 方法: 1. 获取Element对象: 1. getElementById() : 根据id属性值获取元素对象。id属性值一般唯一 2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组 3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组 4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组 2. 创建其他DOM对象: createAttribute(name) createComment() createElement() createTextNode() 3. 属性 */ //2.根据元素名称获取元素对象们。返回值是一个数组 var divs = document.getElementsByTagName("div"); //alert(divs.length); //3.根据Class属性值获取元素对象们。返回值是一个数组 var div_cls = document.getElementsByClassName("cls1"); // alert(div_cls.length); //4.根据name属性值获取元素对象们。返回值是一个数组 var ele_username = document.getElementsByName("username"); //alert(ele_username.length); var table = document.createElement("table"); alert(table); </script> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~