文档

@Document

概述 Overview

.代表浏览器加载的WEB页面 - any web page loaded in the browser

.DOM树的入口节点 - entry point into the web page's content, which is the DOM tree.

.示例结构如下

<div id="box" class="wrap container">hi,there.</div>

属性 Properties

.很多属性都是只读 - Read only
Document.activeElement: 返回当前获取焦点/处于聚焦状态的元素 Element

通常是单行输入框 <input>或多行文本输入 <textarea>
Document.documentElement: .返回文档的根元素，即 <html> - the root element of the document
Document.body: .返回 <body>
Document.title: .页面的标题/网站名

.可以获取或修改
Document.fullscreenElement: .当前是否处于全屏模式；非空 null 就是在全屏模式

方法 Methods

Document.createElement()

使用给定的标签创建新元素

Document.append()

尾插节点 - 在文档末尾添加节点对象或字符串

Document.prepend()

头插节点

const body = document.body
const div = document.createElement('div')
div.textContent = 'hi,there.'
body.prepend(div)
body.append('from glpla')

Document.getElementById()

.根据 id 获取一个元素 - returns an Element object

.id 应该唯一；否则只匹配会第一个元素

const dom = document.getElementById('box');

Document.getElementsByClassName()

.根据类名获取元素，返回类数组对象 - an array-like object / HTMLCollection

.多个类名以空格分开，表示同时具备这些类

.动态获取；当 DOM 发生变化时，结果相应的改变 - This is a live HTMLCollection. Changes in the DOM will reflect in the array as the changes occur

. 循环中，谨慎使用

const dom = document.getElementsByClassName('wrap');
const dom = document.getElementsByClassName('wrap container');

Document.getElementsByTagName()

.根据标签名获取元素 - an HTMLCollection of elements with the given tag name

const dom = document.getElementsByTagName('div');

Document.querySelector()

.the first Element node that matches

Document.querySelectorAll()

.a list of all the Element nodes that matche

.这2个方法返回 NodeList()

const dom = document.querySelector('#box');

const dom = document.querySelectorAll('.wrap');

上述获取元素是在整个文档范围内检索 - the entire document；通常配合 Element 一起使用

[] 函数封装 - 将元素获取方法封装为一个函数，简化操作

function fn(el) {
    return document.querySelector(el)
}

Document.exitFullscreen()

.某个元素退出全屏模式

[] 代办事项

事件 Events

.建议以事件侦听器的方式使用

document.addEventListener('eventName', () => {
    console.log('xxx');
})

加载/卸载事件 Load & unload events

DOMContentLoaded

.页面加载完毕，包括DOM解析完毕和脚本文件下载完毕并执行，但是不会等样式文件、图片和其它资源都加载完毕

.window 的 load 事件则是完全加载 - 所有资源都加载完毕

.所以 DOMContentLoaded 事件比 load 事件更早触发

document.addEventListener('DOMContentLoaded', () => {
    console.log('document ready');
})

window.addEventListener('load', () => {
    console.log('window loaded');
})

滚动事件 Scroll events

1. scroll

.页面滚动时触发 - 只有当出现滚动条时，scroll 事件才会触发

.建议使用节流方式 - recommended to throttle the event using requestAnimationFrame(), setTimeout(), or a CustomEvent

.利用 DOM 的 scrollTop 或 window 的 scrollY 进行特别的设计，如调整字体大小、延时出现返回顶部按钮、调整导航条样式等等

.事件会冒泡到浏览器，所以 BOM 也可以响应文档的滚动

.如果某个 Element 出现滚动条，也可以响应自己的滚动事件

2. scrollend

.滚动结束触发

document.addEventListener('scroll', function () {
    console.log('scrolling');
})
document.addEventListener('scrollend', function () {
    console.log('end');
})

[] 返回顶部按钮

.分别利用DOM的 scrollTop 和 window 的 scrollY 查看页面滚动

.页面位于顶端时，返回按钮不出现，且取消事件响应

.当页面滚动到一定位置，如一个窗口内部高度时，返回按钮出现，可以响应事件，点击可以返回顶部

.添加动画，使返回按钮的出现更顺滑

.还可以使用 window的 pageYOffset、innerHeight 属性判断

document.addEventListener('scroll', () => {    
    back2top.classList.toggle('active', scrollY > innerHeight)
})

[] 页面滚动禁止

.移动端弹出菜单时，通常应禁止页面继续滚动；如汉堡菜单#ham点击时，出现顶层菜单，下方的页面不应该再响应事件和滚动

再次单击，顶层菜单消失，下方页面恢复正常；通过汉堡菜单的单击，切换页面的隐藏类

.hidden {
    overflow: hidden;
}

ham.addEventListener('click', function () {
    //... ...
    document.body.classList.toggle('hidden')
})

全屏事件 Fullscreen events

fullscreenchange

.当一个元素进入或退出全屏模式时，会触发 fullscreenchange 事件 - F11全屏模式

.事件首先被发送给正在过渡到全屏模式或从全屏模式退出的元素

.然后冒泡事件到 document，所以 document 可以监听该事件

.单纯的切换全屏模式并不会触发该事件

<div class="wrap">
    <div class="switch-btn">Fullscreen</div>
</div>

const fullScreenElement = document.querySelector('.wrap');
const btn = document.querySelector('.switch-btn');

btn.addEventListener('click', () => {
    if (document.fullscreenElement) {
        document.exitFullscreen();
    } else {
        fullScreenElement.requestFullscreen();
    }
})
document.addEventListener('fullscreenchange', () => {
    if (document.fullscreenElement) {
        console.log("Entered fullscreen mode.");
    } else {
        console.log("Leaving fullscreen mode.");
    }
})

fullscreenerror

.全屏事件异常时触发

剪切板事件 Clipboard events

.针对文档内容的操作

.事件的原始目标是元素 Element，可以在捕获或冒泡阶段响应并处理

copy

cut

paste

[] 阻止页面复制和粘贴

document.addEventListener('copy', (e) => {
    e.preventDefault()
})
document.addEventListener('paste', (e) => {
    e.preventDefault()
})