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. batch、epoch、iteration

    深度学习的优化算法,说白了就是梯度下降.每次的参数更新有两种方式. 第一种,遍历全部数据集算一次损失函数,然后算函数对各个参数的梯度,更新梯度.这种方法每更新一次参数都要把数据集里的所有样本都看一遍, ...

  2. 使用教育邮箱免费申请JetBrains套装（IntelliJ, PhpStorm, WebStorm...）

    想下个PhpStorm来写php,发现可以使用教育账号白嫖. 申请步骤 打开 申请页面 ,点击 “APPLY NOW” 开始申请. 填写姓名,以及学校提供给你的邮箱(edu后缀邮箱,或.end.cn) ...

  3. 你真的了解FastClick吗？

    你真的了解FastClick吗? 前段时间在做公司官网手机端菜单部分的时候,遇到一些很诡异的点击问题.比如菜单点击无效/双击才有效.在手指滑动的时候会触发点击事件.以及同样的事件处理在微信跟浏览器会有 ...

  4. 图论问题(1) : hdu 1198

    题目转自hdu 1198,题目传送门 题目大意: 给你11种单位水管摆放位置,若上下或左右有水管连接则视为这两点相连. 最后让你求这些张图中有几个连通块. 解题思路: 本来觉得这道题很简单,不就一个建 ...

  5. [LeetCode] 307. Range Sum Query - Mutable 区域和检索 - 可变

    Given an integer array nums, find the sum of the elements between indices i and j (i ≤ j), inclusive ...

  6. vue中子组件的methods中获取到props中的值

    这个官网很清楚,也很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可 例如: 父组件中 <template> <div> <head-top>& ...

  7. 热情组——项目冲刺 Day7

    项目相关 作业相关 具体描述 班级 班级链接 作业要求 链接地址 团队名称 热情组 作业目标 实现软件制作,以及在福大的传播 Github链接 链接地址 SCRUM部分: 成员昵称 昨日目标 开始时间 ...

  8. java8 HashMap源码 详细研读

    HashMap原理 目的: 单纯分析和学习hashmap的实现,不多说与Hashtable.ConcurrentHashMap等的区别. 基于 jdk1.8 在面试中有些水平的公司比较喜欢问HashM ...

  9. Docker下构建centos7容器无法使用systemctl命令的解决办法

    最近在使用docker 构建centos7 容器时,发现无法使用systemctl 命令.后来万能的百度解决了问题,随记之以备后用. 解决办法: docker run --privileged -it ...

  10. VUE的$refs和$el的使用

    ref 被用来给元素或子组件注册引用信息 ref 有三种用法: 1.ref 加在普通的元素上,用this.$refs.(ref值) 获取到的是dom元素 2.ref 加在子组件上,用this.$ref ...