- Objective:
- Breadcrumb:
# 概念阐释
## 语义
在JavaScript访问[[JavaScript HTML DOM API]]内的其它节点前，必须先访问`document` 根节点。
`document.body`的位置：WebAPI - DOM API - Document - document.body属性
`body`和`head`是可以直接方位的特殊标签。
## 语法
如果要访问元素节点，首先要访问`Document`
```js
document.body
document.head
```
document作为节点表示可以访问DOM上的任何地方来[[js Events 事件 触发事件的类型|触发事件]]：
```js
document.addEventListener('style',func);
```
# 实例
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>week 12</h1>
<ol>
<ul>chelsea</ul>
<ul>liverpool</ul>
</ol>
<script src="script.js"></script>
</body>
</html>
```
## 访问第一个子元素
```js
// h1将变成week13
let heading = document.body.firstElementChild;
heading.innerHTML = "week 13";
```
## 访问临近的兄弟元素
```js
//ol将变成 list deleted
let heading = document.body.firstElementChild;
heading.siblingElement.innerHTML = "list deleted";
```
## 子节点作为数组
```js
//访问body下的第一个子节点h1
document.body.children[0];
```
# 相关内容
# 参考资料
- [Document-MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Document)