Javascript核心之DOM及其节点类型概述

目录

 

定义

节点层次

文档节点

Node类型

nodeName、nodeType、nodeValue

12种节点类型概述

元素节点（element）

属性节点（attribute）

文本节点（text）

CDATA节点

实体引用类型

实体名称节点

处理指令节点

注释节点

文档节点（document）

文档节点类型（document type）

文档片段节点

DTD声明节点

---

• 定义

DOM（文档对象模型）是针对HTML和XML文档的API（应用程序编程接口），它实现了把文档变成对象的功能。

DOM描绘了一个层次化的节点树，允许添加、移除、修改页面的某部分。

DOM可以做到跨语言跨平台。且符合w3c的标准。

注意：IE中的DOM对象是由COM对象的形式实现的，与原生js的对象不同，所以DOM对象与原生的js对象的行为或活动特点不一致。

使用DOM的基本条件：html或xml的文档是规范的，（有时候不规范，浏览器的解析可以帮助我们在一定程度上将文档自动修改规范）这样DOM才能将内容提取出来，变成对象。

• 节点层次

DOM将HTML或XML文档描绘成节点树，每个节点树上的节点都有自己的类型，例如下图。

节点并不止局限于标签。

DOM解析的顺序是从上到下的，所以，例如js脚本的位置应放在body的最后，还有一些函数的顺序，都与此有关

DOM节点的类型有很多，种类也很多。

节点之间的关系构成了层次，所有页面标记有特定的根节点。

文档节点

在HTML文档中，根节点是文档节点。而这个文档节点只有一个子节点，就是，我们称这个子节点为文档元素。

文档元素是文档的最外层元素，每个文档只有一个文档元素（参照每个HTML文档只有一个标签，就很容易理解啦）。在HTML中，文档元素只能是，但是在XML中，文档元素可以是任何元素。

在DOM中，共有12种节点类型。

Node类型

定义：DOM1中定义了一个Node接口，该接口由DOM中的所有节点类型实现。这个接口在js中的实现方法是Node类。

综上，可以了解到，js中的所有节点类型，都来自与这个Node类，每个js中的节点都共享这个类的基本属性和方法。

共有12种类型，使用NodeType属性来表明节点的类型。

我们可以通过一些方法来判断当前节点是哪种类型。

 if(someNode.nodeType==Node.ELEMENT_NODE){
                    alert("匹配成功，此节点是ElEMENT类型");
                }

注意：这种方法只在除IE的浏览器中适用，使用IE进行文档的解析时，我们是不能访问Node类型的，因为在IE中，所有的DOM对象都是以COM对象实现的。访问的返回值只会是null。

那IE该怎么办呢，可以将NodeType类型与所有的节点类型常量的数字值来比较。

 节点类型在Node类型中定义了12个数值常量表示，先来看看都有哪些类型以及他们的数值吧！

• 元素节点                                                                 Node.ELEMENT_NODE(1)   
• 属性节点                                                                 Node.ATTRIBUTE_NODE(2)
• 文本节点                                                                 Node.TEXT_NODE(3)
• CDATA节点                                                             Node.CDATA_SECTION_NODE(4)
• 实体引用名称节点                                                   Node.ENTITY_REFERENCE_NODE(5)
• 实体名称节点                                                          Node.ENTITY_NODE(6)
• 处理指令节点                                                          Node.PROCESSING_INSTRUCTION_NODE(7)
• 注释节点                                                                 Node.COMMENT_NODE(8)
• 文档节点                                                                 Node.DOCUMENT_NODE(9)
• 文档类型节点                                                          Node.DOCUMENT_TYPE_NODE(10)
• 文档片段节点                                                          Node.DOCUMENT_FRAGMENT_NODE(11)
• DTD声明节点                                                          Node.NOTATION_NODE(12)

针对于每个类型的说明，会在后面详细展开，现在先来解决在IE中判定节点类型的问题。

将NodeType值与数字值直接进行比较即可。

 if(someNode.nodeType==1){//适用于所有浏览器
                    alert("匹配成功，此节点是ElEMENT类型");
                }

此时已经可以判断节点的类型了，判断节点类型是很重要的工作！！！！使用这个方法，也可以用来判断其他的节点类型。

但是，要了解节点的具体信息，就应该了解nodeName和nodeValue属性。

nodeName、nodeType、nodeValue

NodeName中保存的是节点的名称。

NodeType中保存的就是节点类型的常数值。

nodeValue属性返回或设置当前节点的值，格式为字符串。例如id=”test”,这里的nodeValue就是test。

• 12种节点类型概述

• 元素节点（element）

nodeType：值为1。

nodeName：值为元素的标签名称。

nodeValue：null。

注意：标签名称一定是大写的，大小写的区分在一些事件绑定实现一些效果的时候，尤其重要。

console.log(document.body.nodeType,document.body.nodeName,document.body.nodeValue)
     console.log(Node.ELEMENT_NODE === 1);//true
     var d=document.getElementById('myDiv');
     alert(d.tagName); // DIV,HTML中的标签名全部为大写，XML中标签名与源码一致
     alert(d.nodeName==d.tagName); // true
     console.log(d.nodeValue)//null

• 属性节点（attribute）

nodeType：值为2。

nodeName：值为属性名。

nodeValue：属性的值，字符串形式。

注意：属性节点只存在于标签的attributes属性中，并不属于DOM树。

• 文本节点（text）

nodeType：值为3。

nodeName：值为”#text”。

nodeValue：标签的内容值。

• CDATA节点

nodeType：值为4。

nodeName：值为”#cdata-section”。

nodeValue：CDATA区域中的内容。

CDATA_SECTION类型的值只针对基于xml的文档，并在xml文档中表示CDATA区域

• 实体引用类型

nodeType：值为5。

nodeName：值为实体引用的名称。

nodeValue：null。

• 什么是实体引用？

html或xml在使用有特殊意义的符号时，所使用的代码。就是实体。一般格式：&+代码。

在使用html或xml时，当遇到一些有特殊意义的字符，例如”<”,此时解析器会将它当作一个新的标签的开始而不是小于号，此时，就需要用到实体引用，防止解析出错。

实体声明是使用 语法在文档类型定义(DTD)或XML架构中创建的。

其次，在实体声明中定义的名称随后将在 XML 中使用。 在XML中使用时，该名称称为实体引用。

//实体名称

//实体名称引用
Published by &publisher;//Published by Microsoft Press;

• 实体名称节点

在上面的例子中，publisher在定义为实体名称时就是实体名称节点，在后期被引用了，才是引用名称节点。

nodeType：值为6。

nodeName：值为实体的名称。

nodeValue：null。

• 处理指令节点

nodeType：值为7。

nodeName：值为target。

nodeValue：entire content excluding the target。

• 注释节点

nodeType：值为8。

nodeName：#comment。

nodeValue：值为html注释标签的内容。

 

• 文档节点（document）

文档节点表示整个文档，html文档的文档节点为，它指向document对象，也称为根节点，每个文档的文档节点只有一个。

nodeType：值为9。

nodeName：#document。

nodeValue：null。

 

• 文档节点类型（document type）

文档节点类型包含着与文档doctype有关的信息。

nodeType：值为10。

nodeName：doctype的名称。

nodeValue：null。

例如：，它的nodeName是html。

• 文档片段节点

它在文档中并没有对应的标记，在使用时，我们可以在js中先新建一个文档片段，此时就有文档片段了，关于文档片段的详细内容，后期会追加更新，并在这里追加链接~~

nodeType：值为11。

nodeName：值为“#document-fragment”。

nodeValue：null。

• DTD声明节点

DTD声明节点notation代表DTD中声明的符号。

nodeType：值为12。

nodeName：值为符号名称。

nodeValue：null。

 

以上就是本文的所有内容了，有关每个节点类型的详细描述以及Dom中相关函数的内容会在开其它的文章具体叙述~~~

欢迎大家的留言以及错误指正。