[https://www.runoob.com/jsref/dom-obj-document.html](https://www.runoob.com/jsref/dom-obj-document.html)
[https://www.w3school.com.cn/xmldom/dom\_htmldocument.asp](https://www.w3school.com.cn/xmldom/dom_htmldocument.asp)
[https://developer.mozilla.org/zh-CN/docs/Web/API/Document](https://developer.mozilla.org/zh-CN/docs/Web/API/Document)
有window对象引入，所以它是window的一部分，可通过 window.document 属性对其进行访问
Document **implements** [`ParentNode`](https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode "ParentNode 混合了所有(拥有子元素的) Node 对象包含的共有方法和属性。")、HTMLDocument、XMLDocument
>[danger]document <- HTMLDocument <- HTMLDocumentPrototype <- DocumentPrototype <- NodePrototype <- EventTargetPrototype <- Object
document.body <- HTMLBodyElementPrototype <- HTMLElementPrototype <- ElementPrototype <- NodePrototype <- EventTargetPrototype <- Object
## Document 对象属性和方法
HTML文档中可以使用以下属性和方法:
| 属性 / 方法 | 描述 |
| :-- | :-- |
|**document.**||
| [activeElement](https://www.runoob.com/jsref/prop-document-activeelement.html) | 返回当前获取焦点元素 |
| [addEventListener()](https://www.runoob.com/jsref/met-document-addeventlistener.html) | 向文档添加句柄 |
| [adoptNode(node)](https://www.runoob.com/jsref/met-document-adoptnode.html) | 从另外一个文档返回 adapded 节点到当前文档。 |
| [anchors](https://www.runoob.com/jsref/coll-doc-anchors.html) | 返回对文档中所有 Anchor 对象的引用。 |
|all | 返回所有元素 |
| ~~applets~~ | 返回对文档中所有 Applet 对象的引用。**注意:** HTML5 已不支持 元素。|
| [baseURI](https://www.runoob.com/jsref/prop-doc-baseuri.html) | 返回文档的绝对基础 URI |
| [**body**](https://www.runoob.com/jsref/prop-doc-body.html) | 返回文档的body元素 |
| [close()](https://www.runoob.com/jsref/met-doc-close.html) | 关闭用 document.open() 方法打开的输出流，并显示选定的数据。 |
| [cookie](https://www.runoob.com/jsref/prop-doc-cookie.html) | 设置或返回与当前文档有关的所有 cookie。 |
| [**createAttribute**()](https://www.runoob.com/jsref/met-document-createattribute.html) | 创建一个属性节点 |
| [**createComment**()](https://www.runoob.com/jsref/met-document-createcomment.html) | createComment() 方法可创建注释节点。 |
| [**createDocumentFragment**()](https://www.runoob.com/jsref/met-document-createdocumentfragment.html) | 创建空的 DocumentFragment 对象，并返回此对象。 |
| [**createElement**()](https://www.runoob.com/jsref/met-document-createelement.html) | 创建元素节点。 |
| [**createTextNode**()](https://www.runoob.com/jsref/met-document-createtextnode.html) | 创建文本节点。 |
| [doctype](https://www.runoob.com/jsref/prop-document-doctype.html) | 返回与文档相关的文档类型声明 (DTD)。 |
| [**documentElement**](https://www.runoob.com/jsref/prop-document-documentelement.html) | 返回文档的根节点html |
| [documentMode](https://www.runoob.com/jsref/prop-doc-documentmode.html) | 返回用于通过浏览器渲染文档的模式 |
| [documentURI](https://www.runoob.com/jsref/prop-document-documenturi.html) | 设置或返回文档的位置 |
| [domain](https://www.runoob.com/jsref/prop-doc-domain.html) | 返回当前文档的域名。 |
| domConfig | **已废弃**。返回 normalizeDocument() 被调用时所使用的配置。 |
| [embeds](https://www.runoob.com/jsref/coll-doc-embeds.html) | 返回文档中所有嵌入的内容（embed）集合 |
| [forms](https://www.runoob.com/jsref/coll-doc-forms.html) | 返回对文档中所有 Form 对象引用。 |
| [getElementsByClassName()](https://www.runoob.com/jsref/met-document-getelementsbyclassname.html) | 返回文档中所有指定类名的元素集合，作为 NodeList 对象。 |
| [getElementById()](https://www.runoob.com/jsref/met-document-getelementbyid.html) | 返回对拥有指定 id 的第一个对象的引用。 |
| [getElementsByName()](https://www.runoob.com/jsref/met-doc-getelementsbyname.html) | 返回带有指定名称的对象集合。 |
| [getElementsByTagName()](https://www.runoob.com/jsref/met-document-getelementsbytagname.html) | 返回带有指定标签名的对象集合。 |
| [images](https://www.runoob.com/jsref/coll-doc-images.html) | 返回对文档中所有 Image 对象引用。 |
| [implementation](https://www.runoob.com/jsref/prop-document-implementation.html) | 返回处理该文档的 DOMImplementation 对象。 |
| [importNode()](https://www.runoob.com/jsref/met-document-importnode.html) | 把一个节点从另一个文档复制到该文档以便应用。 |
| [inputEncoding](https://www.runoob.com/jsref/prop-document-inputencoding.html) | 返回用于文档的编码方式（在解析时）。 |
| [lastModified](https://www.runoob.com/jsref/prop-doc-lastmodified.html) | 返回文档被最后修改的日期和时间。 |
| [links](https://www.runoob.com/jsref/coll-doc-links.html) | 返回对文档中所有 Area 和 Link 对象引用。 |
| [normalize()](https://www.runoob.com/jsref/met-document-normalize.html) | 删除空文本节点，并连接相邻节点 |
| [normalizeDocument()](https://www.runoob.com/jsref/met-document-normalizedocument.html) | 删除空文本节点，并连接相邻节点的 |
| [open()](https://www.runoob.com/jsref/met-doc-open.html) | 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。 |
| [**querySelector**()](https://www.runoob.com/jsref/met-document-queryselector.html) | 返回文档中匹配指定的CSS选择器的第一元素 |
| [**querySelectorAll**()](https://www.runoob.com/jsref/met-document-queryselectorall.html) | document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表 |
| [readyState](https://www.runoob.com/jsref/prop-doc-readystate.html) | 返回文档状态 (载入中……) |
| [referrer](https://www.runoob.com/jsref/prop-doc-referrer.html) | 返回载入当前文档的文档的 URL。 |
| [removeEventListener()](https://www.runoob.com/jsref/met-document-removeeventlistener.html) | 移除文档中的事件句柄(由 addEventListener() 方法添加) |
| [renameNode()](https://www.runoob.com/jsref/met-document-renamenode.html) | 重命名元素或者属性节点。 |
| [scripts](https://www.runoob.com/jsref/coll-doc-scripts.html) | 返回页面中所有脚本的集合。 |
| [strictErrorChecking](https://www.runoob.com/jsref/prop-document-stricterrorchecking.html) | 设置或返回是否强制进行错误检查。 |
| [title](https://www.runoob.com/jsref/prop-doc-title.html) | 返回当前文档的标题。 |
| [URL](https://www.runoob.com/jsref/prop-doc-url.html) | 返回文档完整的URL |
| [write()](https://www.runoob.com/jsref/met-doc-write.html) | 向文档写 HTML 表达式 或 JavaScript 代码。 |
| [writeln()](https://www.runoob.com/jsref/met-doc-writeln.html) | 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。 |
|[`characterSet`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/characterSet)|返回文档正在使用的字符集|
|[`compatMode`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/compatMode)|指示文档是否以*quirks*怪异模式或*strict*严格模式呈现|
|[`contentType`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/contentType)|根据当前文档的 MIME Header，返回它的 Content-Type|
|[`fonts`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/fonts)|返回当前文档的[`FontFaceSet`](https://developer.mozilla.org/zh-CN/docs/Web/API/FontFaceSet)接口|
|[`head`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/head)|返回当前文档的 \<head\> 元素|
|[`hidden`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/hidden)|返回一个布尔值，表明当前页面是否隐藏|
|[`lastStyleSheetSet`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/lastStyleSheetSet)|返回最后启用样式表的名字。在设置selectedStyleSheetSet 前值都为 null|
|[`plugins`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/plugins)|返回一个可用插件列表。|
|[`preferredStyleSheetSet`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/preferredStyleSheetSet)|返回由页面作者指定的首选样式表集|
|[`scripts`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/scripts)|返回文档中所有的 \<script\> 元素|
|[`scrollingElement`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/scrollingElement)|返回对文档 Element 元素的引用|
|[`selectedStyleSheetSet`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/selectedStyleSheetSet)|返回当前正使用的样式表集。|
|[`styleSheetSets`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/styleSheetSets)|返回文档上可用样式表的列表|
|[`timeline`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/timeline)|返回 [`DocumentTimeline`](https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentTimeline)的一个实例，该实例是在页面加载时自动创建的|
|[`visibilityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/visibilityState)|返回 `string` 表明当前文档的可见性。可能的取值有 `visible`,`hidden`,`prerender`, and`unloaded 。`|
>[danger]注意Document是继承与DOM节点对象的，而Document又是所有HTML文档的根节点，很多属性和方法在文档中是没有意义的列出如下
**HTML 文档对象可以避免使用这些节点对象和属性：**
| 属性 / 方法 | 避免的原因 |
| :-- | :-- |
| document.attributes | 文档没有该属性 |
| document.hasAttributes() | 文档没有该属性 |
| document.nextSibling | 文档没有下一节点 |
| document.nodeName | 这个通常是 #document |
| document.nodeType | 这个通常是 9(DOCUMENT\_NODE) |
| document.nodeValue | 文档没有一个节点值 |
| document.ownerDocument | 文档没有主文档 |
| document.ownerElement | 文档没有自己的节点 |
| document.parentNode | 文档没有父节点 |
| document.previousSibling | 文档没有兄弟节点 |
| document.textContent | 文档没有文本节点 |
**JS获取DOM元素的方法（8种）**
* 通过ID获取（getElementById）
* 通过name属性（getElementsByName）
* 通过标签名（getElementsByTagName）
* 通过类名（getElementsByClassName）【IE9+】
* 通过选择器获取一个元素（querySelector）【IE8+】
* 通过选择器获取一组元素（querySelectorAll）【IE8+】
* 获取html标签（document.documentElement）
* 获取body标签（document.body）
**获取元素对象**
```
document.getElementById("myBtn")
var y=x.getElementsByTagName("p");
var x=document.getElementsByClassName("intro");
document.getElementsByName("name属性值");
document.querySelector('.animated')
```
**获取元素的子节点**
```
/* 获取元素节点 */
var e=document.getElementById("list");
/* 获取该元素的子节点 */
var c=e.getElementsByTagName("li");
var c1=e.childNodes;
//返回包含标签属性及文本节点，标签与标签之间的空格与换行也会被当作文本节点（IE8及以下除外）
var c2 =e.children;//获取所有子标签
var c3=e.firstElementChild;//获取当前元素第一个子标签[IE9+]
var c4=e.firstChild;//等于c1[0]
var c5=e.lastChild;
console.log(e);
console.log(c);
console.log(c1);
console.log(c2);
console.log(c3);
console.log(c4);
更多参考节点对象
```
**offsetParent**:
获取当前元素的开启了position定位的最近祖先元素，如果祖先元素没有设置定位，那么返回的是body
```
<div id="box1">
<div id="box2" style="position: relative;">
<div id="box3">
<div id="box4"></div>
</div>
</div>
</div>
<script type="text/javascript">
var box4=document.getElementById("box4");
var box=box4.offsetParent;
console.log(box);//返回box2节点对象
</script>
```
**创建元素：**
```
document.createElement("div")
```
## 改变 HTML 内容
```
document.getElementById("p1").innerHTML="新文本!";
```
## 改变 HTML 属性
```
document.getElementById("image").src="landscape.jpg";
```
## 改变 HTML 样式
```
document.getElementById(*id*).style.*property*\=*新样式*
例子：
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
```
- CSS
- 达到指定宽度加载css
- 选择器
- CSS 函数
- @media媒体查询
- 字体
- 图标字体
- 文本
- 光标样式cursor
- 盒子模型
- 溢出（overflow）
- 边框
- 不透明度opacity
- 背景(background)与渐变xx-gradient
- 轮廓（outline）与 阴影(box-shadow)
- 过渡属性（Transition）
- 动画属性（Animation）
- transform变形效果旋转，缩放，移动，倾斜等
- 显示、隐藏与禁用
- box-sizing与resize
- 居中对齐
- css水平居中
- css垂直居中
- 文字与相邻的元素垂直对齐
- 布局
- 高度塌陷和外边距重叠最终解决方案
- 解决float布局时高度塌陷的最终方案after伪类元素
- 子/父元素外边距重叠最终解决方案before伪类元素
- 传统布局
- position布局
- position水平居中
- position垂直居中
- position水平垂直居中
- 浮动布局
- 高度塌陷和BFC
- clear
- BFC概念及触发条件
- 表格布局
- 盒子模型布局
- 盒子水平居中布局（如margin:0 auto）
- 盒子垂直居中布局
- 相邻元素外边距重叠
- 行内元素的盒子模型
- 弹性伸缩布局flex
- 旧版本（IE不支持）
- 混合过渡版（仅IE10+生效）
- flex布局（新版）
- 多列布局columns
- grid网格布局（实验性）
- 应用与总结
- 瀑布流布局
- 流式布局(响应式布局又叫百分比布局移动端一般采用)
- 用户不能鼠标左键选择文本
- 表格
- 表单
- radio
- textarea
- select
- a连接
- ul>li有序列表与ol>li无序列表
- 伪元素
- 容器宽高100%
- 浏览器四大内核及前缀
- 移动端开发
- 长度单位与移动端
- css_移动端开发
- rem具体解决方案
- vw具体解决方案
- 兼容性问题
- 浏览器默认样式
- css预处理器
- less
- sass
- stylus
- HTML
- 标签元素
- head的子标签
- 文档元素
- 文本元素
- 嵌入元素
- 分组元素
- 表格元素
- 表单元素
- input
- 标签元素的属性
- 全局属性
- aria-*
- 事件on*
- data-*
- id
- class
- hidden
- style
- title
- draggable
- dropzone(实验性)
- dir
- autocapitalize
- contenteditable
- lang
- inputmode
- accesskey
- contextmenu（移除）
- exportparts(实验性)
- is
- itemid
- itemprop
- itemref
- itemscope
- itemtype
- XHTML遗留xml:lang和xml:base
- part（实验性）
- slot
- spellcheck（实验性）
- tabindex
- translate
- HTML字符实体
- 行内元素
- iframe和父页面相互传值,并兼容跨域问题
- a标签嵌套解决方案
- JS
- 获取宽度（offsetParent、clientWidth、clientHeight、offsetWidth、offsetheight、scrollWidth、scrollHeight、offsetTop、offsetLeft、scrollTop、scrollLeft）
- demo
- 全选和反选
- 定时器：
- 哪些HTML元素可以获得焦点？
- 事件例子
- 鼠标事件
- 注册条款
- 获取鼠标坐标
- div跟随鼠标移动
- 拖拽01
- 鼠标滚动事件
- 键盘事件
- 检查标签是否含有某个类
- 轮播图
- 数组的 交集 差集 补集 并集
- 精确计算插件
- 摇奖机
- 移动端跳转
- 基础
- js的数据类型
- 基本类型声明
- 引用类型声明及用法
- 数组
- 函数
- 对象及函数原型对象
- 继承
- js的垃圾回收机制
- javascript扩展自定义方法
- 类型转换
- 作用域（执行上下文）及递归调用
- javascript事件
- 连续调用
- 排序
- 内存溢出与内存泄漏
- 系统对象
- 内置对象
- 值属性
- Infinity
- NaN
- undefined
- globalThis
- Function 属性
- eval()
- isFinite()
- isNaN()
- parseFloat()
- parseInt()
- decodeURI()
- decodeURIComponent()
- encodeURI()
- encodeURIComponent()
- 基本对象（Object，Function，Boolean，Symbol）
- Object
- defineProperty()
- Function
- Boolean
- Symbol
- 数字和日期对象
- Number
- Date
- BigInt
- Math
- 控制抽象化
- AsyncFunction
- Generator
- GeneratorFunction
- Promise
- Web组装
- WebAssembly
- 结构化数据（JSON等）
- ArrayBuffer
- Atomics
- DataView
- JSON
- SharedArrayBuffer
- 使用键的集合对象
- Map
- Set
- WeakMap
- WeakSet
- 反射
- Reflect
- Proxy
- 可索引的集合对象(数组在这)
- Array数组
- BigInt64Array
- BigUint64Array
- Float32Array
- Float64Array
- Int16Array
- Int32Array
- Int8Array
- Uint8ClampedArray
- Uint8Array
- Uint16Array
- Uint32Array
- 国际化
- Intl
- Intl.Collator
- 文本处理(字符串与正则)
- RegExp
- String
- 错误对象
- Error
- InternalError
- AggregateError 实验性
- EvalError
- RangeError
- ReferenceError
- SyntaxError
- URIError
- TypeError
- null
- TypedArray
- escape()移除但还兼容
- unescape()移除但还生效
- uneval()非标准
- arguments
- 宿主对象（DOM与Browser）
- Browser浏览器对象（BOM）
- Window 对象
- History 对象
- Location 对象
- Navigator 对象
- Screen 对象
- 存储对象(localStorage与sessionStorage)
- DOM 节点对象
- EventTarget
- Node节点对象
- Document文档节点
- HTMLDocument(HTML对象 )
- HTML 元素接口
- Element元素节点
- Attr属性对象（与NamedNodeMap ）
- DocumentType
- DocumentFragment文档片段节点
- CharacterData
- Comment
- Text
- CDATASection
- 事件对象Event
- on-event处理器
- CustomEvent
- MouseEvent
- DragEvent
- 手势（TouchEvent触摸事件）
- 其他类型事件对象...
- CSSStyleDeclaration 对象
- HTMLCollection
- console对象
- MutationObserver
- 其他重要的对象（FormData与原生Ajax）
- FormData表单对象
- ajax XMLHttpRequest
- 表达式和运算符
- 算术运算符
- 赋值运算符
- 按位操作符
- 逗号操作符
- 比较操作符
- 条件运算符
- 解构赋值
- 函数表达式
- 圆括号运算符
- 逻辑运算符
- Nullish 合并操作符
- 对象初始化
- 运算符优先级
- 可选链
- 管道操作符 实验性
- 属性访问器
- 展开语法
- 异步函数表达式
- await
- 类表达式
- delete 操作符
- function* 表达式
- in
- instanceof
- new 运算符
- new.target
- super
- this
- typeof
- void 运算符
- yield
- yield*
- 语句和声明
- export
- default
- 控制流
- block
- break
- continue
- empty
- if...else
- switch
- throw
- try...catch
- 声明
- const
- let
- var 描述
- 函数和类
- async function
- class
- function
- function*
- return
- 迭代
- do...while
- for
- for await...of
- for...in
- for...of
- while
- 其他
- debugger
- label
- with 移除但生效
- import
- import.meta
- 函数
- 箭头函数
- 默认参数值
- 方法的定义
- 剩余参数
- Arguments 对象
- getter
- setter
- 类
- 类私有域
- 类元素
- 构造方法
- extends
- static
- Errors
- 更多
- 已废弃的特性
- JavaScript 数据结构
- 词法文法
- 属性的可枚举性和所有权
- 迭代协议
- 严格模式
- 切换到严格模式
- 模板字符串
- ES6(ES2015)
- Es6函数写法
- 类class
- 导入导出模块
- 兼容ES5
- 变量声明
- Symbol新数据类型
- 迭代器（自定义遍历数组）
- 生成器
- Promise异步编程
- set(集合)
- Map
- 数组新增4个方法
- 手机端事件
- bootstrap手册
- 代码压缩打包
- Webpack
- 五个核心概念
- 开始
- loader
- 插件
- webpack开发环境配置
- 打包含css文件的项目
- 打包html资源
- 打包图片资源
- 打包其他文件
- devServer（实时自动化打包）
- 总结：开发环境配置
- webpack生产环境配置
- 提取css成单独文件
- css兼容性处理
- 压缩css
- js语法检查
- js兼容性处理
- js压缩
- html压缩
- 总结：生产环境配置
- webpack优化环境配置
- HMR( 模块热替换)
- source-map
- oneOf
- 缓存
- tree shaking
- code split
- demo1
- demo2
- demo3
- lazy loading
- pwa
- 多进程打包
- externals
- dll
- webpack配置详解
- entry
- output
- module
- resolve
- dev server
- optimization
- vite
- 技能
- 前端学习路线
- 调试
- 多个版本IE浏览器（调试用）
- 手机端调试
- vueJS
- Element UI（一个vuejs组件）
- 浏览器插件开发
- 插件推荐
- 扩展文件manifest.json
- 不可视的background(常驻)页面
- 可视页面browser actions与page actions及八种展示方式
- 使用chrome.xxx API
- Google Chrome扩展与Web页面/服务器之间的交互
- Google Chrome扩展中的页面之间的数据通信
- inject-script
- chromeAPI
- pageAction
- alarms
- chrome.tabs
- chrome.runtime
- chrome.webRequest
- chrome.window
- chrome.storage
- chrome.contextMenus
- chrome.devtools
- chrome.extension
- 分类
- homepage_url 开发者或者插件主页
- 5种类型的JS对比及消息通信
- 其它补充
- 谷歌浏览器截屏
- 框架及工具
- 前端UI设计网站
- 网页中使用Unicode字符