今天是准备面试的第七天,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四个属性的见解,欢迎大家留言