DOM（Document Object Model）是针对HTML和XML文档的一个API。DOM描述的是一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。起源于DHML，现为W3C的推荐标准。

IE中的所有DOM对象都是以COM对象的形式实现。

节点层次

DOM可以将任何HTML或XML文档描绘成一个有多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中的不同信息及标记。每个节点都有各自的属性，数据和方法，同时也与其他节点存在联系。所有页面标记表现为以一个特定节点为根节点的属性结构。

<html>

  <head>

    <title>Test</title>

  </head>

  <body>

    <p>Hello,world!</p>

  </body>

</html>

其中<html>元素为文档元素。文档元素时文档的最外层元素，文档中其他元素都包含在文档元素中，每个文档中只能有一个文档元素。HTML的文档元素一定是<html>,XML文档中没有预定义的文档元素，所以任何元素都可以成为文档元素。

HTML中元素通过元素节点来表示，属性通过属性节点表示，文档类型通过文档类型节点表示，注释则通过注释节点表示。共有12中节点类型，都继承自一个基类

1、Node类型

Node接口是由DOM的所有节点类型实现的，Node接口在javascript中是作为Node类型实现的，javascript中所有节点类型都继承自Node类型，因此所有节点类型都有相同的基本属性和方法。

Node.ELEMENT_NODE(1)//如果一个节点是元素类型，则该节点的nodeType==1

<p id="pd">Hello,world!</p>

    <script type="text/javascript">

      alert(pd.nodeType);//

      alert(pd.nodeName);//p

    </script>

说明p节点是Element类型

Node.ATTRIBUTE_NODE(2)//节点为属性类型

<p id="pd" name="test">Hello,world!</p>

<script type="text/javascript">

alert(pd.nodeType);//

alert(pd.nodeName);//

var p=document.getElementById("pd");

alert(p.getAttribute("name"));//test
alert(p.getAttributeNode("name").nodeType);//2
</script>

通过元素节点的getAttribute获取属性节点。

Node.TEXT_NODE(3)//文本节点，空格等字符串也算是文本节点

<p id="pd" name="test">Hello,world!</p>

    <script type="text/javascript">

      var p=document.getElementById("pd");

      alert(p.firstChild.nodeValue);//Hello,world!

      alert(p.firstChild.nodeType);//

    </script>

元素节点下的第一个节点就是文本节点，所以可以用firstChild指向文本节点，然后在取节点的值。

Node.CDATA_SECTION_NODE(4)//xml文档中CDATA区域，CDATASection类型继承自Text类型

在xml文档，可以使用document.createCDATASetion()来创建CDATASetion类型

Node.COMMENT_NODE(8)//注释在DOM中是使用Comment来表示的

<p id="pd" name="test"><!--注释--></p>

    <script type="text/javascript">

      var p=document.getElementById("pd");

      alert(p.firstChild.nodeValue);//注释

      alert(p.firstChild.nodeType);//

    </script>

使用父节点可以获取到注释。

Node.DOCUMENT_NODE(10)//javascript通过Document类型表示文档，Document类型表示整个HTML页面或xml页面

<p id="pd" name="test"><!--注释--></p>

    <script type="text/javascript">

      var h=document.documentElement;

      alert(h===document.firstChild);//true

    </script>

nodeName和nodeValue的值取决于，节点的类型。对于元素节点，nodeName的值为标签名，nodeValue的值为null；

节点关系：

每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList对象是一个类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。NodeList对象在查询的过程中也可以修改。

<html>

  <head>

    <title>Test</title>

  </head>

  <body>

    <p id="pd" name="test"><!--注释--></p>

    <script type="text/javascript">

      var h=document.documentElement;

      var nodelist=h.childNodes;

      for(var i=0;i<nodelist.length;i++)

      {

        if (nodelist.item(i).nodeType==Node.ELEMENT_NODE) {

          alert(nodelist.item(i).nodeName);

        }

      }

    </script>

  </body>

</html>

输出结果为HEAD，BODY,用于输出元素节点。h.childNodes取得了子节点序列。

每个节点都有父节点parentNode属性，该属性指向文档树中的父节点。包含在childNodes列表中的节点都有相同父节点，它们的parentNode属性指向同一个节点。上面的HEAD和BODY的父节点都为HTML。同时同在childNodes列表中的节点都是同胞节点，可以通过当前节点的previousSibling属性和nextSibling属性来访问前后属性。例如body.previousSibling.nodeName===#text

父节点的firstChild和lastChild属性分别指向childNodes列表中的首尾节点。

操作节点：

当前节点的appendChild方法可以为当前节点的childNodes列表末尾添加一个节点

<script type="text/javascript">

      var h=document.documentElement;

      var end=document.createElement("end");

      h.appendChild(end);

      alert(h.lastChild.nodeName);//输出为end

    </script>

insertBefore方法可以将节点插入到确定位置

<script type="text/javascript">

      var h=document.documentElement;

      var end=document.createElement("end");

      h.insertBefore(end,h.lastChild);//插入到最后一个节点的前面

      alert(h.childNodes[h.childNodes.length-2].nodeName);

    </script>

replaceChild()方法接收两个参数，一个是节点，一个是要替换的节点。

normalize处理节点

javascript之DOM（一节点类型Node）的更多相关文章

  1. JavaScript HTML DOM 元素(节点)

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

  2. JavaScript之DOM创建节点

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

  3. DOM Element节点类型详解

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

  4. JavaScript的DOM操作(节点操作)

    创建节点createElement()var node = document.createElement(“div”);没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(docum ...

  5. JavaScript HTML DOM元素节点常用操作接口

    在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...

  6. DOM Document节点类型详解

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

  7. DOM之节点类型加例子

    DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构.换句话说,这是表示和处理一个HTML或XML文档的常用方法.D ...

  8. javascript之DOM(三Element类型)

    Element类型用于表现XML和HTML的元素,提供了对元素标签名.子节点及特性的访问. 要访问标签名可以使用nodeName和tagName属性,其返回值是一样的. <p id=" ...

  9. javascript之DOM(四其他类型)

    一.Text类型 文本节点由Text类型表示,指的是可以以字面意思解释的纯文本内容,其中包含HTML代码. nodeType=3 nodeName=#text nodeValue=文本内容 paren ...

随机推荐

  1. web框架--tornado框架之模板引擎继承

    使用模板的继承可以重复使用相同结构的模板, 可以大大减少代码量 入门实例 一.demo目录结构 注解: master.html为模板内容,被index.html,account.html引用 二.各文 ...

  2. js 浮点型运算出错的原因和解决方法

    在工作中经常需要进行数字运算,当然也会遇到浮点型数字的运算,但是运算结果却并不是想要. 这种小孩子都会做的简单运算,强大的计算居然算算错?原来,计算机的运算都需要转成二制运算,而二进制和实现位数限制有 ...

  3. Win10提示 该文件没有与之关联的程序来执行操作

    在Win10 2018年更新系统中,如果你手动删除注册表里的快捷箭头注册项,就会打开固定到底部任务栏的应用就会报错,要想恢复正常,先手动恢复原来删除的注册表项. 注册表位置:HKEY_CLASSES_ ...

  4. [LeetCode] 659. Split Array into Consecutive Subsequences 将数组分割成连续子序列

    You are given an integer array sorted in ascending order (may contain duplicates), you need to split ...

  5. Spring Cloud Gateway 结合配置中心限流

    前言 上篇文章我讲过复杂的限流场景可以通过扩展RedisRateLimiter来实现自己的限流策略. 假设你领导给你安排了一个任务,具体需求如下: 针对具体的接口做限流 不同接口限流的力度可以不同 可 ...

  6. Django 数据库同步命令

    版本1.8.2 检查数据库配置是否有错 Python manage.py validate/check 创建对应书看的映射语句 Python manage.py makemigrations 同步或者 ...

  7. 解决WebBrowser控件会导致应用程序占用内存居高不下问题

    WebBrowser 是一个 .NET 控件类,在 .NET Framework 2.0 版中新增.WebBrowser 类使用户可以在窗体中导航网页,下面我们来看在开发中碰到WebBrowser控件 ...

  8. hystrixDashboard(服务监控)

    1.新建项目 microservicecloud-consumer-hystrix-dashboard 2.yml文件 server: port: 9001 3.在pom.xml文件增加如下内容 &l ...

  9. Qt 编写串口调试助手

    一.成品图展示 成品图如下所示: 二.串口通讯步骤 1.在工程文件(.pro)中添加串口通信相关运行库:QT += serialport 2.在头文件中添加: #include <QSerial ...

  10. Oracle性能调优之虚拟索引用法简介

    本博客记录一下Oracle虚拟索引的用法,虚拟索引是定义在数据字典中的伪索引,可以说是伪列,没有修改的索引字段的.虚拟索引的目的模拟索引,不会增加存储空间的使用,有了虚拟索引,开发者使用执行计划的时候 ...