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. Devexpress使用之：GridControl控件

    Devexpress使用之:GridControl控件 Devexpress系列控件功能很强大,使用起来也不太容易,我也是边摸索边使用,如果有时间我会把常用控件的使用方法整理出来的. using Sy ...

  2. MyBatis updateByExample和updateByExampleSelective的区别

    大家都用过mybatis generator来生产数据库的xml文件,但是关于updateByExample和updateByExampleSelective的区别我之前一直分不太清楚. 如果分不清楚 ...

  3. mr统计每年中每月温度的前三名

    weatherMapper package com.laoxiao.mr.weather; import java.text.ParseException; import java.text.Simp ...

  4. 由odoo源不稳定想到的，一个非常简单但是有效的方式解决yum源不稳定的问题，实现无限重试

    如题,最近在安装odoo 10, 但是官方源的速度是在是不敢恭维,断断续续的. yum 有没有能够无限重试的参数,于是用python写了个死循环,让它无限重试下去 脚本如下: #! /usr/bin/ ...

  5. oo第八次作业

    oo第八次作业 第五次作业分析: 1.度量图: 2.类图: 第五次作业由于是第一次接触多线程,所以导致自己的经验不足,因此最终也没有完成作业,到最后任然不能实现三部电梯的有效调度,所以导致了这次作业的 ...

  6. Python3 安装basemap

    1,https://www.lfd.uci.edu/~gohlke/pythonlibs/ 下载basemap和pyproj的地址 打开网页,搜索basemap和pyproj 下载相应的安装包,安装这 ...

  7. Startls Back 引起的 win10升级之后的闪屏问题

    win10 更新之后出现闪频问题. 有人说是和startls back 有关,需要卸载startls back, 但是进入安全模式下显示此 程序无法打开,无法卸载. 后来看到有人更新到startls ...

  8. squid故障汇总

    1.COSS will not function without large file support (off_t is 4 bytes long. Please reconsider recomp ...

  9. 详细分析LoadRunner参数化

    在进行网页的性能测试时,对网页的登录界面进行压力测试情况下就会使用到多用户进行登录,就需要对登录名和密码进行参数化,那么loadrunner怎么参数化设置呢?下面我们来详细分析一下. 一.我们这里通过 ...

  10. tensorflow学习之（八）使用dropout解决overfitting（过拟合）问题

    #使用dropout解决overfitting(过拟合)问题 #如果有dropout,在feed_dict的参数中一定要加入dropout的值 import tensorflow as tf from ...