JavaScript - Web Api
关注
分享
扫一扫
文章平均质量分 87
本分栏记录关于 Web Api 的知识，包含常见的 DOM 和 BOM
劫辞
看不清未来时，就坚持的更久一点
展开
-
BOM - window 对象
提示输入弹窗，可以记录一些用户输入的值，点击确认返回用户输入的值，没有输入返回空字符串，点击取消返回 null。也是弹出一个弹窗，但是具备返回值，点击确认返回 true 点击取消返回 false。表示历史记录，只能获取当前网站访问了那些网页，但是权限也很低。当然还有更多配置，可以自行查看 mdn 文档，弹出一个提示弹窗，样式和浏览器有关。herf 属性：目前的地址。记录浏览器的一些信息。原创 2023-07-27 17:15:17 · 125 阅读 · 0 评论 -
DOM - 补充
获取某个元素的第一个定位的祖先元素，如果没有，则得到 body，body 的 offsetParent 为 null。该方法得到一个对象，该对象记录了该元素相对于视口的距离。// 点击按钮1 ，就模拟触发 div 的鼠标移入事件。// 点击按钮2 ，就模拟触发 div 的鼠标移出事件。相对于该元素的 offsetParent 的坐标。// - 移入背景色变成红色，移除变成蓝色。// - 参数二传入配置，这里禁止冒泡。// 给 div 注册鼠标移出移入事件。// - 参数一传入事件类型。原创 2023-07-27 11:06:43 · 203 阅读 · 0 评论 -
DOM - 其他事件
通过这个图解，我们可以得知，offsetHeight 和 offsetWidth 是包含边框的，而 clientHeight 和 clienWidth 只是容器的可视区域，只有内容区域和内边距，而 scrollHeight 和 scrollWidth 是实际内容的宽高。当我们调整浏览器窗口大小时就会发生变化，监听的是视口尺寸。此事件可以给元素使用也可给 window 使用。窗口尺寸发生变化运行的事件，window 使用。这个事件触发的频率也和设备以及浏览器版本有关。scroll 窗口发生滚动时运行的事件。原创 2023-07-26 17:54:15 · 177 阅读 · 0 评论 -
DOM - 表单事件
提交表单事件，仅在 form 元素身上有效，点击按钮时会触发整个表单的提交事件，可以冒泡。文本改变事件(实时触发)，这点就与 change 有些区别了，input 的触发是实时的。在点击按钮的时候就触发 form 表单的提交事件，页面也出现了刷新。元素聚焦时触发（能与用户发生交互的元素都可以聚焦）元素失去焦点时触发，也不会冒泡。'inp1 聚焦了'原创 2023-07-25 12:35:11 · 60 阅读 · 0 评论 -
DOM - 键盘事件
按下键盘上任意一个**字符键(即可以打印出来的字符)**触发。按下键盘上任意键触发，如果按住不放，会重复触发此事件。原创 2023-07-25 11:36:27 · 156 阅读 · 0 评论 -
DOM - 鼠标事件
这次的触发就可以很清晰的看见了，虽然进入 btn 区域时，也触发了离开的时候，但是没有像禁止冒泡前面的时候不仅触发离开还触发进入的事件，只是因为从 box 移入到了 btn ，且 btn 属于上层元素，所以是真的离开了 box 的区域，是一种正常的事件触发。所有的鼠标事件，事件处理程序中的事件对象，都为 MouseEvent，MouseEvent 是一个构造函数。这两个属性是相对于鼠标上一次移动位置，一个移动事件的触发时持续的，所以这两个属性的值，是。这两个属性等效于 clientX 和 clientY。原创 2023-07-25 09:58:47 · 569 阅读 · 0 评论 -
DOM - 事件对象
文章目录获取事件对象事件对象的通用成员target && srcElement事件委托演练currentTargettypepreventDefault && returnValuestopPropagationeventPhase事件对象也是一个对象，指的是这件事情发生后的一些相关信息，如鼠标点击了一下，这此点击的位置在哪里，是哪个元素触发的等等获取事件对象通过事件处理函数的参数获取，如下：<body> <div class="box原创 2023-07-20 12:39:00 · 210 阅读 · 0 评论 -
DOM - 事件注册
当然还有一个配置项，passive，当 passive 设置为 true 时，表示事件处理程序不会调用 preventDefault() 来阻止默认行为，这样可以提高滚动性能。比如我们这里将 box 设置为 true，那么按照事件流的方式，输出顺序应该是 box --> btn --> html --> document，其中 box 到 btn 属于事件捕获，而 btn 到 document 属于事件冒泡，至于为什么会是这样的顺序，可以查看我的另外一篇文章。原创 2023-07-19 14:12:20 · 237 阅读 · 0 评论 -
DOM - 事件之基础概念
因此事件触发的顺序不以注册的顺序为基准，而是以事件流的顺序事件冒泡是 ie 所提出的，事件捕获则是由网景公司提出，并没有统一的规定后续规范退出之后，两种事件流都支持，但是默认情况下，事件是以冒泡的方式触发这个事件流如何修改我们在后续文章中会提到事件源即事件目标，总体如图：事件捕获和事件冒泡会涉及多个元素，但是事件源只会存在一个。原创 2023-07-19 10:10:29 · 182 阅读 · 0 评论 -
DOM - dom 元素样式
toggle 还可以加入第二个参数，为 true 表示强制添加，不会移除，而为 false 表示轻质移除而不会添加。注意，在 css 中使用短横线链接的属性，在 js 中需要使用小驼峰，且这个只能获取行内样式。而 getComputedStyle 还可以设置第二个参数，第二个参数可以得到元素的。但是在开发中我们一般获取的是最终计算出来的高度或者宽度，所以这种方式就不合适了。所以如果我们通过这个获取宽度，是无法获得的，除非在行内样式里面定义了宽度。dom4 新属性 是一个用于控制元素类名的对象。原创 2023-07-12 12:01:55 · 198 阅读 · 0 评论 -
DOM - dom 元素操作
为什么需要自定义属性呢？因为有的时候本身定义的 HTML 属性可能并不能够满足我们的使用，这时候就可以自定义属性来实现我们的需求，按照规范来说，自定义属性我们一般以 data- 做为前缀，但是这不是必须的，只是一种规范获取元素的自定义属性：getAttribute，代码如下：原创 2023-07-11 11:53:28 · 236 阅读 · 0 评论 -
DOM - 获取 dom 节点
parentNode：获取父节点，即父元素节点，现在获取 .box1-top 元素，然后通过 parentNode 获取 .box1-top 元素的父节点 .box。在上面的获取中，我们删除元素之后并没有重新使用方法获取，只是打印了一下保存结果的变量，可以发现结果时实时更新的。其实关系和上述的节点关系获取节点一样，只是获取的节点只包含元素节点。childNodes 获取所有的子节点(包含文本节点和元素节点)lastChild 获取最后一个子节点(包含文本节点和元素节点)原创 2023-07-08 15:30:25 · 320 阅读 · 0 评论 -
WebApi概述
我们把浏览器宿主环境也叫做 Web Apiapi 即应用程序编程接口，提供一个接口，根据接口的规则进行使用web 就是互联网因此我们把浏览器宿主环境里面提供的对象和函数统称为 Web ApiWebApi 的标准由 w3c(万维网) 制定BOM: Brower Object Model(浏览器对象模型)控制浏览器本身，比如前进回退网页、浏览器窗口的尺寸位置、alert等浏览器弹窗DOM：Document Object Model(文档对象模型)控制整个 html 文档。原创 2023-07-08 15:02:29 · 307 阅读 · 0 评论