Javascript中Node和Element区别

作者:frank 发表日期:2016-04-07 21:22:36 更新日期:2016-08-15 20:12:36 分类:猿文色

摘要

Javascript中Node和Element区别

正文

Node是HTML文档中所有内容的父类,包括元素Element,注释Comment,文本Text等等。Element是Node的子类。

通过代码来测试一下:

<!DOCTYPE html>
<html>
<head>
    <title>Node & ELlement</title>
    <meta charset="utf-8">
</head>
<body>
    <!-- This is Comment Note -->
    <div>Element Node</div>
    Text Node
</body>
</html>

在控制台中执行下述代码:

> document.body.childNodes //获取所有的Node节点
> [#text, <!-- This is Comment Note -->, #text, <div>Element Node</div>, "Text Node"]

可以看到,结果中除了预见中的div元素节点,还有注释和文本节点,甚至还有两个#text字段,点击详情可以看到其实#text也是文本节点,只是内容是回车。

再看下述代码:

> document.body.children //获取所有的Element节点
> [<div>Element Node</div>]

可以看到,结果只用div元素节点。

具体来说,Node只是Element的一个父元素。Element继承了Node的属性和方法,又加入了自己的属性和方法。

参考:NodeElement