`
HotStrong
  • 浏览: 509100 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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="图片" 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 = "&yen;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">&yen;30.00</td>
  </tr>
  <tr id="row3">
    <td>60个瞬间</td>
    <td class="center">&yen;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

 

 

5
6
分享到:
评论

相关推荐

    JavaScript 第三章 DOM编程基础 使用document对象

    总结,JavaScript的DOM编程是前端开发的基础技能,熟练掌握`document`对象的使用能帮助开发者灵活地操控网页内容。了解`visibility`和`display`的区别,以及如何在实际项目中应用,可以提升用户体验并实现更多交互...

    JavaScript DOM编程艺术【第2版&高清】.pdf

    但是,根据标题《JavaScript DOM编程艺术【第2版&高清】.pdf》和描述“JavaScript DOM编程艺术,高清资源,无比经典,值得拥有”,我们可以推断这本书主要讲述了JavaScript中DOM(文档对象模型)的相关编程技术。...

    JavaScript.DOM编程艺术(第2版)附录及源码.rar

    通过阅读《JavaScript.DOM编程艺术(第2版)》附录及源码,读者不仅能理论结合实践,还能接触到实际项目中的问题和解决方案,这对于提升JavaScript和DOM编程技能大有裨益。在学习过程中,不断练习和应用这些知识,将使...

    JavaScriptDOM编程艺术(第2版)PDF版本下载.txt

    根据提供的文件信息,我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术(第2版)》。尽管实际书籍内容并未给出,但从标题、描述及部分链接信息来看,这本书主要涉及JavaScript...

    经典之作javascript dom编程艺术源码

    通过学习并实践《JavaScript DOM编程艺术》中的源码,开发者能够掌握原生JavaScript对DOM的精细控制,从而提升网页交互的灵活性和性能。同时,理解并熟练运用这些知识点,对于开发高效、响应式的Web应用至关重要。在...

    JavaScriptDOM编程艺术第二版

    JavaScript DOM编程艺术第二版是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍,主要面向希望提升JavaScript技能并掌握网页动态效果开发的Web开发者。DOM是HTML和XML文档的编程接口,它允许...

    javascriptDom编程艺术+源码

    这本书和其配套源码对任何想在JavaScript和DOM编程方面提升自己的人都是宝贵的资源,无论是初学者还是有一定经验的开发者,都能从中受益。通过系统学习和实践,读者将能够熟练地利用JavaScript和DOM构建交互性强、...

    JavaScript DOM编程艺术 第2版

    《JavaScript DOM编程艺术 第2版》通过以上这些核心知识点的讲解,不仅能够帮助初学者快速上手,还能让有经验的开发者进一步提升自己的技能水平。这本书非常适合那些希望深入了解Web开发中DOM操作的读者阅读。

    JavaScript DOM编程艺术 第2版 及源码

    总的来说,《JavaScript DOM编程艺术 第2版》是一本深入浅出的JavaScript DOM教程,适合所有想要提升网页动态交互能力的开发者。通过学习这本书,你不仅可以掌握DOM的基本操作,还能了解到如何利用JavaScript和DOM来...

    JavaScript.DOM编程艺术(第2版) 2-4

    《javascript dom编程艺术:第2版》讲述了javascript、dom 和html5 的基础知识,着重介绍dom 编程技术背后的思路和原则:平稳退化、渐进增强和以... 《javascript dom编程艺术:第2版》适合web 设计师和开发人员阅读。

    javascript dom编程艺术 第2版 源码

    《JavaScript DOM编程艺术 第2版》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是Web页面的结构化表示,通过JavaScript,我们可以利用DOM来动态地操作HTML和XML文档,实现丰富的交互...

    JavaScript DOM编程艺术第二版(英文).pdf

    1. JavaScript基础:JavaScript作为一门编程语言,它的基本语法、数据类型、函数、对象等基础知识是学习DOM编程的前提。这本书可能会从这些基础概念讲起,逐步引导读者了解JavaScript的高级特性。 2. HTML和CSS知识...

    [JavaScript.DOM编程艺术(第2版)-高清扫描

    《JavaScript.DOM编程艺术(第2版)》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威指南。DOM是Web开发中的核心组件,它允许我们通过编程方式操作HTML和XML文档。这本书全面覆盖了使用JavaScript...

    JSDOM编程艺术代码.7z

    通过这个压缩包,读者可以亲手实践书中所讲的每一个示例,加深对JavaScript DOM编程的理解,提升实际开发技能。无论是初学者还是有一定经验的开发者,都能从中受益。对于希望掌握Web前端动态交互技术的人来说,这是...

    JavaScript DOM编程艺术(第二版)-含源码

    《JavaScript DOM编程艺术(第二版)》是一本深入讲解JavaScript与DOM交互的权威书籍,它包含了大量的实践示例和源代码,旨在帮助读者理解和掌握如何有效地操纵网页文档对象模型(DOM)。DOM是Web开发中的核心部分,它...

    JavaScript+DOM编程艺术

    第4章 案例研究:JavaScript美术馆  4.1 编写标记语言文档  4.2 编写JavaScript函数  4.3 JavaScript函数的调用  4.4 对JavaScript函数进行功能扩展  4.5 小结 第5章 JavaScript编程原则和良好习惯 ...

    Javascript DOM编程艺术 中文版

    **JavaScript DOM编程艺术 中文版**是一本深受程序员喜爱的JavaScript学习教材,专注于DOM...无论你是初学者还是有一定经验的开发者,这都是一本值得反复研读的书籍,能够帮助你提升JavaScript DOM编程的艺术水平。

    JavaScript+DOM编程艺术(二)

    第4章 案例研究:JavaScript美术馆  4.1 编写标记语言文档  4.2 编写JavaScript函数  4.3 JavaScript函数的调用  4.4 对JavaScript函数进行功能扩展  4.5 小结 第5章 JavaScript编程原则和良好习惯 ...

    JavaScript+DOM编程艺术(一)

    第4章 案例研究:JavaScript美术馆  4.1 编写标记语言文档  4.2 编写JavaScript函数  4.3 JavaScript函数的调用  4.4 对JavaScript函数进行功能扩展  4.5 小结 第5章 JavaScript编程原则和良好习惯 ...

Global site tag (gtag.js) - Google Analytics