Dom操作
文章平均质量分 81
学习dom操作~~~~~~~~~~~~
前端小草籽
学习ing
展开
-
让页面滚动到指定位置
/在页面内刷新实现不了 页面打开 这个功能,所以也就 window.scroll(0,200)没有效果。//也是操作页面(窗口)滚动,与 window.scroll(0,200)类似。就滚动到指定位置,所以不能在页面内刷新,必须每次刷新都要重新打开一个页面。//页面一加载出来就滚动到我们想要的位置去(操作整个窗口的滚动)它是:则是 滚动条在当前位置的基础上,再次移动x,y像素。//也是操作页面滚动,但是与前两个有差异。//水平滚动距离x,垂直滚动距离y;.........原创 2022-08-10 01:43:21 · 1902 阅读 · 0 评论 -
DOM案例
因为是window方法,不写window,只写confirm也可以出现的弹框,点击确定就返回true,取消就返回false。Locattion对象的属性href从当前页面跳转到href属性所指的页面。此时,文档中的所有对象都是DOM,并且所有图像和子帧都已完成加载。上面这个图就是window.firm的效果图。......原创 2022-07-24 19:38:25 · 205 阅读 · 0 评论 -
DOM 预加载+懒加载+标签的自定义属性
提前加载图片,当用户需要查看时可直接从本地缓存中渲染同源加载的优化就是相同地址的资源,只加载一次,加载后放到浏览器的某个缓存文件中,下次需要用到该地址的资源时,浏览器直接从缓存文件中调取(很快),就不用再去重新加载(慢)。懒加载也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。......原创 2022-07-21 23:34:16 · 434 阅读 · 0 评论 -
DOM之style的操作
分析获取script脚本节点后面的div元素,获取不了,console.log(box2);//null因为文档的加载是按照文档树的顺序加载的,先是运行了script脚本中的获取.box2,然后才在下面定义.box2若一定要获取script脚本节点后面加载的元素节点,有两种方式01.当页面加载完成的事件触发,再去执行获取节点的方式把获取.box2的代码放到函数里面,等页面加载完了才运行该函数02.script--deferasync修饰src如何加载外部js资源的异步属性。......原创 2022-07-21 21:16:57 · 1034 阅读 · 0 评论 -
DOM 浏览器渲染流程+重绘+回流+浏览器加载一份html文档是怎么加载的
③domtree和样式结构体结合后构建呈现树(rendertree),rendertree有点类似于domtree,但有区别,rendertree能识别样式,rendertree中每个node都有自己的style,而且rendertree不包含隐藏的节点(比如displaynone的节点,还有head节点),因为这些节点不会用于呈现,而且不会影响呈现的,所以就不会包含到rendertree中。Load事件触发代表页面中的DOM,CSS,JS,图片已经全部加载完毕。............原创 2022-07-21 15:07:10 · 884 阅读 · 0 评论 -
DOM之事件代理(二)
像上面的代码,forEach循环只有一个,但是会生成4个监听器,给每一个子元素都.box2都设置一个,不管子元素是否触发都设置一个监听器,业务相同,设置4个,太浪费内存,也消耗性能。无论事件触发时,是不是目标对象的监听器,在监听器内部的事件对象event中都可以访问这个事件的目标对象(通过envet.target得到触发事件的目标),利用这个。特点是给父级元素绑定一个点击事件,通过event.target来判断是哪个子元素被点击了,以此判断点击的子元素和非点击的子元素。这样一套操作下来就很麻烦。...原创 2022-07-21 11:19:55 · 287 阅读 · 0 评论 -
元素的盒子模型+标签的尺寸大小和偏移量+获取页面滚动距离+让页面滚动到指定位置+ 获取浏览器窗口的宽高
随着人往下拉(滚动条向下滑)而慢慢减小,但是经过滑轮的绳子变长(经过滑轮的绳子:页面滚动距离document.body.scrollTop||document.documentElement.scrollTop||window.pageYOffset)人拉滑轮调重物的过程:整个绳子长度没有变化就是:offsetTop,重物(元素)距离滑轮(上边界) 的距离(元素.offsetWidth 和 元素.offsetHeight。元素.offsetTop 和 元素.offsetLeft。........原创 2022-08-09 23:49:05 · 800 阅读 · 0 评论 -
DOM 事件流+事件捕获+事件冒泡+阻止事件冒泡和默认事件
因为点击box3时,因为box1的点击事件在捕获阶段并没有触发(addEventListener第3个参数没写或者写false代表冒泡阶段触发),然后一直沿着父子关系向下传递,直到最下面的box3,然后进入冒泡阶段,因为点击是点到box3,所以触发了box1传下来的点击事件,执行box1绑定的点击事件,打印box11111,所以box3就是目标(target谁触发得事件target就是谁event.target=box3)就连本身绑定同一类型的第二个点击事件都经过不了,更不说冒泡了。............原创 2022-07-20 23:50:14 · 1319 阅读 · 0 评论 -
事件对象+事件对象常用属性方法+事件对象相关的兼容性写法
概念Event对象代表事件的状态,,这个对象就是event(事件对象)。原创 2022-07-19 21:03:27 · 1054 阅读 · 0 评论 -
鼠标事件+键盘事件+表单事件+其它事件
用它们来。原创 2022-07-19 11:07:30 · 2988 阅读 · 0 评论 -
事件三要素+事件绑定+事件解绑+事件绑定解绑兼容性写法
元素在达成时(事件触发时),要执行的提前设定好的程序,我们称之为也就是事件。原创 2022-07-18 19:16:07 · 622 阅读 · 0 评论 -
DOM之元素的 创建+添加+删除+克隆
方式2利用innerHTML创建元素(不推荐用)innerHTML属性值不运行时,当作字符串,运行时当作js代码。原创 2022-07-18 09:33:34 · 2869 阅读 · 0 评论 -
DOM之排它思想
当鼠标点击一个按钮时,该按钮背景颜色改变,其余按钮颜色不变;当鼠标点击另外一个按钮时,那个按钮背景颜色发生改变,其余按钮背景颜色恢复原样。(这里其余按钮背景颜色恢复原样,包括前面点击的变了色的按钮)同一组元素,某个元素要与其它元素之间形成与众不同,就会让它们变"普通",而自己变"闪耀",这就是排除他人,成就自己(假装这样理解0.0)01.给同组所有元素清除"闪光点"(利用循环)案例2排它思想之表格点击,点击表格,某一竖变为蓝色,其它变为白色。给所有元素绑定点击事件{案例排它思想之按钮点击。...原创 2022-07-15 00:55:02 · 226 阅读 · 0 评论 -
什么是DOM + 获取页面元素 + 类数组转成数组的方式 + 一些数组的方法(entries,keys)
文档对象模型(Document Object Model),简称DOM,是一种标准的编程接口.文档对象模型 DOM 是document object model 它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口W3C已经定义了一些列的DOM接口,通过这些DOM接口可以改变网页的内容,结构和样式。DOM树: 注:1.文档:一个页面就是一个文档,DOM中使用document表示2.元素:页面中所有标签都是元素,DOM中用element使用3.节点:网页中所有内容都是节点(标签,属性,文本,注原创 2022-07-14 17:29:13 · 1331 阅读 · 0 评论 -
DOM之12种节点
DOM是javascript操作网页的接口,全称为文档对象模型(DocumentObjectModel)。,从而可以使用javascript对网页进行各种操作(比如增删内容)。。DOM的最小组成单位叫做节点(node),文档的树形结构(DOM树)由12种类型的节点组成。本文将主要说明DOM节点类型。...转载 2022-07-21 20:45:36 · 3377 阅读 · 0 评论 -
DOM的一些简单的知识
DOM:document object model 文档对象模型 学习API。问题:一个基本数据数据类型要以对象的去打印怎么做?API: 对象的属性和方法。原创 2022-08-12 20:32:43 · 55 阅读 · 0 评论