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

JavaScript 第四章 DOM编程提升

开源高性能结构化日志模块NanoLog

杭州的 IT 崩盘了么？

【简写Mybatis-02】注册机的实现以及SqlSession处理

手绘二维码

.NET借助虚拟网卡实现一个简单异地组网工具

JavaScript 第一章基本語法 1~3節

HTML 第六章 CSS + DIV實現整體佈局

Oracle 第1章 Oracle入門

Oracle 9i 的安裝與卸載

Oracle 第3章鎖、表分區

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結