DOM与节点详解

DOM与节点详解
DOM与节点详解

1. Attributes 存储节点的属性列表(只读)

2. childNodes 存储节点的子节点列表(只读)

3. dataType 返回此节点的数据类型

4. Definition 以DTD或XML模式给出的节点的定义(只读)

5. Doctype 指定文档类型节点(只读)

6. documentElement 返回文档的根元素(可读写)

7. firstChild 返回当前节点的第一个子节点(只读)

8. Implementation 返回XMLDOMImplementation对象

9. lastChild 返回当前节点最后一个子节点(只读)

10. nextSibling 返回当前节点的下一个兄弟节点(只读)

11. nodeName 返回节点的名字(只读)

12. nodeType 返回节点的类型(只读)

13. nodeTypedValue 存储节点值(可读写)

14. nodeValue 返回节点的文本(可读写)

15. ownerDocument 返回包含此节点的根文档(只读)

16. parentNode 返回父节点(只读)

17. Parsed 返回此节点及其子节点是否已经被解析(只读)

18. Prefix 返回名称空间前缀(只读)

19. preserveWhiteSpace 指定是否保留空白(可读写)

20. previousSibling 返回此节点的前一个兄弟节点(只读)

21. Text 返回此节点及其后代的文本内容(可读写)

22. url 返回最近载入的XML文档的URL(只读)

23. Xml 返回节点及其后代的XML表示(只读)

方法:

1. appendChild 为当前节点添加一个新的子节点,放在最后的子节点后

2. cloneNode 返回当前节点的拷贝

3. createAttribute 创建新的属性

4. createCDA TASection 创建包括给定数据的CDATA段

5. createComment 创建一个注释节点

6. createDocumentFragment 创建DocumentFragment对象

7. createElement 创建一个元素节点

8. createEntityReference 创建EntityReference对象

9. createNode 创建给定类型,名字和命名空间的节点

10. createPorcessingInstruction 创建操作指令节点

11. createTextNode 创建包括给定数据的文本节点

12. getElementsByTagName 返回指定名字的元素集合

13. hasChildNodes 返回当前节点是否有子节点

14. insertBefore 在指定节点前插入子节点

15. Load 导入指定位置的XML文档

16. loadXML 导入指定字符串的XML文档

17. removeChild 从子结点列表中删除指定的子节点

18. replaceChild 从子节点列表中替换指定的子节点

19. Save 把XML文件存到指定节点

20. selectNodes 对节点进行指定的匹配,并返回匹配节点列表

21. selectSingleNode 对节点进行指定的匹配,并返回第一个匹配节点

22. transformNode 使用指定的样式表对节点及其后代进行转换

23. transformNodeToObject 使用指定的样式表将节点及其后代转换为对象

*********************************

DOM(文档对象模型)

DOM(文档对象模型)概念的推出,这个API使HTML如虎添翼,但是有些学DHTML的朋友还是有些困挠,只是因为目前的手册的书写不太科学,是按字母

来分的,不便查阅.其实DOM中最关键是要掌握节点与节点之间的关系(between node andnode),想学习DHTML中的DOM千万不要从头到尾地看遍所

有的属性和方法,你有三国时张松的"过目不忘"的本领吗?没有吧,那就听我分析一下:

其实DOM教给我们的就是一个层次结构,你可以理解为一个树形结构,就像我们的目录一样,一个根目录,根目录下有子目录,子目录下还有子

目录……

根节点:

DOM把层次中的每一个对象都称之为节点(NODE),以HTML超文本标记语言为例:整个文档的一个根就是,在DOM中可以使用

document.documentElement来访问它,它就是整个节点树的根节点(ROOT)

子节点:

一般意义上的节点,根节点以下最大子节点就是主文档区了,要访问到body标签,在脚本中应该写:

document.body

body区以内所有的文本及HTML标签都是文档的节点,分别称为文本节点、元素节点(或者叫标签节点),大家知道HTML说到底只是文本而矣,

不论怎么样的网页必然由这两个节点组成,也只能由这两个节点组成

节点之间的关系:

节点之间的关系也是DOM中最重要的一个关节,如何正确地引用到节点对象,一定要清楚节点树各个节点的相互描述方式,在DHTML里,

Javascript脚本就用了各个节点对象的一整套方法和属性去描述另外的节点对象。

节点的绝对引用:

返回文档的根节点:document.documentElement

返回当前文档中被击活的标签节点:document.activeElement

返回鼠标移出的源节点:event.fromElement

返回鼠标移入的源节点:event.toElement

返回激活事件的源节点:event.srcElement

节点的相对引用:(设当前对节点为node) :

返回父节点:node.parentNode node.parentElement

返回子节点集合(包含文本节点及标签节点):node.childNodes

返回子标签节点集合:node.children

返回子文本节点集合:node.textNodes

返回第一个子节点:node.firstChild

返回最后一个子节点:https://www.360docs.net/doc/e317004115.html,stChild

返回同属下一个节点:node.nextSibling

返回同属上一个节点:node.previousSibling

节点的各种操作:(设当前的节点为node) {

新增标签节点句柄:

document.createElement(sNode) //参数为要新添的节点标签名,例:newnode=document.createElement("div");

}

1、添加节点:

追加子节点:

node.appendChild(oNode) //oNode为生新增的节点句柄,例:node.appendChild(newnode)

应用标签节点

node.applyElment(oNode,sWhere)//oNode为生新增的节点句柄,sWhere有两个值:outside / inside,加在当前节点外面还是里面

插入节点

inode.insertBefore()

node.insertAdjacentElement()

node.replaceAdjacentText()

2、修改节点:

删除节点

node.remove()

node.removeChild()

node.removeNode()

替换节点

node.replaceChild()

node.replaceNode()

node.swapNode()

2、复制节点:

返回复制复制节点引用

node.cloneNode(bAll)//bAll为布尔值,true / false 是否克隆该节点所有子节点

3、节点信息

是否包含某节点

node.contains()

是否有子节点

node.hasChildNodes()

下面为javascript操作xml

复制代码代码如下:

var doc = new ActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM")

//加载文档

//doc.load("b.xml");

//创建文件头

var p = doc.createProcessingInstruction("xml","version='1.0' encoding='gb2312'");

//添加文件头

doc.appendChild(p);

//用于直接加载时获得根接点

//var root = doc.documentElement;

//两种方式创建根接点

// var root = doc.createElement("students");

var root = doc.createNode(1,"students","");

//创建子接点

var n = doc.createNode(1,"ttyp","");

//指定子接点文本

//n.text = " this is a test";

//创建孙接点

var o = doc.createElement("sex");

o.text = "男"; //指定其文本

//创建属性

var r = doc.createAttribute("id");

r.value="test";

//添加属性

n.setAttributeNode(r);

//创建第二个属性

var r1 = doc.createAttribute("class");

r1.value="tt";

//添加属性

n.setAttributeNode(r1);

//删除第二个属性

n.removeAttribute("class");

//添加孙接点

n.appendChild(o);

//添加文本接点

n.appendChild(doc.createTextNode("this is a text node.")); //添加注释

n.appendChild(doc.createComment("this is a comment\n")); //添加子接点

root.appendChild(n);

//复制接点

var m = n.cloneNode(true);

root.appendChild(m);

//删除接点

root.removeChild(root.childNodes(0));

//创建数据段

var c = doc.createCDATASection("this is a cdata");

c.text = "hi,cdata";

//添加数据段

root.appendChild(c);

//添加根接点

doc.appendChild(root);

//查找接点

var a = doc.getElementsByTagName("ttyp");

//var a = doc.selectNodes("//ttyp");

//显示改接点的属性

for(var i= 0;i

{

alert(a[i].xml);

for(var j=0;j

{

alert(a[i].attributes[j].name);

}

}

//修改节点,利用XPATH定位节点

var b = doc.selectSingleNode("//ttyp/sex");

b.text = "女";

//alert(doc.xml);

//XML保存(需要在服务端,客户端用FSO)

//doc.save();

//查看根接点XML

if(n)

{

alert(n.ownerDocument.xml);

}

///////////////////////////////////////////////////////////////////////////////////////////////////

用到了js操作节点,就一起查找了一下,作个总结,还能当字典使。区分大小写的哈~ 属性:(绝大部分都是只读的)

1 Attributes 存储节点的属性列表(只读)

2 childNodes 存储节点的子节点列表(只读)

3 dataType 返回此节点的数据类型

4 Definition 以DTD或XML模式给出的节点的定义(只读)

5 Doctype 指定文档类型节点(只读)

6 documentElement 返回文档的根元素(可读写)

7 firstChild 返回当前节点的第一个子节点(只读)

8 Implementation 返回XMLDOMImplementation对象

9 lastChild 返回当前节点最后一个子节点(只读)

10 nextSibling 返回当前节点的下一个兄弟节点(只读)

11 nodeName 返回节点的名字(只读)

12 nodeType 返回节点的类型(只读)

13 nodeTypedValue 存储节点值(可读写)

14 nodeValue 返回节点的文本(可读写)

15 ownerDocument 返回包含此节点的根文档(只读)

16 parentNode 返回父节点(只读)

17 Parsed 返回此节点及其子节点是否已经被解析(只读)

18 Prefix 返回名称空间前缀(只读)

19 preserveWhiteSpace 指定是否保留空白(可读写)

20 previousSibling 返回此节点的前一个兄弟节点(只读)

21 Text 返回此节点及其后代的文本内容(可读写)

22 url 返回最近载入的XML文档的URL(只读)

23 Xml 返回节点及其后代的XML表示(只读)

方法:

1 appendChild 为当前节点添加一个新的子节点,放在最后的子节点后

2 cloneNode 返回当前节点的拷贝

3 createAttribute 创建新的属性

4 createCDATASection 创建包括给定数据的CDAT A段

5 createComment 创建一个注释节点

6 createDocumentFragment 创建DocumentFragment对象

7 createElement 创建一个元素节点

8 createEntityReference 创建EntityReference对象

9 createNode 创建给定类型,名字和命名空间的节点

10 createPorcessingInstruction 创建操作指令节点

11 createT extNode 创建包括给定数据的文本节点

12 getElementsByTagName 返回指定名字的元素集合

13 hasChildNodes 返回当前节点是否有子节点

14 insertBefore 在指定节点前插入子节点

15 Load 导入指定位置的XML文档

16 loadXML 导入指定字符串的XML文档

17 removeChild 从子结点列表中删除指定的子节点

18 replaceChild 从子节点列表中替换指定的子节点

19 Save 把XML文件存到指定节点

20 selectNodes 对节点进行指定的匹配,并返回匹配节点列表

21 selectSingleNode 对节点进行指定的匹配,并返回第一个匹配节点

22 transformNode 使用指定的样式表对节点及其后代进行转换

23 transformNodeToObject 使用指定的样式表将节点及其后代转换为对象节点的绝对引用:

返回文档的根节点

document.documentElement

返回当前文档中被击活的标签节点document.activeElement

返回鼠标移出的源节点

event.fromElement

返回鼠标移入的源节点

event.toElement

返回激活事件的源节点

event.srcElement

节点的相对引用:(设当前对节点为node)

返回父节点

node.parentNode

node.parentElement

返回子节点集合(包含文本节点及标签节点)node.childNodes

返回子标签节点集合

node.children

返回子文本节点集合

node.textNodes

返回第一个子节点

node.firstChild

返回最后一个子节点

https://www.360docs.net/doc/e317004115.html,stChild

返回同属下一个节点

node.nextSibling

返回同属上一个节点

node.previousSibling

jquery中获得jq对象(dom对象集合)的方法

jquery对象访问。 Jq对象(dom对象集合)的Eq方法和jq选择器返回的都是是jquery对象,只能使用jquery 方法;Jq对象(dom集合)的get方法和“jq对象[i]”返回的是dom元素对象,只能使用dom方法。 Jq对象的find(selector |obj|ele)和children用来查找子对象和后代对象 Jq对象的find方法用于查找当前jq对象(dom集合)的后代对象,Jq对象的children方法用于查找当前jq对象(dom集合)的子对象对象。这两个方法都只能使用jq对象(dom对象集合)来调用,并且他们返回的也是jq对象。 Jq手册中的api方法都是js对象(dom集合)对象或者$对象的方法。只能使用jq对象(dom 集合)或者$来调用。如each,attr、val,find,children等等 Jq对象的index方法搜索当前集合中的匹配的元素,并返回相应元素的索引值,从0开始计数 如果不给index方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。 Jq选择器 1、个基本选择器: 基本选择器可以拼接一起来选择某组元素,原则: 对同一个元素描述的多个基本选择器中间没有任何间隔。 如div[name=aa]表示name属性等于aa的div元素(元素名选择器div和属性选择器[name=aa]中间没有任何间隔)。 div.cval表示class值等于cval的div元素,表示class值等于cval是div元素(类选择器.cval 和元素名选择器div之间同样没有任何间隔) #id值 .class值 元素名 //属性 [attr]具有aaa属性

HTML DOM简要教程

第一部分HTML DOM简介 1 DOM简介 HTML文档对象模型 HTML文档对象模型(Document Object Model)定义了访问和处理 HTML 文档的标准方法。HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。 什么是 DOM? 通过JavaScript,您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。 DOM 被分为不同的部分(核心、XML及HTML)和级别(DOM Level 1/2/3) DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。 ?Core DOM 定义了一套标准的针对任何结构化文档的对象 ?XML DOM定义了一套标准的针对XML 文档的对象 ?HTML DOM定义了一套标准的针对HTML 文档的对象 2 DOM节点 节点 根据 DOM,HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的: ?整个文档是一个文档节点 ?每个HTML 标签是一个元素节点 ?包含在HTML 元素中的文本是文本节点 ?每一个HTML 属性是一个属性节点 ?注释属于注释节点 Node层次 节点彼此都有等级关系。 HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。 下面这个图片表示一个文档树(节点树): 3 DOM节点树 文档树(节点数)

javascript_dom

什么是DOM? 通过JavaScript,您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西,JavaScript就需要对HTML文档中所有元素进行访问的入口。这个入口,连同对HTML元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。 在1998年,W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中的每一个单独的元素。 所有的浏览器都执行了这个标准,因此,DOM的兼容性问题也几乎难觅踪影了。 DOM可被JavaScript用来读取、改变HTML、XHTML以及XML文档。 DOM被分为不同的部分(核心、XML及HTML)和级别(DOM Level 1/2/3): Core DOM 定义了一套标准的针对任何结构化文档的对象 XML DOM 定义了一套标准的针对XML文档的对象 HTML DOM 定义了一套标准的针对HTML文档的对象。 HTML DOM 节点 HTML文档中的每个成分都是一个节点。 节点 根据DOM,HTML文档中的每个成分都是一个节点。 DOM是这样规定的: ?整个文档是一个文档节点 ?每个HTML标签是一个元素节点 ?包含在HTML元素中的文本是文本节点 ?每一个HTML属性是一个属性节点

注释属于注释节点 Node 层次 节点彼此都有等级关系。 HTML文档中的所有节点组成了一个文档树(或节点树)。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。 文档树(节点数) 请看下面这个HTML文档: DOM Tutorial

DOM Lesson one

Hello world! 上面所有的节点彼此间都存在关系。 除文档节点之外的每个节点都有父节点。举例, 和的父节点是节点,文本节点"Hello world!"的父节点是节点。 大部分元素节点都有子节点。比方说,节点有一个子节点:节点。<title>节点也有一个子节点:文本节点"DOM Tutorial"。 当节点分享同一个父节点时,它们就是同辈(同级节点)。比方说,<h1>和是同辈,因为它们的父节点均是<body>节点。 节点也可以拥有后代,后代指某个节点的所有子节点,或者这些子节点的子节点,以此类推。比方说,所有的文本节点都是<html>节点的后代,而第一个文本节点是<head>节点的后代。 节点也可以拥有先辈。先辈是某个节点的父节点,或者父节点的父节点,以此类推。比方说,所有的文本节点都可把<html>节点作为先辈节点。</p><h2>DOM获取节点的三种常用方法</h2><p>Dom对象的常用方法: (1)getElementById() 查询给定ID属性值的元素,返回该元素的元素节点 1、查询给定ID属性值的元素,返回该元素的元素节点。也称为元素对象。 2、因为在一个html页面中id的值是唯一的,所以返回值也是唯一的。所以方法的名称为getElementById()而不是getElementsById() 3、该方法只能用于document对象,类似与java的static关键字。 (2)getElementsByName()查找给定name属性的所有元素,这个方法将返回一个节点集合,也可以称为对象集合 1、查找给定name属性的所有元素,这个方法将返回一个节点集合,也可以称为对象集合。 2、这个集合可以作为数组来对待,length属性的值表示集合的个数。 3、因为在html页面中,name不能唯一确定一个元素,所以方法的名称为getElementsByName而不是getElementByName (3)getElementsByTagName()查询给定标签名的所有元素 1、查询给定标签名的所有元素 2、因为在html页面中,标签名不是唯一的,所以返回值为节点的集合。 3、这个集合可以当做数组来处理,length属性为集合里所有元素的个数 4、可以有两种形式来执行这个方法: 1、var elements =document.getElementsByTagName(tagName); 2、var elements = element.getElementsByTagName(tagName); 5、从这两种方法可以看出持有这个方法的对象并不一定是整个文档对象(document).也可以是某一个元素节点。 (4)hasChildNodes()该方法用来判断一个元素是否有子节点,返回值为true或者false 1、该方法用来判断一个元素是否有子节点 2、返回值为true或者false 3、文本节点和属性节点不可能再包含子节点,所以对于这两类节点使用ChildNodes()方法返回值永远为false. 4、如果hasChildNodes()返回值为false,则childNodes,firstChild,lastChild 将为空数组或者空字符串。 (5)nodeName 1.如果节点是元素节点,nodeName返回元素的名称 2.如果给定节点为属性节点,nodeName返回属性的名称 3.如果给定节点为文本节点,nodeName返回为#text的字符串 (6)nodeType 1、元素节点类型值为1 2、属性节点类型值为2</p><h2>XML DOM</h2><p>第六教案 课题:文档对象模型DOM 目的要求: ?理解DOM模型 ?解析XML文档,生成文档对象 ?操纵DOM模型的对象、接口、属性、方法、事件 重点难点: ?重点:使用DOM API提供的对象和接口对XML进行操作,主 要包括查询、添加、修改、删除接点等操作 ?难点:如何使用API 教学过程: 如图。 作业布置:</p><p>一、文档对象模型(DOM)概述 下面,我们将说明如何通过程序访问XML文档。其中一种方法是通过文档对象模型(Document Object Model,DOM)。在本章中,我们将介绍文档对象模型,并借助几个程序实例解释它的功能。 1.1什么是文档对象模型(DOM)? 文档对象模型一词在Web浏览器领域并不陌生。窗口、文档和历史等对象都被认为是浏览器对象模型的一部分。然而,任何做过Web开发的人都知道各种浏览器实现这些对象的方式不尽相同。对于如何通过Web访问和操作文档结构这个问题,为了创建更加标准化的方法,W3C提出了目前的W3C DOM规范。 W3C DOM是一种独立于语言和平台的定义,即:它定义了构成DOM的不同对象的定义,却没有提供特定的实现,实际上,它能够用任何编程语言实现。例如,为了通过DOM访问传统的数据存储,可以将DOM实现为传统数据访问功能之外的一层包装。利用DOM中的对象,开发人员可以对文档进行读取、搜索、修改、添加和删除等操作。DOM为文档导航以及操作HTML和XML文档的内容和结构提供了标准函数。 1.2常见的文档模型 常见的文档模型有三类: 线性模型、树型模型、对象模型。 DOM模型是对象模型。 1.3DOM的工作原理及DOM模型结构 当使用DOM对XML文本文件进行操作时,它首先要解析文件,将文件分解为</p><h2>DOM介绍</h2><p>DOM介绍 DOM是Document Object Model的缩写,即文档对象模型,是W3C组件推荐的处理XML的标准接口,定义了所有文档元素的对象和属性,以及访问它们的方法(接口)。W3C文档对象模型(DOM)定义了访问诸如XML和XHTML文档的标准,是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。 W3C DOM被分为3个不同的部分: ●核心DOM 用于任何结构化文档的标准模型 ●XML DOM 用于XML文档的标准模型 ●HTML DOM 用于HTML文档的标准模型 XML DOM定义了访问和处理XML文档的标准方法。XML DOM是XML D ocument Object Model的缩写,即XML文档对象模型,是用于获取、更改、添加或删除XML元素的标准。HTML DOM定义了所有HTML元素的对象和属性,以及访问它们的方法(接口)。 W3C文件对象模型(DOM)可以看作是一个平台或语言中立的(language-neu tral)界面,它允许程序和脚本动态的访问以及更新文档的内容、结构、脚本程序。在这里DOM仅仅只是一种对某种功能和结构的声明,告诉别的对象,具有什么样的概念定义。简单来看,DOM可以看作是一组API(Application Program Interface 即应用程序接口),它把HTML文档,XML文档等看成一个文档对象,在里面存放的是对这些文档操作的属性和方法的定义。DOM技术并不是首先用于XML文档,对于HTML文档来说,早就可以使用DOM来读取里面的数据了。 W3C DOM提供了一组描述HTML及XML文件的标准对象和一个用来访问和操作这类文件的标准界面。若以面向对象的思维来看,我们可以把HTML文档或X ML文档看成是一个对象,一个XML文档对象可以包含其它的对象,如节点对象。对XML文档对象的操作实际是对该对象的节点对象的操作,可以对对象进行修改等操作。在DOM中有相应的对象对应我们的实际上的XML文档的对象,那么也可以这样理解DOM,在DOM规范中提供了一组对象对文档结构的访问。 DOM是独立于程序设计语言的,W3C组织以IDL(Interface Definition Langua ge,接口定义语言)的形式定义了DOM中的接口。某种程序语言要实现DOM,需要将DOM接口转换为本语言中的适当结构,为了保证不同语言的不同的DOM之间实现广泛的兼容,W3C组织在DOM规范的附录部分提供了Java和ECMAScript 两种语言的绑定。在特定语言中使用DOM规范就需要定义DOM规范指定的接口,并给出实现这些接口的类的集合,这一过程称作语言绑定。本章讲述DOM规范的Java语言绑定。Java语言通过把DOM规范中的接口用Java的接口写下来,并给出实现这些接口的类集合来实现DOM规范的Java语言绑定。当然了,我们还可以使</p><h2>HTML DOM树的结构和访问</h2><p>一:概念 DOM是一种与平台和语言无关的接口,它允许程序和脚本动态访问和修改文档的内容、结构和类型。它定义了一系列的对象和方法对Html DOM树的节点进行各种随机操作。 二:Html DOM树 DOM(DocumentObjectModel)解析器将XML文档一次性解析,生成一个位于内存中的对象树用以描述该文档。 ◆Document对象:作为树的最高节点,Document对象是对整个文档进行操作的入口。 ◆Element和Attr对象:这些节点对象都是文档某一部分的映射,节点的定级层次恰好反映了文档的结构。 ◆Text对象:作为Element和Attr对象的子节点,Text对象表达了元素或属性的文本内容。Text节点不再包含任何子节点。 ◆集合索引:DOM提供了几种集合索引方式,可以对节点按指定方式进行遍历。索引参数都是从0开始记数的。 Html DOM树中的所有节点都是从Node对象继承而来的。Node对象定义了一些最基本的属性和方法,利用这些方法可以实现对树的遍历,同时,根据属性还可以得知节点的名称、取值并判断其类型。 利用DOM,开发人员可以动态地创建XML、遍历文档、增加/删除/修改文档内容。DOM 提供的API与编程语言无关,所以对一些DOM标准中没有明确定义的接口,不同解析器的实现方法也可能有所差别。 三:Html DOM树的结构 加载文档大体上分为三步: 1.使用CreateObject方法创建分析器实例; 2.设置async属性为False,禁止异步加载,这样当文档加载完毕,控制权才会返回给调用进程,如果想获取文档加载状态,可以读取readyState属性值; 3.使用load方法加载指定文档。 XMLDOM还提供了一种loadXML的方法可以把XML字符串加载到Html DOM树中,使用时只要把XML字符串直接作为该方法的参数即可。</p><h2>JSP DOM介绍</h2><p>JSP DOM介绍 DOM是Document Object Model的缩写,即文档对象模型,是W3C组件推荐的处理XML的标准接口,定义了所有文档元素的对象和属性,以及访问它们的方法(接口)。W3C文档对象模型(DOM)定义了访问诸如XML和XHTML文档的标准,是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。 W3C DOM被分为3个不同的部分: ●核心DOM 用于任何结构化文档的标准模型。 ●XML DOM 用于XML文档的标准模型。 ●HTML DOM 用于HTML文档的标准模型。 XML DOM定义了访问和处理XML文档的标准方法。XML DOM是XML D ocument Object Model的缩写,即XML文档对象模型,是用于获取、更改、添加或删除XML元素的标准。HTML DOM定义所有HTML元素的对象和属性,以及访问它们的方法(接口)。 W3C文件对象模型(DOM)可以看作是一个平台或语言中立的(language-neu tral)界面,它允许程序和脚本动态的访问以及更新文档的内容、结构、脚本程序。在这里DOM仅仅只是一种对某种功能和结构的声明,告诉别的对象,具有什么样的概念定义。简单来看,DOM可以看作是一组API(Application Program Interface 即应用程序接口),它把HTML文档,XML文档等看成一个文档对象,在里面存放的是对这些文档操作的属性和方法的定义。DOM技术并不是首先用于XML文档,对于HTML文档来说,早就可以使用DOM来读取里面的数据了。 W3C DOM提供了一组描述HTML及XML文件的标准对象和一个用来访问和操作这类文件的标准界面。若以面向对象的思维来看,可以把HTML文档或XML 文档看成是一个对象,一个XML文档对象可以包含其它的对象,如节点对象。对XML文档对象的操作实际是对该对象的节点对象的操作,可以对对象进行修改等操作。在DOM中有相应的对象对应实际的XML文档的对象,那么也可以这样理解DOM,在DOM规范中提供了一组对象对文档结构的访问。 DOM独立于程序设计语言,W3C组织以IDL(Interface Definition Language,接口定义语言)的形式定义了DOM中的接口。某种程序语言要实现DOM,需要将DOM接口转换为本语言中的适当结构,为了保证不同语言的不同的DOM之间实现广泛的兼容,W3C组织在DOM规范的附录部分提供了Java和ECMAScript两种语言的绑定。在特定语言中使用DOM规范就需要定义DOM规范指定的接口,并给出实现这些接口的类的集合,这一过程称作语言绑定。本章讲述DOM规范的Java 语言绑定。Java语言通过把DOM规范中的接口用Java的接口写下来,并给出实现这些接口的类集合来实现DOM规范的Java语言绑定。当然了,我们还可以使用C</p><h2>js和DOM的区别</h2><p>JavaScript和HTML DOM的区别与联系区别: javascript JavaScript 是因特网上最流行的浏览器脚本语言。很容易使用!你一定会喜欢它的! JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。 HTML DOM HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML)。 HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法。 通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。 HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。 联系: 通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。 Javascript主要是利用HTML DOM去获得、改变、创建HTML元素,从而达到美化页面、操作页面元素的目标。因此,在Javascript中最常见的就是各种各样的HTML DOM元素以及它们各自的属性。除了这些DOM元素外,Javascript有自己的对象,例如数组。 简单说,可以认为Javascript主要是操纵HTML DOM。两者是不一样的。Javascript是语言,DOM是可以在各种语言中(不仅js,php也有的)动态修改文档的模型。 下面单独拉出JavaScript与DOM的关系给大家详解</p><h2>html对象属性大全</h2><p><! - - ... - -> 批注 <marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑动 <marquee behavior=scroll>...</marquee>预设卷动 <marquee behavior=alternate>...</marquee>来回卷动 <marquee direction=down>...</marquee>向下卷动 <marquee direction=up>...</marquee>向上卷动 <marquee direction=right></marquee>向右卷动 <marquee direction=left></marquee>向左卷动 <marquee loop=2>...</marquee>卷动次数 <marquee width=180>...</marquee>设定宽度 <marquee height=30>...</marquee>设定高度 <marquee bgcolor=FF0000>...</marquee>设定背景颜色 <marquee scrollamount=30>...</marquee>设定卷动距离 <marquee scrolldelay=300>...</marquee>设定卷动时间 <!>字体效果 <h1>...</h1>标题字(最大) <h6>...</h6>标题字(最小) <b>...</b>粗体字 <strong>...</strong>粗体字(强调) <i>...</i>斜体字 <em>...</em>斜体字(强调) <dfn>...</dfn>斜体字(表示定义) <u>...</u>底线 <ins>...</ins>底线(表示插入文字) <strike>...</strike>横线 <s>...</s>删除线 <del>...</del>删除线(表示删除) <kbd>...</kbd>键盘文字 <tt>...</tt> 打字体 <xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效) <plaintext>...</plaintext>固定宽度字体(不执行标记符号) <listing>...</listing> 固定宽度小字体 <font color=00ff00>...</font>字体颜色 <font size=1>...</font>最小字体 <font style =font-size:100 px>...</font>无限增大 <!>区断标记 <hr>水平线 <hr size=9>水平线(设定大小) <hr width=80%>水平线(设定宽度) <hr color=ff0000>水平线(设定颜色) <br>(换行) <nobr>...</nobr>水域(不换行)</p><h2>第二十一讲 JavaScript HTML DOM 对象(二)</h2><p>第二十一讲 JavaScript HTML DOM 对象(二) 一、HTML DOM 对象概述 HTML 文档对象模型(HTML Document Object Model)定义了访问和处理 HTML 文档的标准方法。通过 JavaScript可以重构整个 HTML 文档。包括添加、移除、改变或重排页面上的项目。 要改变页面的某个东西,JavaScript 就需要对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的。 在 1998 年,W3C 发布了第一级的 DOM 规范。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。目前所有的浏览器都执行了这个标准,因此,DOM 的兼容性问题也几乎难觅踪影了。 1.相关概念 1节点 DOM 是这样规定的:整个文档是一个文档节点;每个 HTML 标签是一个元素节点;包含在 HTML 元素中的文本是文本节点;每一个 HTML 属性是一个属性节点;注释属于注释节点。 因此根据 DOM的规定,我们可以认为在HTML 文档中的每个成分都是一个节点。 2Node 层次 节点彼此都有等级关系。HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。 下面这个图片表示一个文档树(节点树): 3文档树(节点数) 请看下面这个HTML文档:</p><h2>HTML DOM</h2><p>JavaScript HTML DOM<br>通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。<br>HTML DOM (文档对象模型)<br>当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。<br>HTML DOM 模型被构造为对象的树。<br>HTML DOM 树<br>通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。<br>? ? ? ?<br>JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有事件做出反应<br>查找 HTML 元素 通常,通过 JavaScript,您需要操作 HTML 元素。<br>为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:<br>通过 id 找到 HTML 元素 ? 通过标签名找到 HTML 元素 ? 通过类名找到 HTML 元素<br>?<br>通过 id 查找 HTML 元素<br>在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。<br><br></p><p>实例 本例查找 id="intro" 元素:<br>var x=document.getElementById("intro");<br>亲自试一试<br>如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。 如果未找到该元素,则 x 将包含 null。<br>通过标签名查找 HTML 元素<br>本例查找 id="main" 的元素,然后查找 "main" 中的所有 元素:<br>var x=document.getElementById("main"); var y=x.getElementsByTagName("p");<br>提示:通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。 HTML DOM 教程<br>改变 HTML<br>HTML DOM 允许 JavaScript 改变 HTML 元素的内容。 改变 HTML 输出流<br>JavaScript 能够创建动态的 HTML 内容: 今天的日期是: Wed Nov 19 2014 14:20:21 GMT+0800 (中国标准时间) 在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。 实例<br><!DOCTYPE html> <html> <body><br><br></p><h2>文档对象模型(DOM)</h2><p>文档对象模型(DOM) 文档对象模型(DOM)属于VBScript客户端扩展部分,在文档对象模型中提供了大量的对象,这些对象应用于浏览器上,这些对象在我们编写脚本时发挥着重要的作用。 当用户在浏览器中打开一个页面时,浏览器就会自动创建文档对象模型中的一些对象,这些对象存放了HTML页面的属性和其他的相关信息,因为这些对象在浏览器上运行,所以我们有时也称之为浏览器对象。浏览器对象的层次图如图3-10所示,这个文档对象模型是Navigator的文档对象模型。 图3-10 文档对象模型(DOM) 在这个层次图中,每个对象都是它的父对象的属性。例如,Window对象是Document 对象的父对象,所以在引用Document对象时使用Window.Document。在这里,Document 对象也就是Window对象的属性。 对于每一个页面,浏览器都会自动创建Window对象、Document对象、Location对象、Navigator对象、History对象。而基于这个层次结构,还可以创建其他对象。例如,如果在页面中有一个表单对象(名称为MyForm),那么在引用MyForm对象时,就可以使用Window.Document.MyForm。在这里可以看出,Document对象是Window对象的属性,而如果页面中存在form对象,那么,form对象也是Document对象的属性。 在VBScript中如果要引用某个对象的属性,必须通过整个对象属性的完整路径来进行引用,也就是说,必须指明这个对象的属性的所有父对象。 例如,假如在页面上表单对象的名称为MyForm,而在表单中有—个文本框,名称为MyTextBox,而我们希望能够获取这个文本框中的字符串,那么必须从最高一级对象──Window对象开始引用。引用方式如下所示:Window.Document.MyForm.MyTextBox.value。 3.6.2 Windows对象</p><h2>什么是BOM和DOM以及它们的区别</h2><p>BOM 即浏览器对象模型,是在客户端脚本核心的基础上实现的扩张API,通过该API可以使用脚本访问浏览器窗口及其文档对象的各个方面。 BOM从IE3.0/NS3.0开始引入 Window对象其实时BOM中所有对象的核心所有的对象都源自window对象,它表示整个浏览器窗口 DOM技术最初是针对XML文档的解析与控制而制定的技术规范,但可把HTML文档XML 化成XHTML文档使用DOM技术来访问WEB页面文档中的各类对象 DOM技术与XML技术密切相关,涉及的技术内容庞杂,学习难度较高,但掌握了BOM技术后再学习DOM技术就有一定的帮助。 不仅可以在JavaScript之类的脚本语言中使用DOM技术, 在Java之类的重量级程序设计语言中也广泛使用DOM技术 在BOM API中,把WEB浏览器的各个主要外显特性、WEB页面及其标记,内容等都封装成一个个对象,通过这些对象提供的成员访问窗口,文档,元素对象等,并在此基础上实现了对象的事件支持机制。所有BOM对象之间存在一定的关联关系 学习BOM技术主要就是学习如何利用客户端脚本使用BOM对象,通过这些封装的BOM 对象可实现很多DHTML功效。 BOM技术不是标准化的WEB技术,因浏览器而异。正因为如此大大限制了DHTML技术的应用领域和发展钱景。 不同浏览器实现的BOM技术并不统一,这是造成DHTML技术实现差异的主要原因,由此W3C在BOM技术的基础之上进行扩充与改善、优化,制定了新的统一技术规范标准,即DOM文档对象模型技术。 目前W3C为DOM技术规范制定了三个不同的级别,即DOM Level 1/2/3. IE5/NS6开始全面支持DOM Level1。 有时有人也把BOM技术称为DOM Level 0[W3C官方没有此说法] DOM技术的核心是把XML(包括XHTML)文档结构解析为树状结构,每个标记看作是一个节点Node.各节点之间存在某种关系,并通过这些关系来相互访问。 总而言之,W3C定义了一组与浏览器,编程语言无关的标准对象,利用这些对象方便的做HTML和XML文档。Document对象是window对象的一个属性。 DOM描述了组成文档对象的各种对象: Document[]; Anchors[]; Applets[]; Forms[](Elements[]) Embeds[] Links</p><h2>JS操作DOM元素属性和方法</h2><p>JS操作DOM元素属性和方法 Dom元素基本操作方法API,先记录下,方便以后使用。 W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM,JavaScript根本没有Web页面和构成页面元素的概念。文档中的每个元素都是DOM的一部分,这就使得JavaScript可以访问元素的属性和方法。 DOM独立于具体的编程语言,通常通过JavaScript访问DOM,不过并不严格要求这样。可以使用任何脚本语言来访问DOM,这要归功于其一致的API。表3-1列出了DOM元素的一些有用的属性,表3-2列出了一些有用的方法。 表3-1用于处理XML文档的DOM元素属性 属性名描述 childNodes返回当前元素所有子元素的数组 firstChild返回当前元素的第一个下级子元素 lastChild返回当前元素的最后一个子元素 nextSibling返回紧跟在当前元素后面的元素 nodeValue指定表示元素值的读/写属性 parentNode返回元素的父节点 previousSibling返回紧邻当前元素之前的元素 表3-2用于遍历XML文档的DOM元素方法 方法名描述 getElementById(id) (document) 获取有指定惟一ID属性值文档中的元素getElementsByTagName(name) 返回当前元素中有指定标记名的子元素的数组hasChildNodes() 返回一个布尔值,指示元素是否有子元素 getAttribute(name) 返回元素的属性值,属性由name指定 有了W3C DOM,就能编写简单的跨浏览器脚本,从而充分利用XML的强大功能和灵活性,将XML作为浏览器和服务器之间的通信介质。 从下面的例子可以看到,使用遵循W3C DOM的JavaScript来读取XML文档是何等简单。代码清单3-3显示了服务器向浏览器返回的XML文档的内容。这是一个简单的美国州名列表,各个州按地区划分。 表3-3 动态创建内容时所用的W3C DOM属性和方法 属性/方法描述 document.createElement(tagName) 文档对象上的createElement方法可以创建由tagName指</p><h2>完整的 HTML DOM 对象参考手册</h2><p>Browser 对象参考手册 点击以下链接,可以获得以下对象的更多信息,包括它们的集合、属性、方法以及事件。其中包含大量实例! 对象描述 Window JavaScript 层级中的顶层对象,表示浏览器窗口。Navigator包含客户端浏览器的信息。 Screen包含客户端显示屏的信息。 History包含了浏览器窗口访问过的 URL。 Location包含了当前 URL 的信息。 HTML DOM 对象参考手册 请点击下面的链接,学习更多有关对象及其集合、属性、方法和事件的知识。其中包含大量实例! 对象描述 Document代表整个 HTML 文档,可被用来访问页面中的所有元素Anchor代表 <a> 元素 Area代表图像映射中的 <area> 元素 Base代表 <base> 元素 Body代表 <body> 元素 Button代表 <button> 元素 Event代表某个事件的状态 Form代表 <form> 元素 Frame代表 <frame> 元素 Frameset代表 <frameset> 元素 Iframe代表 <iframe> 元素 Image代表 <img> 元素 Input button代表 HTML 表单中的一个按钮 Input checkbox代表 HTML 表单中的复选框 Input file代表 HTML 表单中的文件上传 Input hidden代表 HTML 表单中的隐藏域 Input password代表 HTML 表单中的密码域 Input radio代表 HTML 表单中的单选按钮 Input reset代表 HTML 表单中的重置按钮</p></div> <div class="rtopicdocs"> <div class="coltitle">相关主题</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> <li id="10316834"><a href="/topic/10316834/" target="_blank">dom对象</a></li> </ul> </div> </div> </div> </div> <div id="rightcol" class="viewcol"> <div class="coltitle">相关文档</div> <ul class="lista"> <li><a href="/doc/127094825.html" target="_blank">DOM接口</a></li> <li><a href="/doc/3717066669.html" target="_blank">DOM获取节点的三种常用方法</a></li> <li><a href="/doc/589944469.html" target="_blank">DOM介绍</a></li> <li><a href="/doc/7317624190.html" target="_blank">第6章 js DOM和事件处理</a></li> <li><a href="/doc/938548748.html" target="_blank">js获取DOM节点元素</a></li> <li><a href="/doc/bb3216888.html" target="_blank">文档对象模型(DOM)</a></li> <li><a href="/doc/d816168759.html" target="_blank">js第九章_dom编程详解篇</a></li> <li><a href="/doc/ec18087210.html" target="_blank">JS操作DOM元素属性和方法</a></li> <li><a href="/doc/0517341591.html" target="_blank">HTML文档对象模型(DOM)</a></li> <li><a href="/doc/3410150539.html" target="_blank">HTMLDOM详解</a></li> <li><a href="/doc/4414562373.html" target="_blank">文档对象模型(DOM)</a></li> <li><a href="/doc/6914283965.html" target="_blank">js和DOM的区别</a></li> <li><a href="/doc/916822803.html" target="_blank">第二十一讲 JavaScript HTML DOM 对象(二)</a></li> <li><a href="/doc/a818927033.html" target="_blank">DOM文档对象模型</a></li> <li><a href="/doc/dc1656284.html" target="_blank">DOM动态创建表格</a></li> <li><a href="/doc/e515245239.html" target="_blank">DOM文档对象模型介绍</a></li> <li><a href="/doc/f817165202.html" target="_blank">完整的 HTML DOM 对象参考手册</a></li> <li><a href="/doc/054651599.html" target="_blank">jquery中获得jq对象(dom对象集合)的方法</a></li> <li><a href="/doc/2614386159.html" target="_blank">javascript_dom</a></li> <li><a href="/doc/3518907441.html" target="_blank">XML DOM</a></li> </ul> <div class="coltitle">最新文档</div> <ul class="lista"> <li><a href="/doc/0f19509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li> <li><a href="/doc/0119509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li> <li><a href="/doc/9b19184372.html" target="_blank">自然教育课件</a></li> <li><a href="/doc/3019258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li> <li><a href="/doc/d819211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li> <li><a href="/doc/a419240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li> <li><a href="/doc/9d19184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li> <li><a href="/doc/8a19195909.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/8519195910.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/7f19336998.html" target="_blank">高中语文基础知识点总结大全</a></li> <li><a href="/doc/7119336999.html" target="_blank">超详细的高中语文知识点归纳</a></li> <li><a href="/doc/6619035160.html" target="_blank">高考语文知识点总结高中</a></li> <li><a href="/doc/6719035161.html" target="_blank">高中语文知识点总结归纳</a></li> <li><a href="/doc/4a19232289.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/3b19258758.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/2619396978.html" target="_blank">高中语文知识点归纳(大全)</a></li> <li><a href="/doc/2b19396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li> <li><a href="/doc/1419338136.html" target="_blank">高中语文基础知识点整理</a></li> <li><a href="/doc/ed19066069.html" target="_blank">化工厂应急预案</a></li> <li><a href="/doc/bd19159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li> </ul> </div> </div> <script> var sdocid = "ee4eaf3ab90d6c85ec3ac66e"; </script> <div class="clearfloat"></div> <div id="footer"> <div class="ft_info"> <a href="https://beian.miit.gov.cn">闽ICP备16038512号-3</a> <a href="/tousu.html" target="_blank">侵权投诉</a>  ©2013-2023 360文档中心,www.360docs.net | <a target="_blank" href="/sitemap.html">站点地图</a><br /> 本站资源均为网友上传分享,本站仅负责收集和整理,有任何问题请在对应网页下方投诉通道反馈 </div> <script type="text/javascript">foot()</script> </div> </body> </html>