- Objective
- Breadcrumb: Node - 实例属性
# 概念阐释
## 语义
每个HTML元素都有父节点和子节点属性。`.parentNode`属性返回DOM层次结构中指定元素的父元素。
- 文档元素`document`是根节点，因此其.parentNode属性将返回`null`。
`.children`属性返回指定元素的子元素数组。
- 如果元素没有任何子元素，则返回`null`。
## 语法
```js
node.parentNode
node.children[index]
```
# 实例
```html
<ul id='groceries'>
<li id='must-have'>Toilet Paper</li>
<li>Apples</li>
<li>Chocolate</li>
<li>Dumplings</li>
</ul>
```
```js
let parentElement = document.getElementById('must-have').parentNode; // 指定子节点id，通过.parentNode访问到<ul>
let childElements = document.getElementById('groceries').children; // 通过父节点id，通过.children访问所有<li>数组
// 两个结果应该是一样的？
```
# 相关内容
# 问题
- [练习题](https://www.codecademy.com/courses/build-interactive-websites/lessons/javascript-dom/exercises/traverse-dom)
1. 首先，创建一个名为`first`的变量，并将其设置为**文档主体的第一个子元素**。然后，将第一个元素的`innerHTML`设置为`'BROWN BEARS ARE AWESOME!'`。花点时间注意哪个元素已被修改。
2. 使用`.parentNode`属性访问变量`first`的父元素，并将其`.style.backgroundColor`修改为`'beige'`。
# 问题答案
```js
//访问子节点
const first = document.body.children[0];
first.innerHTML = 'BROWN BEARS ARE AWESOME!' ;
//访问父节点
first.parentNode.style.backgroundColor = 'beige';
```
另一种写法
```js
let first = document.querySelector('body').children[0];
first.innerHTML = 'BROWN BEARS ARE AWESOME!';
document.querySelector('h1').parentNode.style.backgroundColor = 'beige';
```
`first.parentNode.style.backgroundColor = 'beige';` 之所以可行，我们可以通过换算来验证
`const first = document.body.children[0];` 指的就是`<h1>` 标签，所以`first.parentNode`相当于`document.querySelector('h1').parentNode`
# 参考资料
- [Node.childNodes - MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/childNodes)
- [Node.parentNode - MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/parentNode)