DOM简介

最新推荐文章于 2025-07-22 15:31:58 发布

原创最新推荐文章于 2025-07-22 15:31:58 发布 · 788 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#文档 #javascript #html #aptana #ajax框架 #attributes

DOM简介

一、Aptana简介

Aptana是一个非常强大,开源,专注于JavaScript的Ajax开发IDE它的特性包括

1、JavaScript,JavaScript函数,HTML,CSS语言的Code Assist功能

2、Outliner(大纲)：显示JavaScript,HTML和CSS的代码结构

3、支持 JavaScript，HTML，CSS代码提示，包括JavaScript 自定函数

4、代码语法错误提示。

5、支持Aptana UI自定义和扩展。

6、调试JavaScript

7、支持流行AJAX框架的 Code Assist功能:JQuery ext js dwr

二、DOM

(1)DOM： DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM 的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于

(2)任何编程语言.

D：文档 – html 文档或 xml 文档

O：对象 – document 对象的属性和方法

M：模型

DOM 是针对xml(html)的基于树的API。

DOM树:节点（node）的层次。

DOM 把一个文档表示为一棵家谱树（父，子，兄弟）

DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

(3)节点

根据 DOM，HTML 文档中的每个成分都是一个节点。DOM 是这样规定的：

整个文档是一个文档节点

每个 HTML 标签是一个元素节点

包含在 HTML 元素中的文本是文本节点

每一个 HTML 属性是一个属性节点

注释属于注释节点

(4)Node 层次

节点彼此都有等级关系。

HTML 文档中的所有节点组成了一个文档树（或节点树）。

HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。

树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止

(6)节点及其类型

节点

* 由结构图中我们可以看到，整个文档就是一个文档节点。

* 而每一个HMTL标签都是一个元素节点。

* 标签中的文字则是文本节点。

* 标签的属性是属性节点。

* 一切都是节点…

节点树

节点树的概念从图中一目了然，最上面的就是“树根”了。节点之间有父子关系，祖先与子孙关系，兄妹关系。这些关系从图中也很好看出来，直接连线的就是父子关系了。而有一个父亲的就是兄妹关系……

(7)NODE接口的特性和方法

特性/方法类型/返回类型说明

nodeName String 节点的名字；根据节点的类型而定义

nodeValue String 节点的值；根据节点的类型而定义

nodeType Number 节点的类型常量值之一

ownerDocument Document 指向这个节点所属的文档

firstChild Node 指向在childNodes列表中的第一个节点

lastChild Node 指向在childNodes列表中的最后一个节点

childNodesNode List 所有子节点的列表

previousSibling Node 指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null

nextSibling Node 指向后一个兄弟节点；如果这个节点就是最后一个兄弟节

点，那么该值为null

hasChildNodes() Boolean 当childNodes包含一个或多个节点时，返回真

attributes NamedNodeMap 包含了代表一个元素的特性的Attr对象仅用于 Element节点

appendChild(node) Node 将node添加到childNodes的末尾

removeChild(node) Node 从childNodes中删除node

replaceChild(newnode, oldnode) Node 将childNodes中的oldnode替换成 newnode

insertBefore(newnode, refnode) Node 在childNodes中的refnode之前插入newnode

(8)查找并访问节点

你可通过若干种方法来查找您希望操作的元素：

通过使用 getElementById() 和 getElementsByTagName() 方法

通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性

(9)查找元素节点

getElementById()

寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.

var oElement = document.getElementById ( sID )

该方法只能用于 document 对象

(10)查找元素节点

getElementsByName()

寻找有着给定name属性的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数

(11)查找元素节点

getElementsByTagName()

寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文

档里有着给定标签名的所有元素的总个数。

var elements = document.getElementsByTagName(tagName);

var elements = element.getElementsByTagName(tagName);

该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。

var container = document.getElementById(“sid”);

var elements = container.getElementsByTagName(“p”);

alert(elements .length);

(12)parentNode、firstChild以及lastChild

这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构，在文档中进行“短距离的旅行”。

请看下面这个 HTML 片段：

在上面的HTML代码中，第一个 <td> 是 <tr> 元素的首个子元素（firstChild），而最后一个 <td> 是 <tr>元素的最后一个子元素（lastChild）。

此外，<tr> 是每个 <td>元素的父节点（parentNode）。

(13)查看是否存在子节点

hasChildNodes()

该方法用来检查一个元素是否有子节点，返回值是 true 或 false.

var booleanValue = element.hasChildNodes();

文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.

如果 hasChildNodes 方法的返回值是 false，则childNodes,firstChild,lastChild 将是空数组和空字符串。

(14)根节点

有两种特殊的文档属性可用来访问根节点：

document.documentElement

document.body

第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。

第二个属性是对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问

(15)DOM节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

nodeName（节点名称）

nodeValue（节点值）

nodeType（节点类型）

(16)DOM属性---nodeName

nodeName 属性含有某个节点的名称。

var name = node.nodeName;

元素节点的 nodeName 是标签名称

属性节点的 nodeName 是属性名称

文本节点的 nodeName 永远是 #text

文档节点的 nodeName 永远是 #document

注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

(17)DOM 属性 -- nodeValue

nodeValue：返回给定节点的当前值（字符串）

如果给定节点是一个属性节点，返回值是这个属性的值。

如果给定节点是一个文本节点，返回值是这个文本节点的内容。

如果给定节点是一个元素节点，返回值是 null

nodeValue 是一个读/写属性，但不能对元素节点的 nodeValue 属性设置值，但可以为文本节点的 nodeValue 属性设置一个值。

var li = document.getElementById(“li”);

if(li.firstChild.nodeType == 3)

li.firstChild.nodeValue = “国庆60年”;

(18)DOM 属性 -- nodeType

nodeType：返回一个整数，这个数值代表着给定节点的类型。

nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种：

Node.ELEMENT_NODE ---1 -- 元素节点

Node.ATTRIBUTE_NODE ---2 -- 属性节点

Node.TEXT_NODE ---3 -- 文本节点

nodeType 是个只读属性

练习

（1）

window.onload = function(){

//通过docuemnt.documentElement获取根节点 ==>html

var root = document.documentElement;

alert(root.nodeName);//打印节点名称 HTML 大写

//获取body标签节点

var body = document.body;

alert(body.nodeName); //body节点的名称也是大写的

//获取body标签中的第一个子节点

var h1 = body.firstChild;

alert(h1.nodeType); //字节点的类型所有的标签都是元素节点

alert(h1.nodeValue);//元素节点的类型值是1

//获取body标签中的最后一个节点

var h1 = body.lastChild;

//节点的名称大写

alert(h1.nodeName);

//节点中的值,

//如果是元素节点(1)的值是Null

//文本节点(3)是文本内容

//属性节点(2)是属性值

alert(h1.nodeValue);

//直接获取body节点

var body = document.body;

//获取body节点的第一个子节点

var h1 = body.firstChild;

//通过id获取节点对象

var str = document.getElementById("h1");

//hasChildNodes()判断此节点是否有字节点如果有则为true否则为false

var flag = str.hasChildNodes();

alert(flag);

//childNodes:获取该节点的所有字节点的集合

var arr = str.childNodes;

//通过length属性打印节点集合的大小

alert(arr.length);

//通过lastChild获取str节点中的最后一个子节点

var txt = str.lastChild;

//nodeValue节点中的值,

//如果是元素节点(1)的值是null

//文本节点(3)是文本内容

//属性节点(2)是属性值

alert(txt.nodeValue);

/* 标签是元素节点元素节点的nodeValue值是null

那么可以通过以下方式简单获取元素节点中的内容：

通过innerHtml获取元素节点的内容===>原样内容是什么就是什么

通过innerText获取元素节点的内容===>去掉标签的内容

alert(str.innerHTML);

alert(str.innerText);

// Node nodeName nodeValue nodeType hasChildNodes childNodes

// lastChild firstChild

//理解了DOM的层次关系

}

</script>

</head>

<body>

<h1 id="h1">hello java</h1>

</body>

(2)

window.onload = function() {

//通过getElementById("edu")方法获取select的对象

var edus = document.getElementById("edu");

//通过select中options集合获取所有的option对象

var edus1 = edus.options;

var msg = "";

//遍历所有的option对象的文本值

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

msg += edus1[i].innerHTML + ",";

}

//把获取的msg信息写入到showMsg的div中

document.getElementById("showMsg").innerHTML = msg;

}

</script>

</head>

<body>

<div>

用户名:

学历:

大专生

</option>

本科生

</option>

硕士生

</option>

博士生

</option>

</select>

</form>

</div>

用户的学历是：

</div>

</body>

(3)

window.onload = function() {

//通过getElementById("edu")方法获取select的对象

var edus = document.getElementById("edu");

var edus1 = edus.childNodes;

alert(edus1.length);

var fc = edus.firstChild;

alert(fc.nodeName);

var lc = edus.lastChild;

alert(lc.nodeName);

var llc = lc.firstChild;

alert(llc.nodeValue);

var msg = "";

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

if (edus1[i].nodeType == 1)

msg += edus1[i].lastChild.nodeValue + ",";

}

document.getElementById("showMsg").innerHTML = msg;

}

</script>

</head>

<body>

<div>

用户名:

学历:

大专生

</option>

本科生

</option>

硕士生

</option>

博士生

</option>

</select>

</form>

</div>

用户的学历是：

</div>

</body>