文档对象模型（DOM）

   DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型：文档型节点、元素节点、特性节点、注释节点等共有12种节点类型。DOM1级定义了一个Node接口，该接口由所有节点类型实现。可通过nodeType属性显示节点的类型。推荐将nodeType与数字值比较得知节点类型（如果是使用数值常量例如Node.ELEMENT_NODE(1)比较，在IE中无效）。

一、Node类型

1、每个节点都有三个属性（通用）：

nodeName(对应节点元素标签名，在element类型中等同于属性tagName)、

nodeType（对应节点类型对应的数字）、

nodeValue（对应节点的值）。

2、节点关系（家族关系）（用于遍历节点）。对应有一下几个属性：

childNodes   返回子节点的Nodelist

(Nodelist 似数组但不是数组，有length属性，是有生命、有呼吸的对象，能随节点的变动而实时变动，而非第一次访问的某个瞬间拍摄下的快照。Nodelist可通过方框号下标访问，也可以使用item()访问)

parent    返回节点的父节点

firstChild  返回第一个子节点

lastChild   返回最后一个子节点

previousSibling  返回前一个同胞兄弟节点

nextSibling    返回下一个同胞兄弟节点

3、节点操作（都是对其子节点的操作，也即是对其Nodelist的操作）

appendChild()   用于childNodes列表的末尾追加一个节点

insertBefore()  （两个参数：第一个参数为新节点，第二个参数为参照节点）在参照节点前插入新节点

replaceChild()    （两个参数：第一个参数为新节点，第二个参数为替换节点）用新节点替换要替换的节点

removeChild()    移除节点

4、cloneNode()   用于创建调用这个方法的节点的一个完全相同的副本。若参数为true,则进行深度克隆，但一般浏览器不会克隆其节点中的javascript或事件处理，只复制特性和子节点。（但IE有个bug,会复制事件处理程序）

5、normalize()   用于处理文档树中的文本节点。如果在调用该方法的后代子节点中发现空文本节点，就删除它；如果找到相邻的文本节点，则将它们合并为一个文本节点。

二、获取节点

1、document.getElementById("ID name")    通过Id获取节点

2、document.getElementsByTagName("tag name")    通过标签名称获取节点

3、document.getElementsByName("name")      通过属性name的值获取节点

三、特性节点的操作

设  element为元素节点

（1）element.getAttribute("特性名称")    获取特性节点

（2）element.setAttribute("名称"，“值”)  设置特性节点

（3）element.removeAttribute("特性名称")  移除特性节点

以下方法不常用

（4）element.getAttributeNode("名称")   获取特性节点

（5）element.setAttributeNode(node)    设置特性节点

（6）element.createAttribute("名称")      创建特性节点

四。创建节点

（1）document.createElement(“标签名”)     创建Element节点

（2）document.createAttribute("属性名称")  创建Atrr节点

（3）document.createTextNode("字符串")    创建Text节点

（4）document.createComment("字符串")    创建Comment节点

（5）document.createDocumentFragment()   创建DocumentFragment类型

五、不同类型的节点

1、document类型（document作为HTMLDocument的一个实例）

（1）document.documentElement      获取<html>的引用

（2）document.body     获取<body>的引用

（3）document.doctype   获取<!DOCTYPE>的引用    有些浏览器不把它当做文档的子节点，但其也是一节点，但不会出现在document.childNodes中。

（4）document.title  获取文档标题

三个与网页请求有关的属性URL、domain、referrer，这些信息都存储在HTTP的头部：

（5）document.URL  获取页面的完整URL

（6）document.domain    获取页面的域名（由于不同的子域的页面无法通过javascript通讯，而将每个页面的document.domain设置为相同的值，则不同的页面中javascript可以访问对方的javascript对象。但如果domain属性一开始设置为“松散”例如"wrox.com",就不能设置为“紧绷”例如“p2p.wrox.com”）

（7）document.referrer   获取链接到当前页面的URL

一些document类型的特殊集合

（1）、document.anchors    包含文档中的所有带有name特性的<a>元素

（2）、document.applets     包含文档中所有<applet>元素

（3）、document.forms       包含文档中所有的<form>元素

（4）、document.images      包含文档中所有的<img>元素

（5）、document.links          包含文档中所有带有href特性的<a>元素

2、Element类型（所有HTML元素都由HTMLElement类型表示）

元素标签element的属性有：

（1）、element.id   元素在文档中唯一的标识

（2）、element.title  有关元素的附加说明信息

（3）、element.lang  元素内容的语言代码

（4）、element.dir  语言方向  值有“ltr”和“rtl”

（5）、element.className  与元素的class属性对应

（6）element.attributes      返回特性列表也即对应的NamedNodeMap 与Nodelist类似，可以通过下标访问，也可以通过以下方法操作：

*element.attributes.getNameItem(name)    获取特性为name的属性

*element.attributes.removeNamedItem(name)  移除特性为name的节点

*element.attributes.setNamedItem(node)     向列表添加节点

*element.attributes.item(pos)     获取数字pos位置处的节点

3、Attr类型

三个属性：name、value、specified

每个特性节点都有一个specified属性，当为true时 ，代表是指定的属性，当为false时，代表未经设定的属性，也即是默认属性

4、Text类型

可以通过nodeValue属性或data属性访问Text节点中包含的文本。

一些操作文本节点的操作

appendData(text)    将text添加到节点的末尾

deleteData(offset, count)     从offset指定的位置开始删除count个字符

insertData(offset,  text)       在offset指定的位置插入text

replaceData(offset, count, text)   用text替换从offset指定位置开始到offset+count为止处的文本

splitText(offset)     从offset指定的位置将当前文本节点分成两个文本节点。

substringData(offset,count) 提取从offset指定位置开始到offset+count为止的字符串

5、Comment类型

Comment类型与Text类型继承来自相同的基类，因此它除了splitText()之外的所有字符串操作方法。与Text类型相似，也可以通过nodeValue或data属性来取得注释的内容。注释节点也可以通过其父节点来访问。

eg:

<div id="myid">

<!--这是注释-->

</div>

var div = document.getElementById("myid"),

comment = div.firstChild;

alert(comment.data);  //这是注释

6、CDATASection类型

CDATASection 类型只针对基于XML的文档，表示的是CDATA区域，与Comment类似，CDATASection类型继承自Text类型，因此拥有除了splitText（）之外的所有字符串操作方法。

ps: CDATA区域只会出现在XML文档中，因此多数浏览器都会把CDATA区域错误地解析为Comment或Element。

7、DocumentFragment类型

在所有节点类型中，只有DocumentFragment在文档中没有对应的标记，dom规定文档片段是一种“轻量级”的文档，可以包含和控制节点，不会像完整的文档那样占用额外的资源。它继承了Node的所有方法。

           子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference

ps：虽然不能将文档片段直接添加到文档中，但可以将它作为一个“仓库”使用，用来存储其他节点。

六、文档写入方法：

1、document.write()    原样写入文本

2、document.writeln()  写入文本后，末尾添加一个换行符

3、document.open()    打开网页的输入流

4、document.close()    关闭网页的输入流

（ps:参考javascript高级程序设计第三版，若有错漏，万望各位帮忙纠错，共同分享学习经验才有进步的。）

文档对象模型（DOM）的更多相关文章

  1. (84)Wangdao.com第十八天_JavaScript 文档对象模型 DOM

    文档对象模型 DOM DOM 是 JavaScript 操作网页的接口, 全称为“文档对象模型”(Document Object Model). 作用是将网页转为一个 JavaScript 对象,从而 ...

  2. 文档对象模型 DOM

    1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 文档对象模型 是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可 ...

  3. JavaScript文档对象模型(DOM)——DOM核心操作

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口. W3C已经定义了一系列DOM接口,通过这些DOM接口可 ...

  4. 文档对象模型-DOM(一)

    首先看一下DOM树结构: 每个节点都是一个对象,拥有方法和属性. 脚本可以访问以及更新DOM树(不是源代码). 针对DOM树的修改都会反映到浏览器. 访问并更新DOM树需要两个步骤:   一.定位到与 ...

  5. 文档对象模型-DOM(二)

    从NodeList中选择元素 方法一:item()方法,用于返回其中的单一节点,需要在方法的参数中指定所需元素的索引编号. 当其中没有任何元素时,执行代码是对资源的浪费.因此程序员会在执行代码之前,先 ...

  6. DOM（文档对象模型）

    1.定义: DOM是Document Object Model文档对象模型的缩写.是针对HTML和XML文档的一个API,通过DOM可以去改变文档. 例如:我们有一段HTML,那么如何访问第二层第一个 ...

  7. 文档对象模型（DOM）中的结点属性

    在文档对象模型中,每个结点都是一个对象.DOM结点有三个重要的属性:nodeName .nodeValue和nodeType,分别表示结点名称.结点的值和结点的类型 一.nodeName,结点名称,只 ...

  8. HTML DOM （文档对象模型）

    当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 通过可编程的对象模型,JavaScrip ...

  9. JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...

随机推荐

  1. 图片无法显示，载入制定url失败

    今天要做一个图片列表,因为是临时用的,就把图片存放在了img/linshi文件夹下,但是在网页上总是显示不了,提示载入制定url失败, 找了半天,把图片放在上级目录,img下立刻就能访问了.

  2. Distant Supervision for relation extraction without labeled data

    Distant Supervision for relation extraction without labeled data 远程监督:使用未标注语料做关系抽取 1. 背景: 关系抽取(某个人是否 ...

  3. 回到顶部js代码

    function go_to_top(){ //把内容滚动指定的像素数(第一个参数是向右滚动的像素数,第二个参数是向下滚动的像素数) window.scrollBy(0,-10); //延时递归调用, ...

  4. 简单linux块设备驱动程序

    本文代码参考<LINUX设备驱动程序>第十六章 块设备驱动程序 本文中的“块设备”是一段大小为PAGE_SIZE的内存空间(两个扇区,每个扇区512字节) 功能:向块设备中输入内容,从块设 ...

  5. Android Virtual Devices代理上网

    本机电脑是使用代理上网,然后要在avd中要连接互联网,设置步骤如下: Click on Menu Click on Settings Click on Wireless & Networks ...

  6. Linux下vi编辑器粘贴复制剪切功能

    RedHat 9.0 Linux下vi编辑器实现简单的粘贴复制剪切功能": 如果想把文件内的第三行内容黏贴到第十五行: 1.进入你的文件,(处于命令模式,而不是编辑模式) 2.将你的光标移到 ...

  7. C#读取xlsx文件Excel2007

    读取Excel 2007的xlsx文件和读取老的.xls文件是一样的,都是用Oledb读取,仅仅连接字符串不同而已. 具体代码实例: public static DataTable GetExcelT ...

  8. 打包程序tar

    tar  [选项] tar文件 [目录文件] 常用选项如下所述: -c:创建新的归档文件 -d:检查归档文件与指定目录的差异 -r:向归档文件中追加文件 -v:显示命令的执行日期 -u:只有当需要追加 ...

  9. scala学习笔记1

    一.REPL scala解释器读到一个表达式,对它进行求值,将它的打印出来,接着再继续读下一个表达式.这个过程被称作 读取-打印-循环,即REPL. 从技术上讲,scala程序并不是一个解释器.实际发 ...

  10. 选择两个字段时distinct位置的影响

    当选择两个字段时,例如:"select XX1, XX2 from tb; ",那么将distinct放在前一个字段XX1之前和放在后一个字段XX2之前,结果有什么不同呢? 先说结 ...