节点类型

  DOM规定:整个文档是一个文档节点,每个标签是一个元素节点,元素包含的文本是文本节点,元素的属性是一个属性节点,注释属于注释节点,如此等等;

  每个节点都有一个nodeType属性,用于标明节点的类型,简单说明如表,该表列出了不同的节点类型,以及他们可拥有的子节点类型。

节点类型 说明 可包含的节点类型
Document 表示整个文档,DOM数的根节点 Element(最多一个),processingInstruction、comment、docuemntType
DocumentFagment 表示文档片段,轻量级的Document对象,进包含部分文档     processingInstruction、Comment、Text、CDATASection、EntityReference    
documentType     为文档定义的尸体提供接口     none
processingInstruction   表示处理命令 none
EntityRerence 表示实体引用元素 processingInstruction、comment、text、CDATASection、EntityReference
Attr 表示属性 text、EntityReference
Element   表示元素 text、comment、EntityReference、CDATASection、processingInstruction
comment   表示注释 none
entity 表示实体 processingInstruction、comment、text、CDATASection、EntityReference
CDATASection 表示文档中的CDATA区段,其包含的文本不会被解析器解析 processingInstruction、comment、text、CDATASection、EntityReference
Notation 表示在DTD中声明的符号 none
     

使用nodeType属性返回值可以判断一个节点的类型,具体说明如下

节点类型       nodeType       常量名                  
Element   1 ELEMENT_NODE
Attr   2 ATTRIBUTE_NODE
Text 3 TEXT_NODE
CDATASection 4 CDATA_SECTION_NODE
EntityReference 5 ENTITY_REFERENCE_NODE
Entity 6 ENTITY_NODE
ProcessingInstruction      7 PROCESSING_INSTRUCTION_NODE
Comment 8 COMMENT_NODE
Document 9 DOCUMENT_NODE
DocumentType 10 DOCUMENT_TYPE_NODE
DocumentFragment 11 DOCUMENT_FRAGMENT_NODE
Notation 12 NOTATION_NODE
function count(n){
var num=0;
if(n.nodeType==1){ //判断节点的类型是否是元素,是就累加
num++;
}
var s=n.childNodes; //节点下的子节点
for(var i=0;i<s.length;i++){
num+=count(s[i]);
}
return num; } console.log("当前文档包含"+count(document)+"元素");

在上面javascript脚本中,定义一个计数器函数,然后通过递归的方式逐层检索document下所包含的全部节点,在计数函数中在通过nodeType属性是否为1过滤

掉非元素节点,从而统计出文档中包含全部的元素个数。

DOM-使用节点的更多相关文章

  1. JavaScript HTML DOM 元素(节点)

    JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...

  2. DOM树节点和事件

    一.前言:DOM树节点是JS的基础语句.通过节点,能够取到HTML代码中的任意标签,从而对其进行修改和添加各种视觉效果. 二.DOM树节点    DOM节点分为三大类: 元素节点,属性节点,文本节点  ...

  3. JavaScript之DOM创建节点

    上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...

  4. dom操作节点之常用方法

    DOM:获取节点:{1. document.getElementById (元素id):通过元素id找到节点2. document.getElementsByClassName (元素类名classN ...

  5. 围绕DOM元素节点的增删改查

    HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 document 每个 HTML 元素是元素节点 element HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是 ...

  6. jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...

  7. 简述HTML DOM及其节点分类

    在JavaScript中,document这个对象大家一定很熟悉,哪怕是刚刚开始学习的新人,也会很快接触到这个对象.而document对象不仅仅是一个普通的JavaScript内置对象,它还是一个巨大 ...

  8. DOM 元素节点几何量与滚动几何量

    当在 Web 浏览器中查看 HTML 文档时,DOM 节点被解析,并被渲染成盒模型(如下图),有时我们需要知道一些信息,比如盒模型的大小,盒模型在浏览器中的位置等等,本文我们就来详细了解下元素节点的几 ...

  9. DOM Element节点类型详解

    上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element . 1.概况 Element 类型用于表现 HTML 或 X ...

  10. DOM Document节点类型详解

    在前面 DOM 概况 中,我们知道了 DOM 总共有 12 个节点类型,今天我们就来讲下 DOM 中最重要的节点类型之一的 document 节点类型. 1.概况 Javascript 通过 Docu ...

随机推荐

  1. .net图表之ECharts随笔09-pie环形图表

    这是最后的效果图 1. 这里title属性用到了富文本标签 官方文档是用的label属性,看得我一开始格外的懵逼.后面我尝试着在text中写入格式,没想到竟然成功了. rich中定义样式,在text中 ...

  2. Wpf中显示Unicode字符

    1. 引言 今天在写一个小工具,里面有些字符用Unicode字符表示更合适.但是一时之间却不知道怎么写了.经过一番查找,终于找到了办法.记到这里,一是加深印象,二则以备查询. 2. C#中使用Unic ...

  3. 用redis统计大量用户的登陆情况[只判断是否活跃]

    有这样的一个场景需求:有上亿的用户,要统计这批用户的登陆情况,例如一周连续登陆,连续三天是是否登陆,一周活跃天数等用户 存在的挑战 数据如何尽可能用小的空间存储 如何能快速获取指定的数据 如果使用文件 ...

  4. if判断和switch case 和三元运算符整理

    if判断和switch case 和三元运算符整理 例子1:if判断写法: <script type="text/javascript"> var num = 12; ...

  5. 在Ubuntu中增加root用户登录

    一:增加root用户登录 1.打开终端,输入:sudo gedit /usr/share/lightdm/lightdm.conf.d/50-ubuntu.conf 2.在弹出的编辑框里输入:gree ...

  6. django框架--底层架构

    目录 零.参考 一.对于web服务的理解 二.对于wsgi协议的理解 三.自定义一个简单的基于wsgi协议的web框架 四.django中的server实现 五.django中的application ...

  7. 如何安装windows7

    前因:之前安装的win7的系统,用了激活工具,刚开始的几个星期还没察觉有何问题.直到有天系统给出异常提示:系统资源不足,无法完成请求的服务.仔细排查之后发现是系统内核句柄数一直增加不释放,句柄数大概有 ...

  8. VUE输入框显示时自动聚焦

    directives: { focus: { inserted: function (el, {value}) { if (value) { el.focus() } } } } 注意点:1.用v-i ...

  9. SocketIo+SpringMvc实现文件的上传下载

    SocketIo+SpringMvc实现文件的上传下载 socketIo不仅可以用来做聊天工具,也可以实现局域网(当然你如果有外网也可用外网)内实现文件的上传和下载,下面是代码的效果演示: GIT地址 ...

  10. Postman—命令执行脚本及生成报告

    前言 前面的应用中,都是在postman图形界面工具里面进行测试,但是有时候我们需要把测试脚本集成到CI平台,或者在非图形界面的系统环境下进行测试,那么我们该如果处理呢 通过newman来执行post ...