![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
DOM
文章平均质量分 73
小狐狸ya
前端小白学习中~
展开
-
DOM--基础
文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和 www 文档的风格(目前,HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理,处理的结果可以加入到当前的页面。DOM 是一 种基于树的 API 文档,它要求在处理过程中整个文档都表示在存储器中。原创 2022-09-02 11:37:37 · 235 阅读 · 0 评论 -
DOM--预加载和懒加载
3、可视化区域加载:即只加载用户看得到的区域通过监控滚动来实现,一般会在距离用户看到图片前一定距离才开始加载,这样可以保证用户下拉时正好看到图片。**区别:**一个是提前加载,一个是延迟甚至不加载,懒加载可以缓解服务器对的压力。又叫做延迟加载,通过加载网络资源或符合某些条件时才加载资源。懒加载的意义:懒加载的目的主要是作为服务器前端的优化,减少请求数或延迟请求数。**2、预加载:**提前加载图片,当用户需要查看时可以直接从本地缓存中渲染。2、条件加载:符合某些条件,或者触发某些事件才开始异步加载。原创 2022-09-02 11:34:16 · 417 阅读 · 1 评论 -
DOM--防抖和节流
简单理解就是:我会等你到底。在某段时间内,不管你触发了多少次回调,我都只认最后一次。原创 2022-09-02 11:33:29 · 181 阅读 · 0 评论 -
DOM--页面渲染流程
③dom tree和样式结构体结合后构建呈现树(render tree),render tree有点类似于dom tree,但有区别,render tree能识别样式,render tree中每个node都有自己的style,而且render tree不包含隐藏的节点(比如display:none的节点,还有head节点),因为这些节点不会用于呈现,而且不会影响呈现的,所以就不会包含到render tree中。⑤ 还有一种是用户的操作,比如改变浏览器大小,改变浏览器的字体大小等(回流+重绘)原创 2022-09-02 11:31:45 · 416 阅读 · 0 评论 -
DOM--事件代理(事件委托)
有: click , mousedown , mouseup , keydown , keyup , keypress。原创 2022-09-02 11:30:23 · 251 阅读 · 0 评论 -
DOM--事件响应链(冒泡目标捕获)
结构上(非视觉上)嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素捕获至子元素(事件源元素)。(自顶向下)与事件冒泡是反过来的。要阻止事件传递,唯一的方式就是阻止事件冒泡:事件对象调用stopPropagation()这个函数。的冒泡,也会阻止同一个节点上同一事件的其他的事件处理程序 (优先级比它低的,同元素同事件多处理程序时)。:结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素。如 :点击和鼠标移动是不同的点击事件和滑动事件是两条链。原创 2022-09-02 11:29:11 · 242 阅读 · 0 评论 -
DOM--盒子模型
dom.offsetParent 返回最近的定位父级元素,如无,返回body元素,document.body.offsetParent为 null。:与自己是否添加定位元素无关。原创 2022-09-02 11:27:40 · 168 阅读 · 0 评论 -
DOM--事件
事件:页面上的元素在某种状态(浏览器实现的)达成时,要执行的提前设定好程序,称之为事件句柄,简称事件。事件源事件类型事件处理程序行内式(两种写法):1、直接在时间里面写处理程序< div class = 'box' onclick = 'console.log(' 666666 ')' > 点我 < / div >2、调用外面的事件程序。原创 2022-09-02 11:24:48 · 280 阅读 · 0 评论