javascript中12种DOM节点类型概述_js dom有哪些_qingqingzijinxin的博客-程序员宅基地

技术标签： dom  HTML  html  

前面的话

　　DOM是javascript操作网页的接口，全称为文档对象模型(Document Object Model)。它的作用是将网页转为一个javascript对象，从而可以使用javascript对网页进行各种操作(比如增删内容)。浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构。DOM的最小组成单位叫做节点(node)，文档的树形结构(DOM树)由12种类型的节点组成。本文将主要说明DOM节点类型

 

属性

　　一般地，节点至少拥有nodeType、nodeName和nodeValue这三个基本属性。节点类型不同，这三个属性的值也不相同

nodeType

　　nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值，12种类型分别对应1到12的常数值

复制代码 
元素节点            　　Node.ELEMENT_NODE(1)
属性节点            　　Node.ATTRIBUTE_NODE(2)
文本节点            　　Node.TEXT_NODE(3)
CDATA节点             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)
DTD声明节点            Node.NOTATION_NODE(12)
复制代码

　　DOM定义了一个Node接口，这个接口在javascript中是作为Node类型实现的，而在IE8-浏览器中的所有DOM对象都是以COM对象的形式实现的。所以，IE8-浏览器并不支持Node对象的写法

//在标准浏览器下返回1，而在IE8-浏览器中报错，提示Node未定义
console.log(Node.ELEMENT_NODE);//1

nodeName

　　nodeName属性返回节点的名称

nodeValue

　　nodeValue属性返回或设置当前节点的值，格式为字符串

　　接下来，将按照节点类型的常数值对应顺序，从1到12进行详细说明

 

【1】元素节点

　　元素节点element对应网页的HTML标签元素。元素节点的节点类型nodeType值是1，节点名称nodeName值是大写的标签名，nodeValue值是null

　　以body元素为例

// 1 'BODY' null
console.log(document.body.nodeType,document.body.nodeName,document.body.nodeValue)
console.log(Node.ELEMENT_NODE === 1);//true

 

【2】特性节点

　　元素特性节点attribute对应网页中HTML标签的属性，它只存在于元素的attributes属性中，并不是DOM文档树的一部分。特性节点的节点类型nodeType值是2，节点名称nodeName值是属性名，nodeValue值是属性值

　　现在，div元素有id="test"的属性

复制代码 
<div id="test"></div>
<script>
var attr = test.attributes.id;
//2 'id' 'test'
console.log(attr.nodeType,attr.nodeName,attr.nodeValue)
console.log(Node.ATTRIBUTE_NODE === 2);//true    
</script>
复制代码

 

【3】文本节点

　　文本节点text代表网页中的HTML标签内容。文本节点的节点类型nodeType值是3，节点名称nodeName值是'#text'，nodeValue值是标签内容值

　　现在，div元素内容为'测试'

复制代码 
<div id="test">测试</div>
<script>
var txt = test.firstChild;
//3 '#text' '测试'
console.log(txt.nodeType,txt.nodeName,txt.nodeValue)
console.log(Node.TEXT_NODE === 3);//true    
</script>
复制代码

 

【4】CDATA节点

　　CDATASection类型只针对基于XML的文档，只出现在XML文档中，表示的是CDATA区域，格式一般为

<![CDATA[
]]>

　　该类型节点的节点类型nodeType的值为4，节点名称nodeName的值为'#cdata-section'，nodevalue的值是CDATA区域中的内容

 

【5】实体引用名称节点

　　实体是一个声明，指定了在XML中取代内容或标记而使用的名称。 实体包含两个部分， 首先，必须使用实体声明将名称绑定到替换内容。 实体声明是使用 <!ENTITY name "value"> 语法在文档类型定义(DTD)或XML架构中创建的。其次，在实体声明中定义的名称随后将在 XML 中使用。 在XML中使用时，该名称称为实体引用。

　　实体引用名称节点entry_reference的节点类型nodeType的值为5，节点名称nodeName的值为实体引用的名称，nodeValue的值为null

//实体名称
<!ENTITY publisher "Microsoft Press">
//实体名称引用
<pubinfo>Published by &publisher;</pubinfo>

 

【6】实体名称节点

　　上面已经详细解释过，就不再赘述

　　该节点的节点类型nodeType的值为6，节点名称nodeName的值为实体名称，nodeValue的值为null

 

【7】处理指令节点

　　处理指令节点ProcessingInstruction的节点类型nodeType的值为7，节点名称nodeName的值为target，nodeValue的值为entire content excluding the target

 

【8】注释节点

　　注释节点comment表示网页中的HTML注释。注释节点的节点类型nodeType的值为8，节点名称nodeName的值为'#comment'，nodeValue的值为注释的内容

　　现在，在id为myDiv的div元素中存在一个<!-- 我是注释内容 -->

复制代码 
<div id="myDiv"><!-- 我是注释内容 --></div>
<script>
var com = myDiv.firstChild;
//8 '#comment' '我是注释内容'
console.log(com.nodeType,com.nodeName,com.nodeValue)
console.log(Node.COMMENT_NODE === 8);//true    
</script>
复制代码

 

【9】文档节点

　　文档节点document表示HTML文档，也称为根节点，指向document对象。文档节点的节点类型nodeType的值为9，节点名称nodeName的值为'#document'，nodeValue的值为null

<script>
//9 "#document" null
console.log(document.nodeType,document.nodeName,document.nodeValue)
console.log(Node.DOCUMENT_NODE === 9);//true    
</script>

 

【10】文档类型节点

　　文档类型节点DocumentType包含着与文档的doctype有关的所有信息。文档类型节点的节点类型nodeType的值为10，节点名称nodeName的值为doctype的名称，nodeValue的值为null

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var nodeDocumentType = document.firstChild;
//10 "html" null
console.log(nodeDocumentType.nodeType,nodeDocumentType.nodeName,nodeDocumentType.nodeValue);
console.log(Node.DOCUMENT_TYPE_NODE === 10);
</script>
</body>
</html>
复制代码

 

【11】文档片段节点

　　文档片段节点DocumentFragment在文档中没有对应的标记，是一种轻量级的文档，可以包含和控制节点，但不会像完整的文档寻亲战胜额外的资源。该节点的节点类型nodeType的值为11，节点名称nodeName的值为'#document-fragment'，nodeValue的值为null

复制代码 
<script>
var nodeDocumentFragment = document.createDocumentFragment();    
//11 "#document-fragment" null
console.log(nodeDocumentFragment.nodeType,nodeDocumentFragment.nodeName,nodeDocumentFragment.nodeValue);
console.log(Node.DOCUMENT_FRAGMENT_NODE === 11);//true
</script>
复制代码

 

【12】DTD声明节点

　　DTD声明节点notation代表DTD中声明的符号。该节点的节点类型nodeType的值为12，节点名称nodeName的值为符号名称，nodeValue的值为null

 

最后

　　在这12种DOM节点类型中，有一些适用于XML文档，有一些是不常用的类型。而对于常用类型，后面会陆续进行详细介绍，本文对这12种节点类型只做概述


http://www.cnblogs.com/xiaohuochai/p/5785189.html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qingqingzijinxin/article/details/52244700

智能推荐

【数据结构】（森林）以孩子兄弟链表为存储结构,请设计递归算法求树的深度_以孩子兄弟链表为存储结构,求树的深度-程序员宅基地

以孩子兄弟链表为存储结构,请设计递归算法求树的深度算法思想：求树的深度采用递归的思想就是求每一个兄弟的深度最大值int Height(CSTree bt){ int hc,hs; if(bt==NULL) return 0; else{ hs=Height(bt.nextsibling);//求兄弟结点的深度 hc=Height(bt.firstchild);//求孩..._以孩子兄弟链表为存储结构,求树的深度

[Spring]设置property-placeholder绝对路径-程序员宅基地

直接写会报错java.io.FileNotFoundException: sartner/conf/config.properties (没有那个文件或目录)正确写法:如果文件在classpath下则写成

解决sudo不可用问题_! warning: version 'node' does not exist. sudo 进不去-程序员宅基地

当我们使用sudo命令切换用户的时候可能会遇到提示以下错误：xxx is not in the sudoers file. This incident will be reported，xxx是你当前的用户名，究其原因是用户没有加入到sudo的配置文件里解决方法切换到root用户执行命令visudo$ visudo在打开的配置文件中，找到root ALL=(ALL) ALL，在下面添加一行xxx ALL=(ALL) ALL 其中xxx是你要加入的用户名称root ALL=(AL_! warning: version 'node' does not exist. sudo 进不去

idea调试SpringMvc, 出现：”通配符的匹配很全面, 但无法找到元素 'mvc:annotation-driven' 的声明“错误的解决方法-程序员宅基地

调试json格式输出，出现以下错误：HTTP Status 500 - Servlet.init() for servlet HelloDispatcher threw exception type Exception reportmessage Servlet.init() for servlet HelloDispatcher threw exceptiondescription...

iphone X iOS 11录音失败出坑-程序员宅基地

这样设置： [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayAndRecord error:nil]; 会录音失败。这样设置： [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryRecord error:nil...

android 斜线 绘制_Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)剖析...-程序员宅基地

Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)标签：图形androidpathfloatclass2012-01-2020:02151861人阅读评论(64)收藏举报分类：android(12)版权声明：本文为博主原创文章，未经博主允许不得转载。目录(?)[+]1、首先说一下canvas类：ClassOverviewTheCanvas..._android 斜线

随便推点

MiniProfiler具体使用方法_卡卡 undefined的博客-程序员宅基地

本文以官网原文为基础，对MiniProfiler的使用方法进行分析和解释。How-To Profile Code_miniprofiler

Sa-Token使用笔记（三）------ 二级认证_satoken 二级认证-程序员宅基地

目录背景准备：具体操作：注意背景开发文档中，省长给出了简洁的二级认证实现：“使用注解进行二级认证”，只需一个 @SaCheckSafe 注解即可。但实际使用中，还是需要做更多操作的。二级认证（二次登录）的操作时机应在何时？如何通知用户需要二级认证（页面上）？如何自动控制页面跳转，完成一个完整的二级认证过程？准备：@SaCheckSafe 的本质：StpUtil.checkSafe()方法。即“检查当前会话是否已通过二级认证，如未通过则抛出异常”。二级认证的操作流程应为：开启二级认证 &_satoken 二级认证

Android 解析XML—pull解析方式-程序员宅基地

在Android中，常见的XML解析器分别为SAX解析器、DOM解析器和PULL解析器,其中PULL解析器小巧轻便，解析速度快，简单易用，非常适合在Android移动设备中使用，Android系统内部在解析各种XML时也是用PULL解析器，今天我来介绍一下PULL解析器首先是在Tomcat服务器上建了一个xml的文档具体如下：通过访问网络与服务器的交互。下面是具体的代码： ...

Python制作的赛车小游戏源代码，逆行飙车_animatedstreet.png-程序员宅基地

python制作的赛车小游戏，逆行飙车，通过键盘方向键控制。_animatedstreet.png

TCP之已失效的连接请求报文段（以三次握手和两次握手为例）-程序员宅基地

　　一、此时client没有发起建立连接请求，所以client处于CLOSED状态，接受到任何包都会丢弃·　　谢希仁版《计算机网络》中的例子是这样的，“已失效的连接请求报文段”的产生在这样一种情况下：client发出的第一个连接请求报文段并没有丢失，而是在某个网络结点长时间的滞留了，以致延误到连接释放以后的某个时间才到达server。本来这是一个早已失效的报文段。但server收到此..._采用三次挥手断开连接的话可能会出现已失效的连接请求报文段

系统介绍一部手机开发的全流程-程序员宅基地

主板方案的确定本文引用地址：http://www.eepw.com.cn/article/201610/309201.htm在手机设计公司，通常分为市场部(以下简称MKT)，外形设计部(以下简称ID)，结构设计部(以下简称MD)。一个手机项目的是从指定的一块主板开始的，根据市场的需求选择合适的主板，从方案公司哪里拿到主板的3D图，再找设计公司设计某种风格的外形和结构。也有客户直接找到设计公司要求设..._手机开发有什么组

推荐文章

热门文章

相关标签