JavaScript 第四章 DOM编程提拔

2012-10-23

JavaScript 第四章 DOM编程提升JavaScript 第三章 DOM编程基础使用document对象JavaScript 第五章 JavaSc

JavaScript 第四章 DOM编程提升

JavaScript 第三章 DOM编程基础使用document对象
JavaScript 第五章 JavaScript控制CSS

JavaScript 第四章 DOM编程提升

注意：各案例素材已提供下载

1、技术目标：

使用getElement系列方法实现DOM元素的查找和定位使用Core DOM标准操作实现节点的增删改查使用HTML DOM特有操作实现HTML元素内容修改

2、文档DOM树

先看一段HTML文档结构代码：

<html>
<head>
<title>DOM节点</title>
</head>
<body>
???? <img src="images/xxx.jpg" alt="JavaScript 第四章 DOM编程提拔" id="img1" />
???? <h1>喜欢的水果</h1>
???? <p>DOM应用</p>
</body>
</html>

整个HTML结构代码可以理解为树形结构，如图：

3、什么是DOM？

1998年W3C组织发布了第一级DOM规范，这个规范允许访问和操作
HTML页面中的每一个单独的元素，例如，网页中的表格、图片、文本
表单等元素，大部分主流浏览器都执行了这个标准

DOM由3部分组成，如下：

CORE DOM（核心DOM），定义了一套标准的，针对任何结构化文档的对象，适用于各种结构化文档，包括HTML、XHTML、XMLXML DOM，定义了一套标准的针对XML文档的对象，专用于XML文档HTML DOM，定义了一套标准的针对HTML文档的对象，专用于HTML文档

选用DOM标准接口，可使用支持的编程语言访问DOM树，
如Java、JavaScript、C#等

通过JavaScript和DOM相结合，我们可以重构整个HTML文档，
动态地在页面上添加、删除以及改变各种元素

4、使用CORE DOM可完成的操作

查看节点创建和增加节点删除和替换节点

5、查看节点操作

访问指定节点的方法：

getElementById( ) getElementsByName( )? getElementsByTagName( )

查看/修改节点属性：

getAttribute("属性名") setAttribute("属性名", "属性值")

示例代码：

?
问题：
访问某个元素的父元素，但又不知道父元素的ID、name、tag，如何处理？

比如：访问tr节点的子节点td，td节点的父节点tr
<table>
? <tr>
?????? <td>东方贺</td>
?????? <td>语文</td>
?????? <td>95</td>
? </tr>
</table>

方案：根据层次关系查找节点，使用节点的如下属性，
parentNodefirstChildlastChild
示例：
function checks(){
??? //获取table节点对象
??? var objTable=document.getElementById("myTable");
??? /*
????? 访问table节点下的最后一个子节点下的第一个子节点
?????? <table> -> <tbody> -> <tr> -> <td> -> 李刚
??? */
??? var strHtml = objTable.lastChild.firstChild.firstChild.innerHTML;
??? alert(strHtml);
}
</script>
……
<table id="myTable">
?<thead>
???? ……
?</thead>
?<tbody>
? <tr>
??? <td>李刚</td>
?????? ……
? </tr>
</tbody>
</table>

注意：<thead>、<tbody>和<tfood>标签用于表格数据的逻辑分组，W3C不推荐，Firefox浏览器不支持，IE支持

6、创建和增加节点操作

节点对象具有如下方法可用于创建、增加节点
createElement()：创建节点? appendChild()：末尾追加方式插入节点insertBefore()：在指定节点前插入新节点cloneNode()：克隆节点
示例代码：

?
7、删除和替换节点 

节点对象具有如下方法可用于删除、替换节点
removeChild()：删除节点? replaceChild()：替换节点
示例代码：

?
8、HTML DOM对象和操作

HTML文档中的每个节点都是DOM对象，每一类对象都有一套属性、方法，
比如，常用的节点有<table>表格和各类表单<form>元素的对象


9、操作表格对象

table表格对象<table>的属性、方法如下，

类别??? 名称??? ?????? ??? 描述
===============================================================
属性??? rows[]??? ???????? 返回包含表格中所有行的一个数组
方法??? insertRow()???? 在表格中插入一个新行
????????? deleteRow()??? 从表格中删除一行

表格中，行对象<tr>的属性、方法如下，

类别??? 名称??? ????????? 描述
===============================================================
属性??? cells[]??? ??????? 返回包含行中所有单元格的一个数组
????????? rowIndex?????? 返回该行在表中的位置
方法??? insertCell()???? 在一行中的指定位置插入一个空的<td>标签
????????? deleteCell()??? 删除行中指定的单元格

表格中，单元格对象<td>的属性、方法

类别??? 名称??? ????????? 描述
===============================================================
属性??? cellIndex?????? 返回单元格在某行单元格集合中的位置
????????? innerHTML??? 设置或返回单元格的开始标签和结束标签之间的HTML
????????? align??? ???????? 设置或返回单元格内部数据的水平排列方式
????????? className???? 设置或返回元素的class属性


使用1：对表格执行如下操作，



示例代码：

?
10、总结

W3C提供了DOM的哪三类标准？CORE DOM包括哪些常用的节点操作？方法分别是什么？CORE DOM、HTML DOM访问属性的方法分别是什么？HTML DOM对象table相关对象包括哪些？分别包含哪些常用的属性、方法？
JavaScript 第三章 DOM编程基础 使用document对象
JavaScript 第五章 JavaScript控制CSS

热点排行