jsDOM操作

```js ``` > 求鼠标在某个盒子的距离就用鼠标离页面（body)的距离减去某个盒子离页面（body)的距离 ![8011EA442332699BEA9BCA4B1E6D8134.png](ht

```js 登录 ``` ![5F3E10B7629D7E022A4E19F8BE0D9D08.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpf

预加载 预加载: 提前加载资源会同源加载优化，同源加载优化就是相同的资源加载多次时只会加载1次是浏览器自带的功能，浏览器会将已经加载的资源放入临时缓存文件中，再次加载这个资源时就在临时缓存文件中取出再

防抖与节流 高频率触发的业务需要减少事件处理函数的回调执行，提高浏览器性能，就有了防抖和节流的设计思想。 防抖 防抖：固定的时间段内连续多次触发事件，只执行最后一次触发事件的事件处理回调函数。 原理：

操作元素行内样式 元素.style.属性名操作样式，js只能操作行内样式。 其实际的含义是：通过该方法只能获取到行内样式，但是无论外部样式或者内嵌样式是否有某一个属性，都可以通过元素.style.属性

BOM是什么 BOM是browser object model的缩写，简称浏览器对象模型，核心对象是window对象，BOM操作就是操作window对象。 DOM是document object mo

让窗口滚动到指定位置 1.让窗口滚动到指定位置：前提条件是窗口的大小足够长和高可以实现滚动。 1.window.scrollTo(0,600); 2.window.scroll(0,600); 3.w

渲染流程 浏览器加载一份html文当是怎么加载的？ 重绘与回流 重绘：节点的改变不会影响布局，更新了元素的绘制属性。如改变了背景颜色，字体颜色和等不会影响布局和元素的隐藏没有影响布局。 回流：节点的改

document对象 document对象也可以绑定事件 文档根元素和文档根节点 documentElement是网页中的根节点也是网页中的根元素就是html元素，html里面html是元素的根节点

事件代理 事件代理是网页设计的一种设计思想，利用事件冒泡的原理和无论事件触发时触发事件执行的元素（事件触发源）是不是事件绑定的元素，在事件处理函数内部的事件对象event都可以访问这个事件绑定的元素。

事件对象的target属性和currentTarget属性 event.target指向引起触发事件的元素，而event.currentTarget则是事件绑定的元素。 只有被点击的那个目标元素的ev

事件源 事件源：触发事件的元素，单击某个子元素时，该元素称为事件源；单击事件不仅发生在事件源上，也发生在其文档树上的所有的父级元素上。 事件捕获 事件捕获:结构上（非视觉上）嵌套关系的元素，会存在事件

DOM盒子模型 浏览器提供一些获取页面中的盒子位置和样式宽高信息的属性和方法，获取的结果是没有单位的数字number类型且获取的结果是整数，它会自己进行四舍五入。 CSS盒子模型 元素内容的宽度和高度

事件对象 事件触发时对于事件处理函数，JS执行引擎会默认传一个实参就是事件对象，通常用形参event接收。Event对象（事件对象）存储着事件发生时的相关信息，比如事件在其中发生的元素、键盘按键的状态

鼠标事件 1.click：用户单击鼠标左键。 鼠标按下和松开时的鼠标的光标指针在被选元素区域内部会触发。超出了被选元素区域的后代元素也算被选元素区域内部。 2.dbclick：用户双击鼠标左键触发。

事件的概念 事件 元素在某种状态（某种状态由浏览器实现也称为事件触发）达成时，要执行的提前设定好的程序，称之为事件句柄。 事件三要素 1.事件源：在哪个元素上发生的。比如: p标签、a标签、div标签

查询元素节点 查询元素就是获取元素，获取元素的主要方法 获取方式 语法 返回值 通过id获取元素 document.getElementById("元素的id名") 返回的是一个元素对象 通过clas

操作元素内容 元素内容指开始标签与结束标签之间的内容，单标签没有元素内容，表单标签除外。 操作闭合标签内容 语法： 操作表单元素内容 操作表单元素用的是表单的value属性。 语法： 点击按钮即可获取

文档对象模型 DOM是document object model，它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口。把文档中的代码翻译成一个对象模型，就是文档对象模型。 浏览器会根