深入了解parentNode,parentElement,childNodes,children的区别，一看就懂

今天是准备面试的第七天，js是由ECMAScript、文档对象模型（DOM）和浏览器对象模型（BOM）组成，我们今天就了解下与DOM有关的常用接口parentNode,parentElement,childNodes,children。

parentNode，parentElement，childNodes和children都是对节点的操作，因此我们需要对dom树有一定的了解，在文档对象模型中，每一部分都是由节点组成（包括document都是一个节点），节点的类型一共有三种：元素节点，属性节点，文本节点，由上面的图可以看出属性节点是元素节点的一个分支，一般不会考虑。

一、childNodes和children的区别

1、childNodes

返回当前元素子节点的所有类型节点（包括：空格和换行符都会都会被默认成文本节点）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div class="parent"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><script type="text/javascript">var ul = document.querySelector('ul')console.log(ul.childNodes);console.log(ul.childNodes.length);</script></body>
</html>

是不是很奇怪，为什么有这么多文本节点？我们打开看看，这些文本的内容是什么

这说明，该节点下的回车符和空格也会被childNodes当成文本节点，我们尝试着给li元素节点添加属性，我们会发现length的长度还是没有改变，也就是在说childNodes只返回文本节点和元素节点。
有些不怀好意的人会说，我不想要回车空格的文本节点，这应该怎么办呢？
那我们需要知道每个节点都会有nodeType属性

nodeType === 1 该节点为元素节点
nodeType === 2 该节点为属性节点
nodeType === 3 该节点为文本节点

我们就要用这个属性的特点来只获取元素节点

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div class="parent"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><script type="text/javascript">const ul = document.querySelector('ul');const childNodes = ul.childNodes;let temp = 0;let newNodes = [];for(let i = 0; i < childNodes.length; ++i){if(childNodes[i].nodeType === 1){newNodes[temp++] = childNodes[i];}}console.log(newNodes);</script></body>
</html>

这样就得到了我们想要的结果，其实我们还可用children属性，来实现这个功能。

2.children

返回当前元素的子元素节点（不返回文本节点和属性节点）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div class="parent"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><script type="text/javascript">const ul = document.querySelector('ul');            console.log(ul.children);</script></body>
</html>

通过运行我们可以发现，只返回了元素节点，没有返回文本和属性节点

二、区别parentNode和parentElement

parentNode：和英语翻译一样，返回父节点
parentElement：返回父元素
DOM树每一部分都是由节点组成，节点是由元素节点，属性节点，文本节点三部分组成，从这里可以看出节点包含元素节点。从html中又可以知道父节点不可能是文本和属性节点。难道parentNode和parentElement返回的值都是一样的吗？不，不，不，html是根元素，document是一种特殊的节点，当当前节点的父节点是document时，parentNode返回的是#document，而parentElement返回值为空，这就是他们两最大的区别。
我光说可能会有点晕，还是上代码吧

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div class="parent"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><script type="text/javascript">const html = document.querySelector('html');            console.log(html.parentNode);console.log(html.parentElement);</script></body>
</html>

这是我对parentNode,parentElement,childNodes,children四个属性的见解，欢迎大家留言