document 属性document 属性及方法字典，总结常用的document 属性及方法，写原生方法的时候需使用到

本文已参与[新人创造礼]活动，一起开启掘金创作之路。总结常用的document 属性及方法

document 对象相关属性及方法

document.designMode 属性控制当前文档是否可编辑 只有 on off 这两个值(contenteditable 元素是否可以编辑 true false)
document.characterSet 返回当前文档的编码，比如UTF-8、ISO-8859-1等等
document.documentElement 属性返回当前文档的根元素节点（root）一般是<html>节点
document.scrollingElement 返回文档的滚动元素
// 页面滚动到浏览器顶部
document.scrollingElement.scrollTop = 0;
document.activeElement 属性返回获得当前焦点（focus）的 DOM 元素
document.styleSheets 属性返回文档内嵌或引入的样式表集合
document.readyState 属性返回当前文档的状态(loading interactive complete) 每次状态变化都会触发一个readystatechange事件
document.implementation 属性返回一个DOMImplementation对象。该对象有三个方法，主要用于创建独立于当前文档的新的 Document 对象。
1、DOMImplementation.createDocument()：创建一个 XML 文档。
2、DOMImplementation.createHTMLDocument()：创建一个 HTML 文档
3、DOMImplementation.createDocumentType()：创建一个 DocumentType 对象。

Element.clientHeight Element.clientWidth

clientHeight 返回一个整数值，表示元素节点的CSS高度（只对块级元素生效，行内元素0） Element.clientHeight=元素本身高度+padding（-水平滚动条高度） document.documentElement.clientHeight=window.innerHeight 返回当前视口的高度 document.body.clientHeight 网页总高度
一般来说，document.body.clientHeight大于document.documentElement.clientHeight。

Element.clientLeft Element.clientTop

Element.clientLeft 属性等于元素节点的左边框(left border)的宽度,返回整数值块级元素

Element.scrollHeight Element.scrollWidth（只读）

element.scrollHeight 返回一个整数值，表示当前元素的总高度，包括溢出容器、当前不可见的部分，它包括padding（还包括伪元素::before或::after的高度）,但不包括border、margin以及水平滚动条的高度

Element.scrollLeft Element.scrollTop (可读可写)

Element.scrollLeft 表示当前元素的水平滚动条向右侧滚动的像素数量

网页的水平和垂直的滚动距离
docuemnt.documentElement.scrollLeft  
docuemnt.decumentelement.scrollTop

tips:对于没有滚动条的网页元素，这两个属性值为0

Element.offsetParent

Element.offsetParent 属性返回靠近当前元素并且CSS的position属性不等于static的上层元素
tips:若某个元素的所有上层节点的position属性都是static则指向body元素

Element.offsetHeight Element.offsetWidth(只读属性)

Element.offsetHeight 属性返回一个整数，表示元素的CSS垂直高度

Element.offsetWidth=元素本身高度+padding+border+水平滚动条高度（如果存在滚动条）
Element.offsetHeight=Element.clientHeight+border

Element.offsetLeft Element.offsetTop

Element.offsetLeft 返回当前元素左上角相对于Element.offsetParent节点的水平位移

算出元素左上角相对于整张网页的坐标
function getElementPosition(e) {
  var x = 0;
  var y = 0;
  while (e !== null)  {
    x += e.offsetLeft;
    y += e.offsetTop;
    e = e.offsetParent;
  }
  return {x: x, y: y};
}

Element.scrollIntoView()

Element.scrollIntoView 方法滚动当前元素，进入浏览器的可见区域，类似于设置window.location.hash的效果

el.scrollIntoView(); // 等同于el.scrollIntoView(true)
el.scrollIntoView(false);
参数是一个布尔值，true表示元素的顶部与当前区域的可见部分的顶部对齐，false表示元素的底部与当前区域的可见部分的尾部对齐

tips:当前区域可滚动</i

Element.getBoundingClientRect()

Element.getBoundingClientRect 方法返回一个对象（只读），提供当前元素节点的大小、位置等信息

x：元素左上角相对于视口的横坐标 y：元素左上角相对于视口的纵坐标 height：元素高度 width：元素宽度 left：元素左上角相对于视口的横坐标，与x属性相等 right：元素右边界相对于视口的横坐标（等于x + width） top：元素顶部相对于视口的纵坐标，与y属性相等 bottom：元素底部相对于视口的纵坐标（等于y + height）由于元素相对于视口（viewport）的位置，会随着页面滚动变化，因此表示位置的四个属性值，都不是固定不变的。如果想得到绝对位置，可以将left属性加上window.scrollX，top属性加上window.scrollY。

tips:getBoundingClientRect方法的所有属性，都把边框（border属性）算作元素的一部分。也就是说，都是从边框外缘的各个点来计算。因此，width和height包括了元素本身 + padding + border。

Element.getClientRects()

Element.getClientRects 方法返回一个类似数组的对象，里面是当前元素在页面上形成的所有举行，每一个矩形都有bottom、height、left、right、top、width六个属性，表示他们相对于视口的四个坐标，以及本身的高度和宽度

window 对象的位置信息和大小信息

window.screenX window.screenY(只读)

window.screenX和window.screenY属性，返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离（单位像素）

window.devicePixelRatio

window.devicePixelRatio属性返回一个数值，表示一个 CSS 像素的大小与一个物理像素的大小之间的比率。也就是说，它表示一个 CSS 像素由多少个物理像素组成。它可以用于判断用户的显示环境，如果这个比率较大，就表示用户正在使用高清屏幕，因此可以显示较大像素的图片。

window.innerHeight window.innerWidht(只读)（视口的大小）

window.innerHeight和window.innerWidth属性，返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport）的大小（单位像素）
用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小。因为这时网页的像素大小不变（比如宽度还是960像素），只是每个像素占据的屏幕空间变大了，因为可见部分（视口）就变小了。
tips:这两个属性值包括滚动条的高度和宽度。

window.outerHeight window.outerWidth(只读)

window.outerHeight和window.outerWidth属性返回浏览器窗口的高度和宽度，包括浏览器菜单和边框（单位像素）

window.scrollX window.scrollY(只读)

window.scrollX属性返回页面的水平滚动距离，window.scrollY属性返回页面的垂直滚动距离，单位都为像素

window.pageXOffset window.pageYOffset

window.pageXOffset属性和window.pageYOffset属性，是window.scrollX和window.scrollY别名

window.scrollTo() window.scroll() window.scrollBy()

window.scrollTo() window.scroll()是window.scrollTo的别名

window.scrollBy()

window.scrollBy()方法用于将网页滚动指定距离（单位像素）。它接受两个参数：水平向右滚动的像素，垂直向下滚动的像素。

window.scrollBy(0, window.innerHeight) 上面代码用于将网页向下滚动一屏

如果不是要滚动整个文档，而是要滚动某个元素，可以使用下面三个属性和方法。

Element.scrollTop Element.scrollLeft Element.scrollIntoView()
window.scrollTo方法用于将文档滚动到指定位置。它接受两个参数，表示滚动后位于窗口左上角的页面坐标。

window.scrollTo(x-coord, y-coord)

它也可以接受一个配置对象作为参数。

window.scrollTo(options) window.scrollTo({ top: 1000, behavior: 'smooth' });

配置对象options有三个属性。

top：滚动后页面左上角的垂直坐标，即 y 坐标。 left：滚动后页面左上角的水平坐标，即 x 坐标。 behavior：字符串，表示滚动的方式，有三个可能值（smooth、instant、auto），默认值为auto。

重流和重绘

渲染树转换为网页布局，称为“布局流”（flow）；布局显示到页面的这个过程，称为“绘制”（paint）。它们都具有阻塞效应，并且会耗费很多时间和计算资源。

页面生成以后，脚本操作和样式表操作，都会触发“重流”（reflow）和“重绘”（repaint）。用户的互动也会触发重流和重绘，比如设置了鼠标悬停（a:hover）效果、页面滚动、在输入框中输入文本、改变窗口大小等等。下面是一些优化技巧

读取 DOM 或者写入 DOM，尽量写在一起，不要混杂。不要读取一个 DOM 节点，然后立刻写入，接着再读取一个 DOM 节点。缓存 DOM 信息。不要一项一项地改变样式，而是使用 CSS class 一次性改变样式。使用documentFragment操作 DOM 动画使用absolute定位或fixed定位，这样可以减少对其他元素的影响。只在必要时才显示隐藏元素。使用window.requestAnimationFrame()，因为它可以把代码推迟到下一次重流时执行，而不是立即要求页面重流。使用虚拟 DOM（virtual DOM）库。下面是一个window.requestAnimationFrame()对比效果的例子。 // 重绘代价高 function doubleHeight(element) { var currentHeight = element.clientHeight; element.style.height = (currentHeight * 2) + 'px'; } all_my_elements.forEach(doubleHeight); // 重绘代价低 function doubleHeight(element) { var currentHeight = element.clientHeight; window.requestAnimationFrame(function () { element.style.height = (currentHeight * 2) + 'px'; }); } all_my_elements.forEach(doubleHeight); 上面的第一段代码，每读一次 DOM，就写入新的值，会造成不停的重排和重流。第二段代码把所有的写操作，都累积在一起，从而 DOM 代码变动的代价就最小化了。