本文详细介绍了JavaScript如何通过DOMCore、HTML-DOM和CSS-DOM操作HTML文档，包括节点分类、访问、创建、修改和样式设置。掌握这些技术，能实现网页内容的动态更新和视觉效果的控制。
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 | 返回元素的可见高度 |
92
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
