Dom 中的node与element的区别

先看document 的两个常见的方法

1. document.createTextNode

  .Constructor :Text

2. document.createElement 

   .Constructor :HTML*Elemnt

此处涉及到DOM  API :Text,Node,Element 

 

 

<div id="p">Hello<div id="c">DOM API</div><!--I am a comment--></div>

Node 是一个基类,DOM 中的element ,text,document  都是继承他。

也就是说element ,text ,document 是三种特殊的Node。分别叫做,Element_node,Text_node,Comment_node

实际上node 表示的是DOM树形结构,在html中,节点和节点之间是可以插入文本的,这个插入的空机就是Text_node Comment  是注解。

具体实例如下:

<body>
we can put text here 1...
<h1>China</h1>
we can put text here 2...
<!-- My comment ... -->
we can put text here 3...
<p>China is a popular country with...</p>
we can put text here 4...
<div>
<button>See details</button>
</div>
we can put text here 5 ...
</body>
这下就顺理成章了,body的直系元素(3)+ COMMENT_NODE(1) + TEXT_NODE(5) = 9
原文链接:https://blog.csdn.net/kkkkkxiaofei/article/details/52608394

我们利用childNodes 找到了NodeList ,但我们操作DOM时往往不想操作Node,

其实我们经常使用的getElementsByXXX返回的就是一个ElementList,只不过它的真实名字是ElementCollection。

就像NodeList是Node的集合一样,ElementCollection也是Element的集合。但需要特别注意的是:

NodeList和ElementCollcetion都不是真正的数组

最后我们说一下Document ,document  简称对象模型,他是html 和xml是文档遍程。document 是第一个节点 (childeNodes[0])就是htm ,

 

posted @ 2021-03-12 17:52  dousil  阅读(464)  评论(0编辑  收藏  举报