前端培训-中级阶段(3)- DOM文档对象模型(2019-6 -27期)

简介: 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。前面我们已经基本掌握常规的语法语义,以及基本的使用方法。接下来我们讲深入进去了解其中内在的原理。

今天讲什么?


  1. 什么是 DOM ?


  1. DOM 文档对象模型


  1. HTML 元素接口


  1. DOM 元素继承


什么是 DOM ?


DOM 通常上来讲,我们可以理解为用 JS 操作 HTML 的 API或者说 JS 和 HTML 中间的处理器适配器。


文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口 文档对象模型 (DOM) 将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript,但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。
DOM模型用一个逻辑树来表示一个文档,树的每个分支的终点都是一个节点(node),每个节点都包含着对象(objects)。
DOM的方法(methods)让你可以用特定方式操作这个树,用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器,一旦某一事件被触发了,那些事件处理器就会被执行。 文档对象模型 (DOM) - mdn

DOM 文档对象模型


圈起来的是比较常用的接口。


bVbt4gk.webp.jpg


DOM 接口测试地址


DOM 接口 Attr


用来表示一个 DOM元素的属性。


大多数场景你可能会直接通过字符串的方式获取属性值(Element.getAttribute('name'))。


其实还有(Element.getAttributeNode())返回Attr类型。


目前 Attr接口 继承于 Node接口。DOM4 级别上会移出,所以尽量不要使用 Node接口上的属性


bVbt4Bb.webp.jpg


DOM 接口 Element


非常通用的基类,所有 Document对象下的对象都继承它。


Element接口继承 Node接口


DOM 接口 Comment


Comment 接口代表标签(markup)之间的文本符号(textual notations)。尽管它通常不会显示出来,但是在查看源码时可以看到它们。在 HTML 和 XML 里,注释(Comments)为 '<!--' 和 '-->' 之间的内容。在 XML 里,注释中不能出现字符序列 '--'。


21.png


DOM 接口 Event


Event 接口表示在 DOM 中发生的事件


  1. 用户生成的(例如鼠标 click 或键盘 keydown 事件)
  2. 由 API 生成(例如指示动画已经完成运行的事件,视频已被暂停等等)


其下还有很多子类


bVbt5b1.webp.jpg


  1. CustomEvent


CustomEvent 事件是由程序创建的,可以有任意自定义功能的事件。
比如说我们模拟 click 操作


document.querySelector('button').dispatchEvent(new CustomEvent('click'))


DOM 接口 Range


表示选区中包含的节点和文本节点的文档片段。


  1. document.createRange 方法创建


  1. Selection对象的 getRangeAt 方法取得(document.getSelection().getRangeAt(0))。


bVbt5he.webp.jpg


  1. 用构造函数 Range() 创建


还是在做一个聊天框功能的时候,使用这个去重置焦点


DOM 接口 Document


Document接口表示任何在浏览器中已经加载好的网页,并作为一个入口去操作网页内容(也就是DOM tree)。


DOM tree包括像 <body><head> 等元素。提供了全局操作 document 的功能。


  1. Document.scrollingElement 返回真实的滚动对象(用于 PC/M 兼容)


  1. Document.visibilityState 当前页面状态


  1. Document.hidden 当前页面是否隐藏


  1. Document.documentElement 获取根元素


其实功能还有很多,感兴趣的可以点标题看看


HTML 元素接口


针对具体的 HTML 元素,还有对应的接口,比如 input 会有对应的 valuerequired 等属性


bVbt4i0.webp.jpg


HTMLVideoElement


bVbt5Cn.webp.jpg


DOM 元素继承


具体继承方式如下。根据规范,不同的类型继承了不同的属性。不过一般元素都会继承 EventTargetNodeElement


bVbt4js.webp.jpg

相关文章
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
693 14
(前端3D模型开发)网页三维CAD中加载和保存STEP模型
本文介绍了如何使用`mxcad3d`库在网页上实现STEP格式三维模型的导入与导出。首先,通过官方教程搭建基本项目环境,了解核心对象如MxCAD3DObject、Mx3dDbDocument等的使用方法。接着,编写了加载和保存STEP模型的具体代码,包括HTML界面设计和TypeScript逻辑实现。最后,通过运行项目验证功能,展示了从模型加载到保存的全过程。此外,`mxcad3d`还支持多种其他格式的三维模型文件操作。
547 81
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
1085 62
前端中对象的深度应用与最佳实践
前端对象应用涉及在网页开发中使用JavaScript等技术创建和操作对象,以实现动态交互效果。通过定义属性和方法,对象可以封装数据和功能,提升代码的组织性和复用性,是现代Web开发的核心技术之一。
前端的全栈之路Meteor篇(五):自定义对象序列化的EJSON介绍 - 跨设备的对象传输
EJSON是Meteor框架中扩展了标准JSON的库,支持更多数据类型如`Date`、`Binary`等。它提供了序列化和反序列化功能,使客户端和服务器之间的复杂数据传输更加便捷高效。EJSON还支持自定义对象的定义和传输,通过`EJSON.addType`注册自定义类型,确保数据在两端无缝传递。
109 1
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
文章详细讲解了在SpringMVC中如何使用`@RequestMapping`进行路由映射,并介绍了前后端参数传递的多种方式,包括传递单个参数、多个参数、对象、数组、集合以及JSON数据,并且涵盖了参数重命名和从URL中获取参数的方法。
736 0
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
前端基础(十六)_数组对象
本文详细介绍了JavaScript中数组对象的创建和操作方法,包括数组的增删改查、排序、去重、迭代等常用操作。
92 0
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
254 6

热门文章

最新文章

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问