DOM初步

来源：互联网发布：ubuntu root切换用户编辑：程序博客网时间：2024/05/21 22:27

DOM初步

一、DOM概述

文档对象模型定义了JavaScript可以进行操作的浏览器，描述了文档对象的逻辑结构和各功能部件的核心接口。主要包括以下方面：

1、核心JavaScript语言参考（数据类型、运算符、基本语句、函数等）

2、与数据类型相关的核心对象（String、Array、Date、Math等）

3、浏览器对象（window、location、history、navigator等）

4、文档对象（document、images、form等）

在DOM模型中，浏览器载入这个HTML文档时，它以树的形式进行描述，其中各HTML的每个标记都作为一个对象进行相关操作。

可以看出html为根元素对象，可以代表整个文档，head和body两个分支，位于同一层次为兄弟关系，存在同一父元素对象，但又有各自的子元素对象。

二、对象的属性和方法

1、何谓节点

节点是W3C DOM的基本构建块。当一个容器包含另一个容器时，对应的节点之间有父子关系。同时改节点树遵循HTML的结构化本质，如<html>元素包含<head>和<body>，前者又包含<title>，后者包含各种块元素。DOM定义了HTML文档中6种相关节点类型。所有支持W3C DOM的浏览器都实现了前三种常见类型。

具体来讲，DOM节点树中的节点有元素节点、文本节点和属性节点等三种不同的类型。

2、对象属性

属性一般定义对象的当前设置，在DOM模型中，文档对象有许多初始属性，可以是一个单词、数值或者数组，来自于产生对象的html标记的属性设置。

3、对象方法

对象方法是脚本给对象的命令，可以有返回值，也可以没有，且不是每个对象都有方法定义。DOM中定义了一系列行之有效的方法，让Web应用程序开发者真正做到随心所欲的操作HTML文档中的各个元素对象。

三、实例

<html>

<head>

window.onload = function() {

var root = document.documentElement;

alert(root.nodeName + " " + root.nodeType + " " + root.nodeValue);

var body = document.body;

alert(body.nodeName + " " + body.nodeType + " " + body.nodeValue);

var firstTag = body.firstChild;

alert(firstTag.nodeName + " " + firstTag.nodeType + " "

+ firstTag.nodeValue);

var f_childTag = firstTag.firstChild;

//var f_childTag = firstTag.lastChild;

alert(f_childTag.nodeValue + "(标签名)" + f_childTag.nodeValue + " "

+ f_childTag.nodeType);

var iid = document.getElementById("hn");

alert(iid.innerText);

var flag1 = iid.hasChildNodes();

if (flag1) {

alert("真");

} else {

alert("假");

}

var nodes = body.childNodes;

alert(nodes.length);

var lastTag = iid.lastChild;

alert(lastTag.nodeName + " " + lastTag.nodeType + " " + lastTag.nodeValue);

var flag2 = lastTag.hasChildNodes();

if (flag2) {

alert(flag2);

} else {

alert("false");

}

</script>

</head>

<body>

JavaScript进阶

</h1>

</body>

<html>