JavaScript--5.对象编程DOM

来源：互联网发布：男神执事团类似网络剧编辑：程序博客网时间：2024/05/29 03:03

六、DOM技术

1. DOM概述

DOM是DocumentObject Model（文档对象模型）的缩写

Document（文档）

创建一个网页并将该网页添加到Web中，DOM就会根据这个网页创建一个文档对象。如果没有document（文档），DOM也就无从谈起。

Object（对象）

对象是一种独立的数据集合。例如文档对象，即是文档中元素与内容的数据集合。与某个特定对象相关联的变量被称为这个对象的属性。可以通过某个特定对象去调用的函数被称为这个对象的方法。

Model（模型）

模型代表将文档对象表示为树状模型。在这个树状模型中，网页中的各个元素与内容表现为一个个相互连接的节点。

DOM是与浏览器或平台的接口，使其可以访问页面中的其他标准组件。DOM解决了Javascript与Jscript之间的冲突，给开发者定义了一个标准的方法，使他们来访问站点中的数据、脚本和表现层对象。

(1)DOM分层

文档对象模型采用的分层结构为树形结构，以树节点的方式表示文档中的各种内容。先以一个简单的HTML文档说明一下。

<html>     <head>       <title>标题内容</title>    </head>     <body>       <h3>三号标题</h3>       <b>加粗内容</b>    </body> </html>

在文档对象模型中，每一个对象都可以称为一个节点(Node)，下面将介绍一下几种节点的概念。

根节点

在最顶层的<html>节点，称为是根节点。

父节点

一个节点之上的节点是该节点的父节点(parent)。例如，<html>就是<head>和<body>的父节点，<head>就是<title>的父节点。

子节点

位于一个节点之下的节点就是该节点的子节点。例如，<head>和<body>就是<html>的子节点，<title>就是<head>的子节点。

兄弟节点

如果多个节点在同一个层次，并拥有着相同的父节点，这几个节点就是兄弟节点(sibling)。例如，<head>和<body>就是兄弟节点，<he>和<b>就是兄弟节点。

后代

一个节点的子节点的结合可以称为是该节点的后代(descendant)。例如，<head>和<body>就是<html>的后代，<h3>和<b>就是<body>的后代。

叶子节点

在树形结构最底部的节点称为叶子节点。例如，“标题内容”、“3号标题”和“加粗内容”都是叶子节点。

(2)DOM级别

2.节点类型

关于节点的属性:

nodeType, nodeName,nodeValue在文档中,任何一个节点都有这 3个属性

nodeValue：返回给定节点的当前值(字符串). 可读写的属性

①. 元素节点, 返回值是 null.

②. 属性节点: 返回值是这个属性的值

③. 文本节点: 返回值是这个文本节点的内容

而 id, name,value是具体节点的属性.

(1)元素节点

在HTML中，<body>、<p>、<a>等一系列标记，是这个文档的元素节点。元素节点组成了文档模型的语义逻辑结构。

(2) 属性节点：元素节点.属性

元素节点的属性，可以通过属性的方式来操作

包含在元素节点中的内容部分，如<p>标签中的文本等等。一般情况下，不为空的文本节点都是可见并呈现于浏览器中的。

(3) 文本节点：

元素节点的子节点一部分，通常为文本

1 1 1 3

元素节点的属性，如<a>标签的href属性与title属性等等。一般情况下，大部分属性节点都是隐藏在浏览器背后，并且是不可见的。属性节点总是被包含于元素节点当中。

3. DOM对象结点属性

在DOM中通过使用节点属性可以对各节点进行查询，查询出各节点的名称、类型、节点值、子节点和兄弟节点等。

(1)访问指定节点

使用getElementById方法来访问指定id的节点，并用nodeName属性、nodeType属性和nodeValue属性来显示出该节点的名称、节点类型和节点的值。

1>获取元素节点:

2>属性节点，基本不获取:

3>获取元素的子节点

4>获取文本节点

                //1. 获取文本节点所在的元素节点       var bjNode = document.getElementById("bj");       //2. 通过 firstChild 定义为到文本节点       var bjTextNode = bjNode.firstChild;                    //3. 通过操作文本节点的 nodeValue 属性来读写文本节点的值.       alert(bjTextNode.nodeValue);       bjTextNode.nodeValue = "尚硅谷";

(2)遍历文档树

遍历文档树通过使用parentNode属性、firstChild属性、lastChild属性、previousSibling属性和nextSibling属性来实现。

4.节点的几种操作

(1)节点的创建

1>创建新节点

创建新的节点先通过使用文档对象中的createElement()方法和createTextNode()方法，生成一个新元素，并生成文本节点。最后通过使用appendChild()方法将创建的新节点添加到当前节点的末尾处。

appendChild()方法将新的子节点添加到当前节点的末尾。

语法：

obj.appendChild（newChild）

参数newChild表示新的子节点。

2>创建多个节点

创建多个节点通过使用循环语句，利用createElement()方法和createTextNode()方法生成新元素并生成文本节点。最后通过使用appendChild()方法将创建的新节点添加到页面上。

在上面的示例中，使用循环语句通过使用appendChild()方法，将节点添加到页面中。由于 appendChild()方法在每一次添加新的节点时都会刷新页面，这会使浏览器显得十分缓慢。这里可以通过使用createDocumentFragment()方法来解决这个问题。createDocumentFragment()方法用来创建文件碎片节点。

(2)节点的插入和追加

插入节点通过使用insertBefore方法来实现。insertBefore()方法将新的子节点添加到当前节点的末尾。

语法：

obj.insertBefore(new,ref)

p new：表示新的子节点。

p ref：指定一个节点，在这个节点前插入新的节点。

(3)节点的复制

复制节点可以使用cloneNode()方法来实现。cloneNode()方法用来复制节点。

语法：

obj. cloneNode(deep)

参数deep是一个Boolean值，表示是否为深度复制。深度复制是将当前当前节点的所有子节点全部复制，当值为true时表示深度复制。当值为false时表示简单复制，简单复制只复制当前节点，不复制其子节点

(4)节点的删除与替换

p 删除节点

删除节点通过使用removeChild方法来实现。removeChild()方法该方法用来删除一个子节点。

obj. removeChild(oldChild)

参数oldChild表示需要删除的节点。

p 替换节点

替换节点可以使用replaceChild方法来实现。replaceChild()方法用来将旧的节点替换成新的节点。

obj. replaceChild(new,old)

l new：替换后的新节点。

l old：需要被替换的旧节点。

5.获取文档中的指定元素

(1)通过元素的ID属性获取元素

使用document对象的getElementsById()方法可以通过元素的ID属性获取元素。例如，获取文档中id属性为userId的节点的代码如下：

document.getElementById("userId");

(2)通过元素的name属性获取元素

使用document对象的getElementsByName()方法可以通过元素的name属性获取元素，通常用于获取表单元素。与getElementsById()方法不同的是，使用该方法的返回值为一个数组，而不是一个元素。如果想通过name属性获取页面中唯一的元素，可以通过获取返回数组中下标值为0的元素进行获取。

本实例使用getElementById()方法实现在页面的指定位置显示当前日期。步骤如下：

（1）编写一个HTML文件，在该文件的<body>标记中添加一个id为clock的<div>标记，用于显示当前日期，关键代码如下：

<div id="clock">正在获取时间</div>

（2）编写自定义的JavaScript函数，用于获取当前日期，并显示到id为clock的<div>标记中，具体代码如下：

function clockon(){         varnow=new Date();                                                                                  //获取日期对象         varyear=now.getYear();                                                                   //获取年         varmonth=now.getMonth();                                                                    //获取月         vardate=now.getDate();                                                                           //获取日         varday=now.getDay();                                                                               //获取星期         varweek;         month=month+1;         vararr_week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");         week=arr_week[day];                                                                                //获取中文星期         time=year+"年"+month+"月"+date+"日"+week;                  //组合当前日期         vartextTime=document.createTextNode(time);                      //创建文本节点         document.getElementById("clock").appendChild(textTime);                  //显示系统日期}

（3）编写JavaScript代码，在页面载入后，调用clockon()方法，具体代码如下：

window.onload=clockon;

6. 与DHTML相对应的DOM

innerHTML属性被多数浏览器所支持，而innerText、outerHTML和outerText属性只有IE浏览器才支持。

(1)innerHTML和innerText属性

innerHTML属性声明了元素含有的HTML文本，不包括元素本身的开始标记和结束标记。设置该属性可以用于为指定的HTML文本替换元素的内容。

例如，通过innerHTML属性修改<div>标记的内容的代码如下：

<body><divid="clock"></div><scriptlanguage="javascript">         document.getElementById("clock").innerHTML="2011-<b>07</b>-22";</script></body>

innerText属性与innerHTML属性的功能类似，只是该属性只能声明元素包含的文本内容，即使指定的是HTML文本，它也会认为是普通文本，而原样输出。

使用innerHTML属性和innerText属性还可以获取元素的内容。如果元素只包含文本，那么innerHTML和innerText属性的返回值相同。如果元素既包含文本，又包含其他元素，那么这两个属性的返回值是不同

(2)outerHTML和outerText属性

outerHTML和outerText属性与innerHTML和innerText属性类似，只是outerHTML和outerText属性替换的是整个目标节点，也就是这两个属性还对元素本身进行修改。

下面以列表的形式给出对于特定代码通过outerHTML和outerText属性获取的返回值，

重点

1.javascript功能

1.向网页输出内容：document.write(" ");

2.获得已经存在的元素：document.getElementByid(“”)

3.响应事件：onclick();onload()

4.数据验证：表单

2.修改元素

获得元素

1.修改网页文本：element.innerHTML= “新文本”

2.修改属性：element.属性 = “新属性”

3.修改样式：element.style.属性 = “新样式”

3.writeln()

Doucument.writeln()在<pre>中生效

0 0