nodes和elements,node.element_node

　　节点和元素有什么区别？下面这篇文章介绍节点和元素的区别，希望对你有帮助！

　　node.js速度课程简介：进入学习

　　相信我们很多同学经常会用到节点和元素的概念，那么它们之间有什么区别呢？不知道有多少人能回答这个问题？

　　今天，我在这里试着解释一下节点和元素的区别。

　　【相关推荐：javascript视频教程】

准备工作

　　在正式介绍节点和元素的区别之前，我们先准备一下下面的代码：

　　div id=父级

　　这是父内容。

　　div id=child1 这是child1。/div

　　div id=child2 这是child2。/div

　　/div下面的大部分现象和结论都会用这段代码的结构来说明。

getElementById 获取到的到底是什么？

　　 document . getelementbyid()方法应该是最常用的接口之一，那么它的返回值是节点还是元素呢？

　　让我们用下面的代码来验证一下：

　　let parentEle=document . getelementbyid( parent )；

　　节点的parentEle实例

　　//真

　　元素的parentEle实例

　　//真

　　HTMLElement的parentEle实例

　　//true可以看到document.getElementById()得到的结果既是节点又是元素。

Node、ELement 和 HTMLElement 有什么关系？

　　为什么在上面的代码中使用Node、Element和HTMLElement进行类型判断？他们之间是什么关系？

　　看看代码：

　　let parentEle=document . getelementbyid( parent )；

　　父母。__proto__

　　//html dive element {…}

　　父母。__proto__。__proto__

　　//HTMLElement {…}

　　父母。__proto__。__proto__。__proto__

　　//元素{…}

　　父母。__proto__。__proto__。__proto__。__proto__

　　//节点{…}

　　父母。__proto__。__proto__。__proto__。__proto__。__proto__

　　//EventTarget {…}

　　父母。__proto__。__proto__。__proto__。__proto__。__proto__。__proto__

　　//{构造函数：，…}

　　父母。__proto__。__proto__。__proto__。__proto__。__proto__。__proto__。__proto__

　　//null对于上面的输出结果，我们可以用一个图来更直观的展示它们之间的关系：

　　这就解释了为什么getElementById同时得到节点和元素，因为Element 继承于 Node。

　　我们也可以得出一个结论：Element 一定是 Node，但 Node 不一定是 Element。

　　所以：Element 可以使用 Node 的所有方法。

更直白地观察 Node 和 Element

　　虽然得出了上述结论，节点和元素的关系也很清楚，但这只是一个理论，我们需要更直白的结果来加强对理论的认知。

　　Element.children只获取父节点下的所有div，而Element.childNodes获取父节点下的所有节点(包括文本内容和元素)。

单个 Node 的界限在哪里？

　　从上面例子的NodeList内容来看，换行符\n被当作单个节点，这就引出了一个新的疑问：单个节点的边界在哪里？

　　我们使用的HTML代码从格式中删除，合并成一行，并修改如下：

　　Div id= parent 这是父内容。/div div id= child2 这是child2。/div/div输出结果：

　　NodeList中没有换行符，在上例中是NodeList 里的换行符是因为原始代码中， HTML 标签与标签、内容与标签之间换行而产生的。

　　现在，您可以从两个方面回答单个节点的边界在哪里：

　　单个HTML标记是单个节点；对于非HTML标签(如文本、空格等。)，以HTML标签开始，以遇到的第一个HTML标签结束。如果有内容(文本、空格等。)中间，那么这部分内容就被视为一个节点。注意：这里的HTML标签不区分开始和结束。例如，对于此代码，div 1 2 3 span 4 5 6 /span 7 8 9 /div:

　　Div是一个节点；Span是一个节点；“1 2 3”、“4 5 6”和“7 8 9”都是单独的节点

再进一步

　　。因为上面的例子都使用了块级元素，如果使用了行内元素会怎么样？

　　实验一：

　　div id=parent 这是父内容。/spandiv id=child1 这是child1。/divdiv id=child2 这是child2。/div/div

　　实验二：

　　身体

　　div id=parent 这是父内容。

　　这是一个跨度。/span

　　div id=child1 这是child1。/divdiv id=child2 这是child2。/div

　　/div

　　/body

　　可以看到，即使使用span元素，最终结果也与上面得到的单节点边界结论一致。

扩展

　　从上面这么多例子，我们可以展开总结：

　　HTML中的换行符只能使用/br标记，\ n它将被直接解析为字符串；在HTML代码中，标签和文本之间、标签和标签之间的换行符会被如实记录，这些都会反映在得到的结果中\ n；在HTML代码中，标签与标签、文本与文本、文本与标签之间的空格会被如实记录；node.data内容中\n后的空格字符数与实际代码中格式化空格的配置数有关，实际上是指“空格会被如实记录”。

总结

　　上面的几个例子解释了节点和元素之间的区别。主要结论可归纳如下：

　　document.getElementById()得到的结果既是节点又是元素。元素必须是节点，但节点不一定是元素。也可能是文本、空格和换行符。NodeList中的换行符是由HTML标记和标记之间以及原始代码中的内容和标记之间的换行符引起的。单个HTML标记就是单个节点。对于非HTML标签(如文本、空格等。)，以HTML标签开始，以遇到的第一个HTML标签结束。如果内容(文本、空格等。)在中间，那么这部分内容就视为一个节点。~本文完毕，感谢阅读！

　　(学习视频分享：web前端)以上是讲节点和元素的区别。更多详情请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。