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. ieee文献免费下载办法

    sci-hub是个神奇的存在,但突然有短时间不能用了,搜索很久,找到了:https://www.zhihu.com/question/68333471/answer/276287163 这个网址会实时 ...

  2. 关于为什么会涉足easyui

    之前公司需要做一款类似于报价系统的功能,涉及到表单以及报表的统计, 这时分配给我,PHP也要开始弄easyui了 就这样走上了前端的路? 还挺感谢这些时间,有精力来学习额外的东西 不学习就会落后,ヾ( ...

  3. vs code 配置 php xdebug

    1.安装扩展 php debug 2.下载xdebug插件 做个页面输出phpinfo(),复制到这个页面 https://xdebug.org/wizard.php 提交后会告诉你机子要下载哪个版本 ...

  4. js千分位加逗号

    code function toThousands(num) { var numArr = num.split('.'); num = numArr[0]; var result = ''; whil ...

  5. 创建Jenkins构建触发器，代码提交至gitLab即自动触发构建

    下载所需插件,系统设置-->插件管理,搜索以下两个插件,选择安装 登录gitLab,生成一个Personal Access Tokens 进入Jenkins,添加api token,路径:首页- ...

  6. boost多线程入门介绍

    :first-child { margin-top: 0px; } .markdown-preview:not([data-use-github-style]) h1, .markdown-previ ...

  7. 201771010134杨其菊《面向对象程序设计（java）》第十五周学习

    第十五周学习总结 第一部分:理论知识 JAR文件: 应用程序首选项存储: Java Web Start JAR文件: 1.Java程序的打包:程序编译完成后,程序员将.class文件压缩打包为.jar ...

  8. mysql字符集小结

    http://blog.csdn.net/wyzxg/article/details/8779682 author:skatetime:2013/04/09 mysql字符集小结 今天同事阿杰兄发现内 ...

  9. C/C++中volatile关键字详解

    1. 为什么用volatile? C/C++ 中的 volatile 关键字和 const 对应,用来修饰变量,通常用于建立语言级别的 memory barrier.这是 BS 在 "The ...

  10. 编译Spark源码

    Spark编译有两种处理方式,第一种是通过SBT,第二种是通过Maven.作过Java工作的一般对于Maven工具会比较熟悉,这边也是选用Maven的方式来处理Spark源码编译工作. 在开始编译工作 ...