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編程提升

使用c#強大的表達式樹實現對象的深克隆之解決循環引用的問題

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU啓動那些事（12.A）- uSDHC eMMC啓動時間(RT1170)

本地SSL證書過期輸入命令在IIS自動生成

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

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

Oracle 第1章 Oracle入門

Oracle 9i 的安裝與卸載

Oracle 第3章鎖、表分區

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

linux以太網驅動總結