文档库

Appearance

Document ​

Document 表示整个文档，它是 DOM 树的根节点。页面中只有一个 Document 实例

Class ​

ts
EventTarget
  └── Node
      └── Document

DOM 树包含了像body、table 这样的元素，以及大量其他元素。

它向文档本身提供了全局操作功能，能解决如何获取页面的 URL，如何在文档中创建一个新的元素这样的问题。

Constructor ​

在 解析 HTML 文档 的过程中，浏览器创建了 唯一的 Document 实例，并把它挂到 window 上

Event ​

scroll ​

当文档视图滚动后，scroll 事件就会触发。

属性值
BubblesNo
CancelableNo
InterfaceEvent
Event handler propertyonscroll

DOMContentLoaded ​

当DOM树完全生成完毕后，将会触发该事件，无需等待依赖资源的加载。

Properties ​

属性说明
documentElement<html> 元素
head<head>
body<body>
doctype<!DOCTYPE html>
title页面标题
属性说明
childNodes所有子节点（含注释、doctype）
children元素子节点
firstChild第一个子节点
属性说明
visibilityStatevisible / hidden
hidden是否被隐藏
readyStateloading / interactive / complete

documentElement ​

文档的根元素，即html元素

ts
console.log(document.documentElement) // <html>...</html>

Methods ​

createElement ​

ts
const div = document.createElement('div')
div.className = 'box'
div.textContent = 'hello'

querySelector ​

ts
const el = document.querySelector('.box')
  • 支持 任意 CSS 选择器
  • 返回 第一个匹配元素或 null
  • 实际项目最常用

querySeletctorAll ​

ts
const els = document.querySelectorAll('.item')

  • 支持 任意 CSS 选择器

  • 返回 NodeList（静态）,表示所有满足的元素

  • 可直接使用 forEach