门户网站制作服务,保健品网站模版,ui设计师个人网站建设,wordpress 分类列表在JavaScript中#xff0c;document这个对象大家一定很熟悉#xff0c;哪怕是刚刚开始学习的新人#xff0c;也会很快接触到这个对象。而document对象不仅仅是一个普通的JavaScript内置对象#xff0c;它还是一个巨大API的核心对象#xff0c;这个巨大的API就是DOM#x… 在JavaScript中document这个对象大家一定很熟悉哪怕是刚刚开始学习的新人也会很快接触到这个对象。而document对象不仅仅是一个普通的JavaScript内置对象它还是一个巨大API的核心对象这个巨大的API就是DOMDocument Object Model它将文档的内容呈现在JS面前并赋予了JS操作文档的能力。 在这里不得不提的概念则是DOM树DOM树体现着HTML页面的层级结构学习中经常提到的父元素子元素的说法也是建立在树这种数据结构的基础之上的。而DOM树有DOM文档树和DOM元素树两种上图就是一颗DOM元素树它只包含元素节点而DOM文档树则包含文档中所有内容。 一颗DOM元素树 一篇HTML文档及其DOM文档树。 HTML页面中的所有内容都会体现在DOM文档树中要理解这种结构对构成它的每个节点就要先有了解。下面是DOM节点的基本类别以及各自类别基本属性的值及简单介绍 节点类型nodeTypenodeNamenodeValue元素节点1标签名大写null属性节点2属性名属性值文本节点3#text文本内容CDTAT节点4#cdata-sectionCDATA区域的内容实体引用名称节点5引用名称null实体名称节点6实体名称null处理指令节点7targetentire content cluding the target注释节点8#comment注释内容文档节点9#documentnull文档类型节点10doctype的名称null文档片段节点11#document-fragmentnullDTD声明节点12符号名称 null 注1、在以上的节点分类中nodeType为4、5、6、7、12的四种节点是针对XML文档而言的在HTML中并未出现在这里就不详细介绍了。 2、在以下演示中默认已经定义了此方法 一、元素节点 每一个HTML标签都是一个元素节点 运行及结果 二、属性节点 元素的属性在DOM中以属性节点来表示。 运行及结果 这里需要特殊说明下一般获取属性节点都会直接想到使用DOM中的getAttribute方法或者直接根据属性名用‘.’去访问然而在操作过程中JavaScript会直接将获得的值转换成字符串而不是以属性节点的方式呈现就无法访问它的nodeType等属性了如下 关于属性节点还有一个重点属性节点不是HTML DOM树中的一部分 如下 没有办法通过DOM遍历方法获取属性节点只能通过attributes属性、getAttributes方法以及‘.’来访问属性节点。 三、文本节点 直观理解文本节点即是指向文本的节点~ 运行及结果 以上三种节点是在日常使用中最常见的三种节点了另外几种节点使用并不多 四、注释节点 别以为代码注释是只能在开发环境中看到的~在浏览器内HTML文档中同样包含着注释节点我们可以对其进行各种DOM操作只不过注释节点不会渲染在页面中而已。 运行及结果 五、文档节点 文档节点表示整个文档也是DOM文档树的根节点。 六、文档类型节点 运行及结果 七、文档片段节点 文档片段节点是我在写本篇博客的时候还几乎一无所知的一种节点在这里学习了这篇博客深入理解DOM节点类型第四篇——文档片段节点DocumentFragment 以下是现学现卖 DocumentFragment文档片段节点是唯一在HTML文档中没有对应标记的节点也就是说它不会在我们编写HTML代码的时候出现在我们的视野中。文档片段是一种轻量级的文档可以包含很多DOM节点。在前端操作中常常需要对文档树中的DOM节点做各种各样的操作这个时候对应的操作就会造成页面重绘。如果DOM操作非常多的话就会不断地进行页面重绘带来沉重的浏览器负担拖慢运行速度。 如果将节点加入文档片段之中这些节点就会脱离文档树这个时候进行DOM操作的话就不会造成页面重绘。等大量DOM操作都执行完成之后再将文档片段添加到页面中这时完成操作的节点会一次性渲染完毕避免了多次渲染带来的性能拖慢。 要使用文档片段JavaScript提供了document.createDocumentFragment()方法。关于文档片段的具体使用和性能提升会在另外的博文中另行研究这里看一下文档片段节点的信息 八、DTD声明节点 DTD为Document Type Definition为文档类型定义。实际上DTD节点也是主要针对XML文档而言的在HTML中也不直接含有DTD声明节点只有包含着DTD声明的文档类型节点10。 我们都知道HTML有HTML4.01XHTML等等每种版本的标记语言中还有三种细分的定义Strict严格、Transitional过渡、Frameset框架集。如果没写DTD浏览器就不知道正在处理的文档是用哪种标记语言来写的就造成了解析结果的不同最常见的错误就是用XHTML较为严格的规范来解析以HTML这种宽松标准所构建的文本自然会出现很多问题。w3c给出的解释是由于HTML4.01基于SGMLDTD规定了标记语言的规则故需要在HTML声明中引用DTD。在如今的HTML5时代由于HTML5不基于SGML故我们也不再需要在文档声明中包含DTD信息使用!DOCTYPE HTML即可。 以上就是HTML DOM节点的分类以及简单介绍了关于节点的各种属性以及方法请点击 转载于:https://www.cnblogs.com/zhuwq585/p/6075119.html
