JavaScript操作DOM对象
DOM操作
DOM是Document Object Model 的缩写,即文档对象模型,是基于文档编程的一套API接口,1998年,W3C发布了第级的DOM规范.这个规范允许访问和操作HTML页面中的每个单独元素如网页的表格、图片、文本、表单元素等。由于大部分主流的浏览器都执行了这个标准,因此基本解决了浏览器兼容性的问题。
使用JavaScript操作DOM时分为三个方面: DOMCore (核心)、HTML-DOM 和CSS- -DOM。通过这些标准,开发人员可以让网页真正地动起来,动态地增加、修改、删除数据,使用户与计算机的交互更加便捷,交互也更加丰富,那么下面,大家就一起学 习JavaScript 操作DOM吧。
DOM 操作分类
使用JavaScript 操作DOM时通常分为三类: DOM Core (核心)、HTML -DOM和CSS-DOM。
DOM Core
DOMCoo不是JwsSeop的专属品,任何种支持DOM的编程语言都可以使用它,仅限于处理一种使 用标记语言编写出来的文档,如HTML。
在前面章节中学习过的gelElemenByd( ). getElementsByTagName(()等方法都是DOM Core的组成部分。例如,使用document. getElementsByTagName( "input” )可获取页面中的元素。
HTML -DOM
使用Joscsir和DOM为HTML文档编写脚本时,有许多专属的HTML -DOM属性,HTML-DOM出现的比DOM Core更早,它提供了一些更简单的标记来描述各种HTML元素的属性,如document. forms.获取表单对象。
需要提醒大家注意的是,获取DOM模型中的某些对象、属性,既可以使用DOM Core实现,也可以使用HTML -DOM实现,相对于DOMCore获取对象、属性而言,当使用HTML -DOM时,代码通常较为简短,只是它的应用范围没有DOM Core广泛,仅适用于处理HTML文档。
CSS-DOM
CSS DOM是针对CSs的操作,在JavaScript中,CSS -DOM技术的主要作用是获取和设置style对象的各种属性,即Css属性.通过改变style对象的各种属性,可以使用网页呈现出各种不同的效果,如element. style .color= “red””, 设置文本为红色。
以上大家知道了什么是DOM, DOM在网页制作中的作用,以及与JavaScir 相结合制作网页效果,下面来看看DOM中的节点及节点之间的关系。
节点和节点关系
DOM是以树状结构组织的HTML文档.根据DOM概念,我们可以知道,HTML 文档中每个标签或元素都是一一个节点,在DOM中是这样规定的。
整个文档是一个文档节点。
➢每个HTML 标签是一一个元素节点。
➢包含在 HTML元素中的文本是文本节点。
➢每个HTML 属性是一个属性节点。
➢注释属于注释节点。
-一个HTML文档是由各个不同的节点组成的,为了让大家理解文档结构,请看示例1的HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src=" images/ fruit. jpg" alt="KR" id="fruit"><h1>喜欢的水果</h1>
<p>DOM 应用</p>
</body>
</html>
示例1的文档由“hml、head. title. body. img. h1.p及文本节点组成,
这些节点都存在着层次关系,它们之间的关系如图3.1所示。``
使用父(paren)、 子(chid) 和同胞(sibling) 等术语来描述这些节点的层次关系,父节点拥有子节点,同级的子节点被称为同胞或兄弟节点,它们的关系如下。
➢在节点树中,顶部节点被称为根(root), 如 节点。
➢每个节点都有父节点,除了根(它没有父节点),如head和body的父节点都是html.文本节点"DOM应用”的父节点是p>\节点。
➢一个节点可以拥有任意数量的子节点,如body节点的子节点有img. h1和p.同胞节点是拥有相同父节点的节点,如img. h1和p就是兄弟节点,它们的父节点均为body节点。
由于HTML文档中的标签、元素等都是一个节点,并且各个节点之间都存在着关系,因此JavaScript可以通过访问或改变节点的方式来改变页面的内容,使用JavaScript 操作节点主要是访问节点、在文档中创建和增加节点、删除节点、替换节点,以及操作节点属性和样式等.下面首先学习一下如何访问节点。
访问节点
使用DOM Core访问HTML文档的节点主要有两种方式,- 一种是使用geElement系列方法访问指定节点,另外-种是根据节点的层次关系访问节点。
使用getElement系列方法访问指定节点
在Hm文档中,访问节点的标准方法就是我们之前学习的geElen 系列方法,即geElmenByred 1. geEenMaene(e )和geneneagNenee ).只是它们查找的方法略有不同。
➢getElementByld( ):返回按id属性查找的第一个对象的引用。
➢glenesByName( ):返回按带有指定名称name查找的对象的集合,由于一个文档中可能会有多个同名节点(如复选框、单选按钮), 因此返回的是元素数组。
➢getElementsByTagName( ):返回带有指定标签名TagName 查找的对象的集合,由于一个文档中可能会有多个同类型的标签节点(如图片组、文本输入框),因此返回元素数组。
根据层次关系访问节点
通过getElementByld( )、glenesByName( )和getElementsByTagName( )、这三种方法可查看HTML文档中的任何元素但是这三种方法都会忽略文档的结构, 因此在HTML DOM中提供了如表3-1所示的一些节点属性,这些属性可通镇文档的结构,在文档的局部进行“短距离地查找元素”。
表3-1节点属性
属性名称 | 描述 |
---|---|
parentNode | 返回节点的父节点 |
childNodes | 返回子节点集合,childNodes[i] |
firstChild | 返回节点的第一个子节点最普遍的用法是访问该元素的文本节点 |
lastChild | 返回节点的最后一个子节点 |
nextSibling | 下一个节点 |
previousSibling | 上一个节点 |
在JavaScript中给大家提供一组可 兼容不同浏览器的element 属性,可以消除这种因空行、换行等出现的无法准确访问到节点的情况。
element 属性如表3- 2所示。
表3-2 element 属性
属性名称 | 描述 |
---|---|
firstElementChild | 返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点 |
lastElementChild | 返回节点的最后一个子节点 |
nextElementSibling | 下一个节点 |
previousElementSibling | 上一个节点 |
在IE下支持firstChild、 lastChild、 previousSibling、 nextSibling, 但是在FireFox
下由于它会把标签之间的空格、换行等当成文本节点,因此为了准确地找到相应的元素,使用firstElementChild、lastElementChild、previousElementSibling、
nextElementSibling 来兼容浏览器。
节点信息
节点是DOM层次结构中的任何类型的对象的通用名称,每个节点都拥有包含着关于节点某些信息的属性,这些属性如下。
➢nodeName (节点名称)。
➢nodeValue (节点值)。
➢nodeType (节点类型)。
nodeName属性包含某个节点的名称,元素节点的nodeName 是标签名称,属性节点的nodeName是属性名称,文本节点的nodeName永远是#text,文档节点的nodeName永远是# document。
nodeValue节点值,对于文本节点,nodeValue 属性包含文本;对于属性节点,nodeValue 属性包含属性值; nodeValue 属性对于文档节点和元素节点是不可用的。
nodeType属性可返回节点的类型,是一个只读属性,如返回的是元素节点、文本节点、注释节点等,如表3-3所示。
表3-3节点类型
节点类型 | NodeType值 |
---|---|
元素element | 1 |
属性attr | 2 |
文本text | 3 |
注释comments | 8 |
文档document | 9 |
操作节点
在网页开发中,如果想动态地改变网页内容,如改变文档中一个图片的路径、动态增加一个图片、删除网页中的一些内容、动态改变网页内容样式,这些都需要对网页中的节点进行操作,主要是对节点属性、节点、节点样式进行操作,下面一一进行讲解。
操作节点的属性
HTMLDOM提供了获取及改变节点属性值的标准方法,如下所示。
getribute(“属性名~ ):用来获取属性的值。
settribute(“属性名“,“属性值” ): 用来设置属性的值。
下面使用访问节点的几种方法,结合getribute( )和sltAtribute( )来读取、设置属性的值,动态地改变页面内容,关键代码如示例4所示。
创建和插入节点
使用lvsScrer操作DOM有很多方法可以创建或增加一个新节点,主要方法如表3-4所示。
表3-4创建节点
描述 | 名称 |
---|---|
createElement( tagName) | 创建一个标签名为tagName的新元素节点 |
A. appendChild( B) | 把B节点追加至A节点的末尾 |
insertBefore( A,B ) | 把A节点插入B节点之前 |
cloneNode(deep) | 复制某个指定的节点 |
注意➢inereBefore(A.B)中有两个参数。 A是必选项,表示新插入的节点; B是可选项,表示新节点被插入B节点的前面。
cloneNode(deep)中的参数deep为布尔值,若deep值为true,则复制该节点及该节点的所有子节点,若deep值为false, 则只复制该节点和其属性。
删除和替换节点
使用Core HTML删除和替换节点的方法如表3-5所示。
表3-5删除和替换节 点的方法
名称 | 描述 |
---|---|
removeChild(node) | 删除指定的节点 |
replaceChild(newNode, oldNode) | 用其他的节点替换指定的节点 |
万法replaceChild(newNode oldNode)中的两个参数,newNode 是替换的新节点,oldNode 是要被替换的节点。
操作节 点样式
css在页面中应用得非常频繁,使用这些样式可以实现页面中不同样式的特效,但是这些特效都是静态的,不能随着鼠标指针的移动或者键盘操作来动态地改变,使页面实现更炫的效果。例如,当鼠标指针放在如图3.22所示的“我的购物车”上时,页面变为如图3.23所示的内容,当鼠标指针移出图片时,内容恢复,这样的效果怎样实现呢?其实我们可以使用已经学过的getElement 系列方法方问页面的节点,通过改变节点的样式属性,就可以实现这样的效果,在JaSrip中,有两种经下以态地改变村式的属性, 种是使用样式的slo属性, 另种是使用样式的 cassnmee性,下面主要介绍这两种属性的用法。
style属性
在HIML DOM中,style是一 个对象, 代表-一个单独的样式声明,可通过应用样式的文档或元素访问style对象,使用style属性改变样式的语法如下。
语法:HTML元素. style.样式属性=“值”;
在style对象中有许多样式属性,但是常用的样式属性主要是背景、文本、边框等,如表3-6所示。
表3-6 style 对象的常用属性
类别 | 属性 | 描述 |
---|---|---|
background (背景) | backgroundColor | 设置元素的背景颜色 |
backgroundImage | 设置元素的背景图像 | |
backgroundRepeat | 设置是否及如何重复背景图像 | |
text (文本) | fontSize | 设置元素的字体大小 |
fontWeight | 设置字体的粗细 | |
textAlign | 排列文本 | |
textDecoration | 设置文本的修饰 | |
font | 设置同一行字体的属性 | |
color | 设置文本的颜色 | |
padding (边距) | padding | 设置元素的填充 |
paddingTop | 设置元素的上填充 | |
paddingBottom | 设置元素的下填充 | |
paddingLeft | 设置元素的左填充 | |
paddingRight | 设置元素的右填充 | |
border (边框) | border | 设置四个边框的属性 |
borderTop | 设置上边框的属性 | |
borderBottom | 设置下边框的属性 | |
borderLeft | 设置左边框的属性 | |
borderRight | 设置右边框的属性 |
使用这些样式可以动态地改变背景、字体的大小、颜色等。例如,浏览网站时经常遇到的菜单特效,当鼠标指针移到菜单上时,菜单的背景、字体颜色、样式、大小等发生变化。对于如图3.22和图3.23所示的购物车特效,可以使用style属性来实现,但是如何控制鼠标指针的移进移出呢?在前面的章节中已经学习过一些事件,
这些事件能够触发浏览器中的行为。例如,当单击某个按钮时,会调用一段JavaScript,在JavaScript中常用的事件如表3-7所示。
表3-7常用事件
名称 | 描述 |
---|---|
onclick | 当用户单击某个对象时调用事件 |
onmouseover | 鼠标移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
onmousedown | 鼠标按钮被按下 |
使用这些事件,可以实现鼠标指针在移至元素上、 移出元素时动态地改变页面的样式。
获取元素的样式
在上面的例子中学习了使用style 属性和className属性设置元素的样式,那么想要获取某个元素的属性值,该如何实现呢?在JavaScript中可以使用style属性获取样式的属性值,语法如下所示。
语法:HTML元素.style.样式属性;
获取元素的样式
在上面的例子中学习了使用style 属性和className属性设置元素的样式,那么想要获取某个元素的属性值,该如何实现呢?在JavaScript中可以使用style属性获取样式的属性值,语法如下所示。
语法:HTML元素.style.样式属性;
元素属性应用
表3-8中的一些属性可以获取滚动动状态下元素的一些属性。
表3-8 HTML 中元素的属性
属性 | 描述 |
---|---|
offsetLeft | 返回当前元素左边界到它上级元素的左边界的距离,只读属性 |
offsetTop | 返回当前元素上边界到它上级元素的上边界的距离,只读属性 |
offsetHeight | 返回元素的高度 |
offsetWidth | 返回元素的宽度 |
offsetParent | 返回元素的偏移容器,即对最近的动态定位的包含元素的引用 |
scrollTop | 返回匹配元素的滚动条的垂直位置 |
scrollLeft | 返回匹配元素的滚动条的水平位置 |
clientWidth | 返回元素的可见宽度 |
clientHeight | 返回元素的可见高度 |