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="图片" id="img1" />
<h1>喜欢的水果</h1>
<p>DOM应用</p>
</body>
</html>
整个HTML结构代码可以理解为树形结构,如图:
3、什么是DOM?
1998年W3C组织发布了第一级DOM规范,这个规范允许访问和操作
HTML页面中的每一个单独的元素,例如,网页中的表格、图片、文本
表单等元素,大部分主流浏览器都执行了这个标准
DOM由3部分组成,如下:
- CORE DOM(核心DOM),定义了一套标准的,针对任何结构化文档的对象,适用于各种结构化文档,包括HTML、XHTML、XML
- XML DOM,定义了一套标准的针对XML文档的对象,专用于XML文档
- HTML DOM,定义了一套标准的针对HTML文档的对象,专用于HTML文档
选用DOM标准接口,可使用支持的编程语言访问DOM树,
如Java、JavaScript、C#等
通过JavaScript和DOM相结合,我们可以重构整个HTML文档 ,
动态地在页面上添加、删除以及改变各种元素
4、使用CORE DOM可完成的操作
- 查看节点
- 创建和增加节点
- 删除和替换节点
5、查看节点操作
访问指定节点的方法:
- getElementById( )
- getElementsByName( )
- getElementsByTagName( )
查看/修改节点 属性 :
- getAttribute("属性名")
- setAttribute("属性名", "属性值")
示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>使用getAttribute读取节点的属性值</title> <style type="text/css"> img{ border: 0px; float: left; padding:3px; } body{ margin:0px; font-size:12px; line-height:20px; } input{ margin-top: 5px; } </style> <script type="text/javascript"> function hh(){ var hText=document.getElementById("fruit").getAttribute("src"); alert("图片的路径是:"+hText); } function check(){ var favor=document.getElementsByName("enjoy"); var like="你喜欢的水果是:"; for(var i=0;i<favor.length;i++){ if(favor[i].checked==true){ like+="\n"+favor[i].getAttribute("value"); } } alert(like); } function change(){ var imgs=document.getElementsByTagName("img"); imgs[0].setAttribute("src","images/grape.jpg"); } </script> </head> <body> <img src="images/fruit.jpg" alt="水果图片" id="fruit" /> <h1 id="love">选择你喜欢的水果:</h1> <input name="enjoy" type="checkbox" value="apple" />苹果 <input name="enjoy" type="checkbox" value="banana" />香蕉 <input name="enjoy" type="checkbox" value="grape" />葡萄 <input name="enjoy" type="checkbox" value="pear" />梨 <input name="enjoy" type="checkbox" value="watermelon" />西瓜 <br /> <input name="btn" type="button" value="显示图片路径" onclick="hh()" /> <br /><input name="btn" type="button" value="喜欢的水果" onclick="check()" /> <br /><input name="btn" type="button" value="改变图片" onclick="change()" /> </body> </html>
问题:
访问某个元素的父元素,但又不知道父元素的ID、name、tag,如何处理?
比如:访问tr节点的子节点td,td节点的父节点tr
<table>
<tr>
<td>东方贺</td>
<td>语文</td>
<td>95</td>
</tr>
</table>
方案: 根据层次关系查找节点,使用节点的如下属性,
- parentNode
- firstChild
- lastChild
示例:
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():克隆节点
示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>增加节点</title> <script type="text/javascript"> function newNode(){ var oldNode=document.getElementById("sixty1");//访问插入节点的位置 var image=document.createElement("img");//创建一个图片节点 image.setAttribute("src","images/newimg.jpg");//设置图片路径 document.body.insertBefore(image,oldNode);//插入图片到sixty1前面 } function copyNode(){ var image=document.getElementById("sixty1");//访问复制的节点 var copyImage=image.cloneNode(false);//复制指定的节点 document.body.appendChild(copyImage);//在页面最后增加节点 } </script> </head> <body> <h2>喜欢的水果</h2> <input id="b1" type="button" value="增加一幅图片" onclick="newNode()" /> <input id="b2" type="button" value="复制原图" onclick="copyNode()" /><br /> <img src="images/sixty1.jpg" id="sixty1" alt="水果" /> <img src="images/sixty2.jpg" id="sixty2" alt="果篮" /> </body> </html>
7、删除和替换节点
节点对象具有如下方法可用于删除、替换节点
- removeChild():删除节点
- replaceChild():替换节点
示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>删除节点</title> <script type="text/javascript"> function delNode(){ var dNode=document.getElementById("sixty1");//访问被删除的节点 document.body.removeChild(dNode);//删除图片 } function repNode(){ var oldimage=document.getElementById("sixty2");//访问被替换的节点 var newimage=document.createElement("img");//创建一个图片节点 newimage.setAttribute("src","images/repimg.jpg");//设置图片路径 document.body.replaceChild(newimage,oldimage);//替换原来的图片 } </script> </head> <body> <h2>喜欢的水果</h2> <input id="b1" type="button" value="删除图片" onclick="delNode()" /> <input id="b2" type="button" value="替换图片" onclick="repNode()" /><br /> <img src="images/sixty1.jpg" id="sixty1" alt="水果" /> <img src="images/sixty2.jpg" id="sixty2" alt="果篮" /> </body> </html>
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:对表格执行如下操作,
示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>使用HTML DOM操作表格</title> <style type="text/css"> body{ font-size:13px; line-height:25px; } table{ border-top: 1px solid #333; border-left: 1px solid #333; width:300px; } td{ border-right: 1px solid #333; border-bottom: 1px solid #333; } .center{ text-align:center; } .title{ text-align:center; font-weight:bold; background-color: #cccccc; } </style> <script type="text/javascript"> function addRow(){ var newRow = document.getElementById("myTable").insertRow(2); var col1 = newRow.insertCell(0); col1.innerHTML = "幸福从天而降"; var col2 = newRow.insertCell(1); col2.innerHTML = "¥18.5"; col2.align = "center"; } function updateRow(){ var uRow = document.getElementById("myTable").rows[0]; uRow.className = "title"; } function delRow(){ document.getElementById("myTable").deleteRow(1); } </script> </head> <body> <table border="0" cellspacing="0" cellpadding="0" id="myTable"> <tr id="row1"> <td>书名</td> <td>价格</td> </tr> <tr id="row2"> <td>看得见风景的房间</td> <td class="center">¥30.00</td> </tr> <tr id="row3"> <td>60个瞬间</td> <td class="center">¥32.00</td> </tr> </table> <input name="b1" type="button" value="增加一行" onclick="addRow()" /> <input name="b2" type="button" value="删除第2行" onclick="delRow()"/> <input name="b3" type="button" value="修改标题" onclick="updateRow()"/> </body> </html>
10、总结
- W3C提供了DOM的哪三类标准?
- CORE DOM包括哪些常用的节点操作?方法分别是什么?
- CORE DOM、HTML DOM访问属性的方法分别是什么?
- HTML DOM对象table相关对象包括哪些?分别包含哪些常用的属性、方法?
JavaScript 第三章 DOM编程基础 使用document对象
JavaScript 第五章 JavaScript控制CSS
相关推荐
总结,JavaScript的DOM编程是前端开发的基础技能,熟练掌握`document`对象的使用能帮助开发者灵活地操控网页内容。了解`visibility`和`display`的区别,以及如何在实际项目中应用,可以提升用户体验并实现更多交互...
但是,根据标题《JavaScript DOM编程艺术【第2版&高清】.pdf》和描述“JavaScript DOM编程艺术,高清资源,无比经典,值得拥有”,我们可以推断这本书主要讲述了JavaScript中DOM(文档对象模型)的相关编程技术。...
通过阅读《JavaScript.DOM编程艺术(第2版)》附录及源码,读者不仅能理论结合实践,还能接触到实际项目中的问题和解决方案,这对于提升JavaScript和DOM编程技能大有裨益。在学习过程中,不断练习和应用这些知识,将使...
根据提供的文件信息,我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术(第2版)》。尽管实际书籍内容并未给出,但从标题、描述及部分链接信息来看,这本书主要涉及JavaScript...
通过学习并实践《JavaScript DOM编程艺术》中的源码,开发者能够掌握原生JavaScript对DOM的精细控制,从而提升网页交互的灵活性和性能。同时,理解并熟练运用这些知识点,对于开发高效、响应式的Web应用至关重要。在...
JavaScript DOM编程艺术第二版是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍,主要面向希望提升JavaScript技能并掌握网页动态效果开发的Web开发者。DOM是HTML和XML文档的编程接口,它允许...
这本书和其配套源码对任何想在JavaScript和DOM编程方面提升自己的人都是宝贵的资源,无论是初学者还是有一定经验的开发者,都能从中受益。通过系统学习和实践,读者将能够熟练地利用JavaScript和DOM构建交互性强、...
《JavaScript DOM编程艺术 第2版》通过以上这些核心知识点的讲解,不仅能够帮助初学者快速上手,还能让有经验的开发者进一步提升自己的技能水平。这本书非常适合那些希望深入了解Web开发中DOM操作的读者阅读。
总的来说,《JavaScript DOM编程艺术 第2版》是一本深入浅出的JavaScript DOM教程,适合所有想要提升网页动态交互能力的开发者。通过学习这本书,你不仅可以掌握DOM的基本操作,还能了解到如何利用JavaScript和DOM来...
《javascript dom编程艺术:第2版》讲述了javascript、dom 和html5 的基础知识,着重介绍dom 编程技术背后的思路和原则:平稳退化、渐进增强和以... 《javascript dom编程艺术:第2版》适合web 设计师和开发人员阅读。
《JavaScript DOM编程艺术 第2版》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是Web页面的结构化表示,通过JavaScript,我们可以利用DOM来动态地操作HTML和XML文档,实现丰富的交互...
1. JavaScript基础:JavaScript作为一门编程语言,它的基本语法、数据类型、函数、对象等基础知识是学习DOM编程的前提。这本书可能会从这些基础概念讲起,逐步引导读者了解JavaScript的高级特性。 2. HTML和CSS知识...
《JavaScript.DOM编程艺术(第2版)》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威指南。DOM是Web开发中的核心组件,它允许我们通过编程方式操作HTML和XML文档。这本书全面覆盖了使用JavaScript...
通过这个压缩包,读者可以亲手实践书中所讲的每一个示例,加深对JavaScript DOM编程的理解,提升实际开发技能。无论是初学者还是有一定经验的开发者,都能从中受益。对于希望掌握Web前端动态交互技术的人来说,这是...
《JavaScript DOM编程艺术(第二版)》是一本深入讲解JavaScript与DOM交互的权威书籍,它包含了大量的实践示例和源代码,旨在帮助读者理解和掌握如何有效地操纵网页文档对象模型(DOM)。DOM是Web开发中的核心部分,它...
第4章 案例研究:JavaScript美术馆 4.1 编写标记语言文档 4.2 编写JavaScript函数 4.3 JavaScript函数的调用 4.4 对JavaScript函数进行功能扩展 4.5 小结 第5章 JavaScript编程原则和良好习惯 ...
**JavaScript DOM编程艺术 中文版**是一本深受程序员喜爱的JavaScript学习教材,专注于DOM...无论你是初学者还是有一定经验的开发者,这都是一本值得反复研读的书籍,能够帮助你提升JavaScript DOM编程的艺术水平。
第4章 案例研究:JavaScript美术馆 4.1 编写标记语言文档 4.2 编写JavaScript函数 4.3 JavaScript函数的调用 4.4 对JavaScript函数进行功能扩展 4.5 小结 第5章 JavaScript编程原则和良好习惯 ...
第4章 案例研究:JavaScript美术馆 4.1 编写标记语言文档 4.2 编写JavaScript函数 4.3 JavaScript函数的调用 4.4 对JavaScript函数进行功能扩展 4.5 小结 第5章 JavaScript编程原则和良好习惯 ...