dom总结(2012.11.30)

最新推荐文章于 2023-03-13 16:50:39 发布

f369504543

最新推荐文章于 2023-03-13 16:50:39 发布

阅读量1.3k

点赞数 1

分类专栏： WEB 文章标签： DOM dom Dom

WEB 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

DOM

DOM分为HTML DOM和XML DOM两种。它们分别定义了访问和操作HTML/XML文档的标准方法，并将对应的文档呈现为带有元素、属性和文本的树结构（节点树）

1）DOM树定义了HTML/XML文档的逻辑结构，给出了一种应用程序访问和处理XML文档的方法。

2）在DOM树中，有一个根节点，所有其他的节点都是根节点的后代。

3) 在应用过程中，基于DOM的HTML/XML分析器将一个HTML/XML文档转换成一棵DOM树，应用程序通过对DOM树的操作，来实现对HTML/XML文档数据的操作。

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

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

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

• M：模型

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

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

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

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

DOM的结构

<html>:

<head>

</head>

<body>

<h1>DOM的结构</h1>

</body>

</html>

html是根节点，head，body是html的子节点，title是head的子节点，body是h1，p的父节点

节点

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

• 整个文档是一个文档节点

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

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

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

• 注释属于注释节点

Node 层次

l 节点彼此都有等级关系。

HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。

节点及其类型

l 节点

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

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

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

标签的属性是属性节点。

一切都是节点……

l 节点树

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

NODE接口的特性和方法

特性/方法	类型/返回类型	说明
nodeName	String	节点的名字；根据节点的类型而定义
nodeValue	String	节点的值；根据节点的类型而定义
nodeType	Number	节点的类型常量值之一
ownerDocument	Document	指向这个节点所属的文档
firstChild	Node	指向在childNodes列表中的第一个节点
lastChild	Node	指向在childNodes列表中的最后一个节点
childNodes	NodeList	所有子节点的列表
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

查找并访问节点

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

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

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

查找元素节点

1）getElementById()

var element = document.getElementById ( ID )

2）getElementsByName()

<input type="text" name="tname" value="国庆60年_1" /><br>

<input type="text" name="tname" value="国庆60年_2" /><br>

<input type="text" name="tname" value="国庆60年_3" /><br>

function test(){

var tnameArray=document.getElementsByName("tname");

alert(tnameArray.length);

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

window.alert(tnameArray[i].value);

}

3）getElementsByTagName()

var elements = document.getElementsByTagName(tagName);

var elements = element.getElementsByTagName(tagName);

或

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

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

alert(elements .length);

处理input

var inputElements=document.getElementsByTagName("input");

//输出input标签的长度

alert(inputElements.length);

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

if(inputElements[i].type!='button'){

alert(inputElements[i].value);

}

处理select

//获取select标签

var selectElements=document.getElementsByTagName("select");

//获取select下的子标签

for(var j=0;j<selectElements.length;j++){

var optionElements=selectElements[j].getElementsByTagName("option");

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

alert(optionElements[i].value);

}

一些常用的访问节点的属性及用法

parentNode：父节点、firstChil：第一个子节点、lastChild最后一个子节点

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

var booleanValue = element.hasChildNodes();

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

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

Document。documentElement：返回存在于 XML 以及 HTML 文档中的文档根节点

document.body ：是对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问

nodeName（节点名称）

nodeValue（节点值）

nodeType（节点类型）

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

nodeName 是一个只读属性。

案例：

获取节点的名称及value

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

<h1>

你好，kouxiaolin

</h1>

</body>

</html>

<scripttype="text/javascript">

<!--

window.onload=function(){

var root=document.documentElement;

alert("跟标签的名称："+root.nodeName);

var ss=root.firstChild;

alert("root的第一个子标签head："+ss.nodeName);

var ee=root.lastChild;

alert("root的最后一个子标签body："+ee.nodeName);

var body=document.body;

alert("body标签："+body.nodeName);

var h1=body.firstChild;

alert("body标签的第一个子标签h1："+h1.nodeName);

var tt=h1.firstChild;

alert("h1标签的子标签名称："+tt.nodeName);

alert("h1标签的文本内容："+tt.nodeValue);

}

// -->

</script>

遍历select中所有的option对象的文本值

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

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>

用户名:<input type="text" name="name" />

学历:<select id="edu" name="education">

</select>

</form>

</div>

用户的学历是：

</div>

</body>

</html>

或

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

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>

</html>

f369504543

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录