DOM

JS由三部分组成

1、BOM

2、DOM

3、ECMAScript

ES和BOM在前面的文章已经介绍过了

今天开始JS组成的最后一部分DOM（文档对象模型）

我们知道，JS中的这三个部分实际上就是三种规范，只要是实现了这三种规范，那么这个语言就可以说是JS

DOM（文档对象模型）也是一种规范，是针对HTML和XML文档的API（应用程序编程接口）

DOM的功能主要是用于将文档解析为一个层次化的节点树，通过DOM提供的API让开发人员能够操作这棵节点树

用于对文档内容进行操作（增、删、改、查）

节点层次

DOM将文档描绘为一个层次化的文档树，那么DOM有哪些层次呢？

1、文档节点（每个文档的根节点，该节点只有一个子节点——文档元素）

2、文档元素（文档中所有的元素都包含在文档元素中，html页面中文档元素始终是<html>元素）

Node类型

在介绍节点之前需要先介绍一下Node类型

该类型是由DOM1规范中所规定的，用于所有节点类型的实现

JS中所有的节点类型都继承自Node类型

所以所有的节点都共享着相同的基本属性和方法

1、nodeType属性（该属性用于表示节点的类型，用12个数值常量来表示）

  • Node.ELEMENT_NODE(1)　　//元素节点
  • Node.ATTRIBUTE_NODE(2)　  //属性节点
  • Node.TEXT_NODE(3)      //文本节点
  • Node.CDATA_SECTION_NODE(4)    //CDATA区域（XML）
  • Node.ENTITY_REFERENCE_NODE(5)   //实体指向节点
  • Node.ENTITY_NODE(6)    //实体节点
  • Node.PROCESSING_INTRUCTION_NODE(7)    //处理指令节点
  • Node.COMMENT_NODE(8)    //注释节点
  • Node.DOCUMENT_NODE(9)    //文档节点
  • Node.DOCUMENT_TYPE_NODE(10)   //文档类型节点
  • Node.DOCUMENT_FRAGMENT_NODE(11)   //文档片段节点
  • Node.NOTATION_NODE(12)   //标记节点

通过上述的常量可以判断文档中的节点的类型

 if(节点.nodeType === Node.TEXT_NODE){

     // 代码

 }

PS：IE中由于并没有暴露出Node对象，所以为了保证浏览器的兼容性最好使用数值常量来进行判断

要注意的是在WEB浏览器中浏览器不一定实现了上述的某类对象

因为这只是规范，至于浏览器厂商有没有按照规范实现，这就是各个浏览器的问题了

2、nodeName属性

节点名称，取决于节点类型

对于元素节点该值为元素的标签名

3、nodeValue属性

节点值，取决于节点类型

对于元素节点该值始终为 null

4、childNodes属性

该属性保存着一个 NodeList 对象

NodeList是一种类数组对象，用于保存一组有序的节点

该对象是动态的，不是静态的（即文档结构的变化会动态地反应在该数组中）

访问其中的某个节点可以使用与数组一致的方括号，也可以使用 item(索引值) 的方式获取其中的节点

5、firstChild属性

指向childNodes的第一个节点

6、lastChild属性

指向ChildNodes的最后一个节点

7、parentNode属性

该属性指向当前节点的父节点

8、previousSibling属性

指向当前节点的前一个同级节点

9、nextSibling属性

指向当前节点的后一个同级节点

10.ownerDocument属性

指向当前节点所属的文档节点，每个节点只能属于一个文档节点

节点方法

1、hasChildNodes方法

用于判断当前节点是否存在子节点，返回一个布尔值

2、appendChild方法

用于给当前节点childNodes列表末尾添加子节点，参数需传入一个节点对象

若传入的节点对象已存在于当前的文档中，则将这个节点从原来的位置移到现在的位置

3、insertBefore方法

该方法需要传入两个参数

　　1.要插入的节点

　　2.要插入到childNodes列表中哪个节点的前面

若第二个参数为null则插入到最后，与appendChild所执行的操作一致

4、replaceChild方法

依旧需要两个参数

　　1.用于替换的节点

　　2.被替换的节点

该方法返回被替换的节点

5、removeChild方法

传入需要移除的节点（childNodes中）

返回被移除的节点

PS：上述5个方法对于没有子节点的节点会报错

6、cloneNode方法

复制当前节点，传入一个布尔值

true 深复制，复制当前节点及其子节点

false浅复制，仅复制当前节点本身

7、normalize方法

用于整理当前节点的子节点

即由于文档操作很可能会出现一些，不符合逻辑的结构该方法就用于整理这些结构

如：空文本节点、两个相邻文本节点

对于上述例子，空文本节点会被移除，两个相邻的文本节点会合并为一个

对于Node类型我们虽然可以访问但是并不能看到详情

说明Node类型是JS的内置对象

但是我们可以通过Object.keys来看到这些属性

而后面我们提到的属性、方法楼主没找到方法把它们遍历出来

如果有知道的小伙伴可以留言告知，感激不尽~~~

Javascript高级编程学习笔记（35）—— DOM（1）节点的更多相关文章

  1. Javascript高级编程学习笔记（49）—— DOM2和DOM3（1）DOM变化

    DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...

  2. Javascript高级编程学习笔记（37）—— DOM（3）Element

    Element类型 除了Document类型之外,Element类型应该就是web编程中最常用的类型了 Element类型主要用于表现XML.HTML元素,提供对元素标签名.子节点以及特性的访问 特性 ...

  3. Javascript高级编程学习笔记（71）—— 模拟事件（1）DOM事件模拟

    事件,指的是网页中某个特定的交互时刻 一般来说事件由浏览器厂商负责提供,一般由用户操作或者其它浏览器功能来触发 但是有一类特殊的事件,那就是由我们开发人员通过JS触发的事件 这些事件和浏览器创建的事件 ...

  4. Javascript高级编程学习笔记（45）——DOM 操作表格及DOM动态集合

    操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就 ...

  5. Javascript高级编程学习笔记（42）—— DOM（8）Attr类型

    Attr类型 我们在之前的文章中提到了,元素有一个 attributes 属性 该属性保存了一个 NamedNodeMap 集合 该集合中的元素也就是今天我们所要记叙的 attr 类型 主要就是方便我 ...

  6. Javascript高级编程学习笔记（41）—— DOM（7）DocumentFragment类型

    DocumentFragment类型 除开昨天我们了解的两种不常用的类型之外 今天我们要介绍的两种类型可以说使用频率不输于前面最常用的几种元素类型 首先就是DocumentFragment类型 有些小 ...

  7. Javascript高级编程学习笔记（40）—— DOM（6）CDATASection、DocumentType

    CDATASection类型 CDATASection类型是只针对XML文档的类型 因为浏览器无法解析 在浏览器中创建CDATASection的函数也无法正常使用 该类型有以下属性 nodeType: ...

  8. Javascript高级编程学习笔记（39）—— DOM（5）Comment

    Comment类型 顾名思义,comment类型指的就是注释节点在HTML文档中的类型 也就是说平时我们在代码中的注释,在HTML解析的时候也会被解析为一类节点 让我们可以根据这些节点进行一系列的操作 ...

  9. Javascript高级编程学习笔记（38）—— DOM（4）Text

    Text类型 html页面中的纯文本内容就属于Text类型 纯文本内容可以包含转义后的html字符,但不能包括 html 代码 text类型具有以下属性.方法 nodeType:3 nodeName: ...

随机推荐

  1. Checked Uncheckd异常

    Checked : 你可以在写代码的时候就throw 或者try catch 的 Unchecked :  Error   + RuntimeException .提前无法预测的 http://www ...

  2. LaTeX入门

    原写于我的洛谷博客,由于洛谷的\(\mathtt{markdown}\)编辑器和博客园的\(\mathtt{markdown}\)编辑器有点差别,所以实在懒得进行微调,就直接挂一个到洛谷博客的链接好了 ...

  3. Numpy 数组属性

    Numpy 数组的维数称为秩(rank),一维数组的秩为 1 , 二维数组的秩为 2 , 以此类推:在Numpy中, 每一个线性的数组称为是一个轴(axis),也就是维度(dimensios).比如说 ...

  4. windows socket 文件下载上传

    socket 图片 文件 下载上传  数据库 线程池  存入图片 等

  5. 手绘raft算法

    手绘raft算法 互联网技术窝 2019-04-07 12:06:05 在现实的分布式系统中,不能可能保证集群中的每一台机器都是100%可用可靠的,集群中的任何机器都可能发生宕机.网络连接等问题导致集 ...

  6. Java的xml与map,与Bean互转

    xml与map互转,主要使用dom4j import org.dom4j.Document; import org.dom4j.DocumentException; import org.dom4j. ...

  7. mysql 字段指定值靠前排序方法，多字段排序排序方法

    背景:SEO下选择某查询条件 查询展示信息为装修设计师以及设计师作品.设计师原型设计为:选择某风格 例如:简约,则列表出现拥有简约风格的设计师信息以及该设计师类型为简约的作品(3条靠前记录) 浏览原型 ...

  8. 实验十四 第九组 张燕~杨蓉庆~杨玲 Swing图形界面组件

    实验十四  Swing图形界面组件 8-11-29 理论知识 Swing和MVC设计模式 (1)设计模式(Design pattern)是设计者一种流行的 思考设计问题的方法,是一套被反复使用,多数人 ...

  9. CPDA-战略管理

    战略管理-PEST分析-市场分析-竞争环境分析-SWOT分析-内/外部因素评价矩阵-国际化/多元化战略 战略管理: 战略分析->战略制定->战略实施->战略评价->战略分析,四 ...

  10. 解决ORA-30036：无法按8扩展段（在还原表空间‘XXXX’中）

    在update一数据量很大的表时,提示“ORA-30036:无法按8扩展段” 度娘了下原因与解决办法:   1.查询了一下undo表空间的使用,发现已经超过了80% SELECT a.tablespa ...