DOM-使用节点
节点类型
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-使用节点的更多相关文章
- JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...
- DOM树节点和事件
一.前言:DOM树节点是JS的基础语句.通过节点,能够取到HTML代码中的任意标签,从而对其进行修改和添加各种视觉效果. 二.DOM树节点 DOM节点分为三大类: 元素节点,属性节点,文本节点 ...
- JavaScript之DOM创建节点
上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...
- dom操作节点之常用方法
DOM:获取节点:{1. document.getElementById (元素id):通过元素id找到节点2. document.getElementsByClassName (元素类名classN ...
- 围绕DOM元素节点的增删改查
HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 document 每个 HTML 元素是元素节点 element HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是 ...
- jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...
- 简述HTML DOM及其节点分类
在JavaScript中,document这个对象大家一定很熟悉,哪怕是刚刚开始学习的新人,也会很快接触到这个对象.而document对象不仅仅是一个普通的JavaScript内置对象,它还是一个巨大 ...
- DOM 元素节点几何量与滚动几何量
当在 Web 浏览器中查看 HTML 文档时,DOM 节点被解析,并被渲染成盒模型(如下图),有时我们需要知道一些信息,比如盒模型的大小,盒模型在浏览器中的位置等等,本文我们就来详细了解下元素节点的几 ...
- DOM Element节点类型详解
上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element . 1.概况 Element 类型用于表现 HTML 或 X ...
- DOM Document节点类型详解
在前面 DOM 概况 中,我们知道了 DOM 总共有 12 个节点类型,今天我们就来讲下 DOM 中最重要的节点类型之一的 document 节点类型. 1.概况 Javascript 通过 Docu ...
随机推荐
- IT和非IT人士:2分钟了解什么是区块链
本文由 网易云发布. (非IT:阅读常规部分:IT:阅读引用块) 作者:任长存,网易杭州研究院工程师 前言 信息的高速发展,致使互联网风口犹如娱乐圈,移动互联网,微博.直播.共享经济.短视频.小程序 ...
- 使用Commons Email发送邮件
Commons Email是apache commons库中的一个组件,对java mail做了一些个封装,提供能为简化的API供开发者使用.它依赖于javax.mail . 首先下载commons- ...
- Android 导入 aar 库文件
1. 在需要导入 aar 的 module 目录下创建一个名叫 "aars" 的目录,并把 aar 文件复制到这里. 2. 在项目的 build.gradle 文件里添加 allp ...
- Mysql-基础+安装指南
安装指南: https://www.cnblogs.com/majj/p/9160383.html 小马哥 下载完后初始化操作数据库: 1. 将文件放在 : G:\软件\mysql-8.0.15-w ...
- Java基础学习篇---------this、object的学习
一.this的学习方法 1.使用this调用构造方法市一定放在构造方法的首行 2.使用this调用构造方法时一定流出调用的出口 public class MyClass { public MyClas ...
- python爬虫的页面数据解析和提取/xpath/bs4/jsonpath/正则(2)
上半部分内容链接 : https://www.cnblogs.com/lowmanisbusy/p/9069330.html 四.json和jsonpath的使用 JSON(JavaScript Ob ...
- nodejs 像 C 语言那样输出当前代码的行数
http://stackoverflow.com/questions/11386492/accessing-line-number-in-v8-javascript-chrome-node-js Ob ...
- Flask从入门到精通之大型程序的结构二
一.程序包 程序包用来保存程序的所有代码.模板和静态文件.我们可以把这个包直接称为app(应用),如果有需求,也可使用一个程序专用名字.templates 和static 文件夹是程序包的一部分,因此 ...
- Git 使用流程
# 下载远程仓库到本地 git clone 仓库地址cd 本地仓库文件夹 # 创建本地开发分支并与远程开发分支关联 git checkout -b develop origin/developgit ...
- MySQL权限管理(五)
一.什么是MySQL权限 各大帖子及文章都会讲到数据库的权限按最小权限为原则,这句话本身没有错,但是却是一句空话.因为最小权限,这个东西太抽象,很多时候你并弄不清楚具体他需要哪些权限. 现在很多mys ...