在控制台输入 document 回车，跳出来一个 HTMLDocument，展开能看到几百个属性。想改标签页标题、读 cookie、判断页面加载状态，入口都在这。

html document 说的是浏览器为每个页面生成的文档对象，它是 DOM 的根，window.document 和直接写 document 是同一个东西。

天天用得到的几个属性

  • document.title：读写标签页标题，单页应用切路由时改它最方便。
  • document.URL 和 document.domain：当前地址和域名，做埋点时常用。
  • document.cookie：读写 cookie，但 HttpOnly 的读不到，这是服务端设的保护。
  • document.readyState：loading、interactive、complete 三个值，用来判断脚本执行时机。

找元素先 querySelector

document.getElementById 快，但只能按 id 找。日常用 document.querySelector 和 querySelectorAll，CSS 选择器怎么写就怎么传，类名、属性、层级都能选。

动态创建用 document.createElement，插到页面后再绑事件。document.write 只在页面加载阶段有效，加载完再调会把整页覆盖掉，别用。

两个容易踩的坑

iframe 跨域时访问里面的 document 会抛 SecurityError，这是同源策略，不是代码写错。想通信只能用 postMessage。

脚本放在 head 里直接跑，document.body 还是 null。要么把 script 放到 body 末尾，要么监听 DOMContentLoaded。

还有，document 上的查询集合分两种：getElementsByClassName 返回动态集合，querySelectorAll 返回静态 NodeList，循环里删元素要小心，动态集合会边删边变。

结论：把 html document 当成页面总入口就行，改标题、查元素、看加载状态都从它出发，窗口尺寸和滚动位置才去找 window。