你的位置:首页 > Java教程

[Java教程]DOM节点类型


DOM定义

  DOM(文档对象模型)脱胎于Netscape及微软创始的DHTML(动态HTML),是针对HTML和

 

节点树定义

  DOM可以将任何HTML或

  【根节点及文档元素】

  文档节点是每个文档的根节点,<html>元素是文档节点的子节点,被称之为文档元素。文档元素是文档的最外层元素,每个文档只能有一个文档元素。在HTML页面中,文档元素始终是<html>元素。在

 

节点类型

  DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现。这个Node接口在JavaScript中是作为Node类型实现的,而在IE8-浏览器中的所有DOM对象都是以COM对象的形式实现的。

  [注意]IE8-不支持访问到DOM中的NODE类型,但支持数字值写法

//在IE8-返回undefinedconsole.log(Node.ELEMENT_NODE)//在所有浏览器中都返回true<div id="box"></div><script>var oBox = document.getElementById('box');console.log(oBox.nodeType == 1)</script>

  

  【12种节点类型】每个节点都有一个NodeType属性,用于表明节点的类型。节点类型在Node类型中定义下列12个数值常量来表示。

Node.ELEMENT_NODE(1);Node.ATTRIBUTE_NODE(2);Node.TEXT_NODE(3);Node.CDATA_SECTION_NODE(4);Node.ENTRY_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);Node.NOTATION_NODE(12);

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title></head><body><!-- 注释 --><div id="box">123</div><script>//【1】元素节点var nodeElement = document.body;console.log(nodeElement.nodeType,nodeElement.nodeType==Node.ELEMENT_NODE);//1 true//【2】元素特性在DOM中以Attr类型表示,是存在于元素的attributes属性中的节点,但却不是DOM文档树的一部分。var nodeAttribute = document.getElementById("box").attributes[0] ;console.log(nodeAttribute.nodeType,nodeAttribute.nodeType == Node.ATTRIBUTE_NODE)//2 true//【3】文本节点var nodeText = document.body.firstElementChild.firstChild;console.log(nodeText.nodeType,nodeText.nodeType == Node.TEXT_NODE)//3 true//【4】CDATASection类型只针对基于//【5】ENTITY_REFERENCE_NODE 实体引用名称节点//【6】ENTITY_NODE 实体名称节点//【7】PROCESSING_INSTRUCTION_NODE 处理指令节点//【8】注释节点var nodeComment = document.body.childNodes[1];console.log(nodeComment.nodeType,nodeComment.nodeType == Node.COMMENT_NODE)//8 true//【9】文档节点var nodeDocument = document;console.log(nodeDocument.nodeType,nodeDocument.nodeType==Node.DOCUMENT_NODE);//9 true//【10】文档类型节点var nodeDocumentType = document.firstChild;console.log(nodeDocumentType.nodeType,nodeDocumentType.nodeType==Node.DOCUMENT_TYPE_NODE);//10 true//【11】DocumentFragment文档片段类型在文档中没有对应的标记,是一种轻量级的文档。var nodeDocumentFragment = document.createDocumentFragment();console.log(nodeDocumentFragment.nodeType,nodeDocumentFragment.nodeType == Node.DOCUMENT_FRAGMENT_NODE)//11 true//【12】NOTATION_NODE DTD中声明的符号</script></body></html>