首页 > 编程语言 >JS节点操作 之 Node和Element的区别

JS节点操作 之 Node和Element的区别

时间:2022-12-19 10:24:01浏览次数:55  
标签:Node 文本 DOM 标签 JS HTML Element

简介

Node对象

DOM的标准规范中提供了Node对象,该对象主要提供了用于解析DOM节点树结构的属性和方法。

Node对象是解析DOM节点树结构的主要入口,Node对象提供的属性和方法,可以实现遍历节点、插入节点等操作。

Element对象

DOM的标准规范中提供了Element对象,该对象提供了HTML页面中所有元素所具有的属性和方法。

DOM标准规范中提供了Node对象,主要是依靠DOM节点树结构访问和更新HTML页面的内容。

而DOM标准规范中提供了Element对象,主要是依靠DOM元素树结构访问和更新HTML页面内容,所有的HTML页面的元素都是HTMLElement对象,而这个对象又是继承于Element对象的。


Node、Element 和 HTMLElement 有什么关系?

image

如图,可以得出结论。

Element继承于Node,HTMLElement又继承于Element。

从而也可以得出一个结论:Element一定是 Node,但 Node 不一定是 Element。

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


单个 Node 的界限在哪里?

  • 单个的 HTML 标签算是一个单独的 Node。

  • 针对非 HTML标签(比如文本、空格、换行等),从一个 HTML 标签开始,到碰到的第一个 HTML 标签为止,如果中间有内容(文本、空格、换行等),那这部分内容算是一个 Node。比如:

    • <div> 1 2 3 <span> 4 5 6 </span> 7 8 9 </div>
      
    • div 是一个 Node;span 是一个 Node;“ 1 2 3 ”、“ 4 5 6 ”和 “ 7 8 9 ”全都是单独的 Node。

拓展与总结

拓展

  • HTML 中的换行只能使用 </br> 标签,\n 会被直接解析成字符串;
  • HTML 代码中,标签与文本之间、标签和标签之间的换行都会被如实记录,反映到获取结果上就是 \n;
  • HTML 代码中,标签与标签、文本与文本、文本与标签之间的空格会被如实记录;

总结

  • document.getElementById() 获取到的结果既是 Node 也是 Element。因为Element继承于Node。
  • Element 一定是 Node,但 Node 不一定是 Element,也可能是文本、空格和换行符。
  • NodeList 里的换行符是因为原始代码中, HTML 标签与标签、内容与标签之间换行而产生的。
  • 单个的 HTML 标签算是一个单独的 Node。
  • 针对非 HTML标签(比如文本、空格等),从一个 HTML 标签开始,到碰到的第一个 HTML 标签为止,如果中间由内容(文本、空格等),那这部分内容算是一个 Node。

本篇随笔参考

标签:Node,文本,DOM,标签,JS,HTML,Element
From: https://www.cnblogs.com/luckest/p/16991550.html

相关文章

  • Intel的Mac,Threejs在Chrome性能下降严重
    参考地址:https://github.com/mrdoob/three.js/issues/23821Threejs在新版中,已经将WebGLRenderer默认使用webgl2。可以使用WebGL1Renderer退回webgl1,性能问题会得到解决。......
  • 原生JS的节点操作 与 JQuey的节点操作 对比
    前言公司要求不使用JQuery,而使用原生JS。作为一个用惯了JQuery的人来说,用原生JS的节点操作无疑是很难用的。这篇随笔,目的是总结对比JQuery与原生JS的各种节点操作的区别......
  • JSON
    作者:david_zhang@sh【转载时请以超链接形式标明文章】https://www.cnblogs.com/david-zhang-index/p/16991324.html序列化:既java对象转json,StringobjJson=JSON.toJSO......
  • 第一百一十五篇: JS集合引用类型Map
    好家伙,本篇为《JS高级程序设计》第六章“集合引用类型”学习笔记 1.MapECMAScript6以前,在JavaScript中实现“键/值”式存储可以使用object来方便高效地完成,也就是使用对......
  • c#处理3种json数据的实例
    原文链接:https://www.jb51.net/article/48027.htm网络中数据传输经常是xml或者json,现在做的一个项目之前调其他系统接口都是返回的xml格式,刚刚遇到一个返回json格式数据的......
  • java命令--jstat 工具使用
    jstat(JVMStatisticsMonitoringTool)是用于监控虚拟机各种运行状态信息的命令行工具。他可以显示本地或远程虚拟机进程中的类装载、内存、垃圾收集、JIT编译等运行数据,在......
  • Js基本数据类型
       ......
  • Js变量
        代码示例:<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title></head><body><script>......
  • wps js 复制wps样式,以及造成的系统崩溃的分析
     今天在学习wpsjs样式设置。按照wpsjs的开发文档。复制样式应该使用的是 Application.OrganizerCopy方法。这个方法的格式是:express.OrganizerCopy(Source, Des......
  • 19、electron log4js写日志
    环境:"devDependencies":{"electron":"^22.0.0"},"dependencies":{"@electron/remote":"^2.0.9","log4js":"^6.7.1"}1、安装:npminst......