一、获取父级元素（parentNode）

一个元素只有一个父级元素

语法格式：
元素.parentNode

//获取元素父级
语法格式：A.parentNode	//一个元素只有一个父级
样例代码：
var div1 = document.getElementByID('div1');
div1.parentNode.style.width = '100px';
div1.parentNode.parentNode.style.width='200px';

二、获取子集元素（Children）

一个元素可以有多个子级元素，因为一个父级元素可能有多个子集元素，当有多个子集元素的时候需要使用数组来进行表示。

语法格式：
父级元素.children[0]

语法格式：A.children[0]	//一个父级元素可以有多个子级元素
var parentDiv = docunment.getElementByID('parentDiv');
parentDiv.children[0].style.width = '200px';
parentDiv.children[1].style.height = '300px';

三、获取子集元素的内容（ChildNodes）

当我们通过children数组来获取子集元素的时候，我们也可以通过childNodes来获取children元素中的文本内容。以带双引号的字符串进行显示。parentDiv.childNodes

A.childNodes[0]	//一个父级元素可以有多个子级元素
var parentDiv = docunment.getElementByID('parentDiv');
parentDiv.childNodes[0]
console.log(parentDiv.childNodes[0]);
ex:
<body><div id="outerDiv">99999<div id="innerDiv">78kkkk5</div></div>
</body>
<script>var outerDiv=document.getElementById('outerDiv');console.log(outerDiv.childNodes[0]);
</script>

显示结果为：
在这里插入图片描述

当我们需要操作子集元素的文本内容的时候，需要使用到data，data本身就有数据的意思。
当我们使用子集.data的时候，会以不带双引号的字符串进行显示。

<body><div id="outerDiv">99999<div id="innerDiv">78kkkk5</div></div>
</body>
<script>var outerDiv=document.getElementById('outerDiv');console.log(outerDiv.childNodes[0].data);
</script>

显示结果为：
在这里插入图片描述
当我们需要通过子集来修改元素的时候，只需要使用子集.data=的形式即可。

<body><div id="outerDiv">99999<div id="innerDiv">78kkkk5</div></div>
</body>
<script>var outerDiv=document.getElementById('outerDiv');console.log(outerDiv.childNodes[0].data);outerDiv.childNodes[0].data=123;
</script>