DOM viewport

Posted 2020-12-16 ssaylo

今天学到了一个新的技巧，用鼠标点击 chrome dev tools 的 Elements 中的标签以后 ，使用 $0 就可以获取到鼠标所点击的 DOM 节点

然后总结一下 Dom Scroll 的 api。

常用的就是这几个。

• $0.scrollBy(30, 30);

• $0.scrollTo(0,100);

• $0.scrollTop;

• $0.scrollLeft;

• $0.scrollHeight

• $0.getClientRects()

  这个可以取出来精确的位置，这里 inline 元素是会产生盒子的，我们可以一个一个的数出来，但是伪元素生成的盒子不会被算到 rects 里面。

  rect：『矩形』

• $0.getBoundingClientReact()

  getBoundingClientReact() 与 getClientRects()的区别主要就是一个是当前包裹的区块的大小、另外一个是针对 windows 的大小。

  做拖拽的时候，就是靠这个 getBoundingClientReact()来计算特定的位置，然后通过 transform 来进行移动。

• window.innerHeight

• window.innerWidth

  视口的尺寸。

• window.outerHeight

• window.outerWidth

  这个基本上用不到，基本上都不用你去计算整个浏览器的高宽的

• window.devicePixelRatio

  物理像素跟实际像素的比值，这个算是重点，要记忆。

• document.documentElement.getBoundingClientReact();

  通过这个也可以获取到innerHeight 与 innerWidth

来段好玩的代码，手写 Object 的 forEach，不过就是复杂的嵌套对象还不支持，要支持的话要写个递归

  Object.prototype.foreach = function (func) {
    Object.keys(this).forEach((key) => {
      func(key, this[key]);
    });
  };
  let obj = { a: 1, b: 2 };
  obj.foreach((key, v) => console.log(v));