关于javascript中的元素（element)和节点(node)的区别

      在实际工作，由于开发效率问题，很多人会使用的jquery库来代替原生的javascript来对dom进行

操作，而忽略javascript本身对DOM的。

     这里只讨论javascript中的元素（element)和节点(node)。

     关于childNode属性和children属性的区别·。下面直接上代码

    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <div id="parentDiv">
     <!--注释-->
     <div></div>
 </div>
 <script>
     console.log(document.getElementById('parentDiv').childNodes); //NodeList[5]
     console.log(document.getElementById('parentDiv').children) ;  //HTMLCollection[1]
 </script>
</body>
</html>

 控制台打印的结果：

 

childNodes属性返回的是NodeList数组，是属于节点（也包括元素）的属性，而children属性返回的是子元素，是属于元素的属性。

而在Nodelist数组里面也有元素存在，证明了元素也是节点的一种，即元素节点。

W3C中的解释是：

在 HTML DOM （文档对象模型）中，每个部分都是节点：

  • 文档本身是文档节点
  • 所有 HTML 元素是元素节点
  • 所有 HTML 属性是属性节点
  • HTML 元素内的文本是文本节点 （包括回车符也是属于文本节点）
  • 注释是注释节点

 Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

 NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。

 元素也可以拥有属性。属性是属性节点。

 总结：元素是元素节点，是节点中的一种，但元素节点中可以包含很多的节点。

    

 

posted @ 2017-02-06 21:16  小龙小龙小龙  阅读(8975)  评论(0)  编辑  收藏  举报