window.location.href = 'https://baidu.com' 页面跳转
const page = window.open('https://baidu.com') 新窗口页面跳转
page.close() 关闭新打开的窗口

滚动条

window.pageYOffset 获取滚动条已滚动的距离
window.pageXOffset
window.scrollY 也是获取滚动距离
window.scrollX
window.scroll( x, y ) 设置滚动距离
window.scrollTo( x, y ) 同上，推荐使用这个
window.scrollBy( x, y ) 每次滚动的距离

平滑滚动距离，有兼容性问题

window.scrollTo( {
  left: 0,
  top:  document.body.offsetHeight,
  behavior: 'smooth'
} )

每次滚动一屏实例 :

function rollOnce(){
  window.scrollTo({
    left: 0,
    top: window.scrollY + window.innerHeight,
    behavior: 'smooth'
  })
}

或

window.scrollBy( 0, window.innerHeight )

offset家族

elem.offsetLeft 获取元素到有定位的父级的距离
elem.offsetTop

elem.offsetWidth 获取元素包括padding width border在内的宽度
elem.offsetHeight

client家族

elem.clientLeft 获取元素左边框距离（就是border-left的宽啦）
elem.clientTop
elem.clientWidth 获取元素可见区域的宽 width padding 不包括border
elem.clientHeight

scroll家族

elem.scrollWidth 获取元素能够滚动的宽(真实宽度) width padding 不包括border
elem.scrollHeight

client和scroll区别就是client不包含内容超出的宽高，而scroll包含因为scroll就是真实的宽高

鼠标位置

ev.pageX 鼠标相对于整个页面左上角的位置，包括滚动
ev.clientX 鼠标相对于浏览器窗口左上角的位置，不包括滚动
ev.screenX 相对于显示器屏幕
ev.offsetX 相对于事件对象的定位父级的位置

---

DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

（1）创建新节点

  createDocumentFragment()    //创建一个DOM片段
  createElement()   //创建一个具体的元素
  createTextNode()   //创建一个文本节点

（2）添加、移除、替换、插入

  appendChild()
  removeChild()
  replaceChild()
  insertBefore()

（3）查找

  getElementsByTagName()    //通过标签名称
  getElementsByName()    //通过元素的Name属性的值
  getElementById()    //通过元素Id，唯一性

---

Video DOM操作

（1）video元素.requestFullScreen() 全屏显示

（2）document.webkitExitFullScreen() 退出全屏显示

（3）video元素.onfullscreenchange = function (){} 全屏切换事件

（3）document.fullScreenElement 返回null则非全屏，全屏则返回全屏元素

toggleFullScreen 兼容函数

const _toggleFullScreen = function _toggleFullScreen() {
    if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement) {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else {
            if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else {
                if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
            }
        }
    } else {
        const _element = document.documentElement;
        if (_element.requestFullscreen) {
            _element.requestFullscreen();
        } else {
            if (_element.mozRequestFullScreen) {
                _element.mozRequestFullScreen();
            } else {
                if (_element.webkitRequestFullscreen) {
                    _element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                }
            }
        }
    }
};

safari for mac 尤其例外！！
video元素.webkitSetPresentationMode("fullscreen") 全屏播放
video元素.webkitSetPresentationMode("picture-in-picture") 画中画播放