元素位置

• offsetParent

获取某个元素第一个定位的祖先元素，如果没有，则得到body

body的offsetParent为null

• offsetLeft、offsetTop

相对于该元素的offsetParent的坐标

如果offsetParent是body，则将其当作是整个网页

/* 获取元素距离整个页面的距离 */
function getPagePosition(dom) {
  let left = dom.offsetLeft;
  let top = dom.offsetTop;
  const parent = dom.offsetParent;

  //循环一直找到body body的offsetParent是null
  while (parent) {
    left += parent.offsetLeft;
    top += parent.offsetTop;
    parent = parent.offsetParent;
  }

  return { x: left, y: top };
}

• getBoundingClientRect方法

该方法得到一个对象，该对象记录了该元素相对于视口的距离 left:视口左边缘到元素左边框的距离 right:视口左边缘到元素右边框的距离 top和bottom同理

// 元素的滚动吸附效果
var div = document.querySelector(".container");
var scrollTop = 0; //滚动的距离

window.onscroll = function () {
  var rect = div.getBoundingClientRect();
  if (rect.top < 0) {
    div.style.position = "fixed";
    div.style.top = 0;
    div.style.left = rect.left + "px";
    div.style.width = rect.width + "px";
    div.style.height = rect.height + "px";
    div.style.boxSizing = "border-box";
    //记录滚动条的位置
    scrollTop = window.scrollY + rect.top;
  }
  if (window.scrollY < scrollTop) {
    div.setAttribute("style", "");
  }
};

事件模拟

• click()
• sumbit()
• dispatchEvent()

dom.click(); //元素模拟
formDom.submit(); //表单数据提交

// 模拟鼠标进入事件
btn1.onmouseenter = function () {
  this.style.background = "red";
  this.style.color = "#fff";
};
//当点击btn3的时候，能模拟btn1进入的事件
btn3.onclick = function () {
  var event = new MouseEvent("mouseenter", {
    bubbles: false,
  });
  btn1.dispatchEvent(event);
};

其他补充

• window.scrollX、window.pageXOffset、window.scrollY、window.pageYOffset

window.scrollX、window.pageXOffset: 相当于根元素的scrollLeft

window.scrollY、window.pageYOffset: 相当于根元素的scrollTop

• scrollTo、scrollBy

scrollTo: 设置滚动条位置

• resizeTo、resizeBy