JavaScript中的DOM

. 關于DOM

文檔對象模型(DocumentObject Model)，是基于瀏覽器編程的一套API接口，W3C出臺的推薦標準，每個瀏覽器都有一些細微的差別，其中以Mozilla(火狐)的瀏覽器最與標準接近。

通過 DOM，可以訪問所有的 HTML元素，連同它們所包含的文本和屬性。可以對其中的內容進行修改和刪除，同時也可以創建新的元素。

2. 動態改變文檔內容

要想對頁面的內容做修改，需要如下方式來操作：

? a.解析文檔（如HTML）并生成DOM樹

? b.通過DOM提供的屬性和方法，獲取或改變文檔的內容

2.1 DOM的節點

HTML 文檔中的每個成分都是一個節點（Node）

DOM 是這樣規定的：

整個文檔是一個文檔節點
每個 HTML 標簽是一個元素節點
包含在 HTML 元素中的文本是文本節點
每一個 HTML 屬性是一個屬性節點
注釋屬于注釋節點

2.1.1 節點間的關系

節點彼此都有等級關系

父節點、子節點、兄弟節點（同級節點）

2.2 DOM標準接口

W3C提供了三類DOM標準接口,如下：

? a. 核心DOM，適用于各種結構化文檔

? b.HTML DOM,專用于HTML文檔

c. XML DOM,專用于XML文檔

3. 核心DOM操作

3.1 訪問節點

訪問節點兼容處理

getElement系列方法

使用getElement系列方法來訪問指定的節點

getElementById():返回對擁有指定id的第一個對象的引用
getElementsByTagName():返回帶有指定名稱的對象集合
getElementsByClassName()：返回指定的類選擇器的集合
getElementsByName():返回帶有指定名稱的對象集合(注意不是所有標簽都有name屬性)

3.1.1 節點信息1

每個節點都擁有包含節點某些信息的屬性

nodeName（節點名稱）
nodeValue（節點值）
nodeType（節點類型）

3.1.2 節點信息2

nodeName

元素節點的 nodeName (節點名稱)是標簽名稱
屬性節點的 nodeName 是屬性名稱
文本節點的 nodeName 永遠是 #text
文檔節點的 nodeName 永遠是 #document

nodeValue

對于文本節點，nodeValue 屬性包含文本
對于屬性節點，nodeValue 屬性包含屬性值

nodeType

元素 1 、屬性 2、文本 3、注釋 8、文檔 9
上面不同的數值代表不同的節點類型

3.2 創建和操作節點

3.2.1 主要方法

方法說明

createElement( tagName) 創建一個名為tagName的新元素節點,用法Document.createElement(標簽名)

ANode.appendChild( BNode) 把子節點B追加到父節點A里面的末尾

insertBefore( ANode,BNode ) 把A節點插入到B節點之前

Node.loneNode(deep) deep為true則復制該節點以及該節點的所有子節點，為false則只復制該節點和其屬性

3.2.2 操作節點的屬性

3.3 刪除和替換節點

方法說明

removeChild( node) 刪除指定的節點(用父級元素去調用它)

replaceChild( newNode, oldNode) 用newNode來替換oldNode（https://www.cnblogs.com/zzq919101/p/6017152.html）

3.3.1 removeChild()示例代碼如下

var tb = document.getElementById("tb");
//先找到要刪除的節點，這里要刪除一行
var tr = tb.lastChild.lastChild;
//這里也需要父節點操作子節點
tr.parentNode.removeChild(tr);???

3.3.2 replaceChild()示例代碼

var tb = document.getElementById("tb");
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
td1.innerHTML = "我的內容1";
td2.innerHTML = "我的內容2";
tr.appendChild(td1);
tr.appendChild(td2);

//父節點操作子節點
//兩個參數，第一個表示新節點，第二個表示舊節點，這里用心節點替換舊節點
tb.lastChild.replaceChild(tr,tb.lastChild.firstChild);??

3.4 其他

id,value等操作

innerHTML和innerText的區別

如果內容中有html標簽，使用innerHTML時，內容中的html標簽會被解析出來，而使用innerText時，html只會被當作文本顯示出來

元素.style.樣式

className

3.5 示例

代碼1：

結果1：

代碼2：

結果2：

代碼3：

結果3：

4. HTML DOM操作

? HTML文檔中的每個節點，都是DOM對象,每個DOM對象都有屬于自己的屬性和方法.

? HTML DOM在操作表格時，我們把一個表格看成是一個table對象，那么一個table對象是由若干個行對象（row）組成的，而其中每個行對象又是由若干個單元格對象(cell)組成的

? Table對象可以操作行對象，行對象可以操作單元格對象

4.1 table表格對象

類別名稱描述

屬性 rows[] 返回包含表格中所有行的一個數組

方法 insertRow() 在表格中插入一個新行

方法 deleteRow() 從表格中刪除一行

4.2 row行對象

類別名稱描述

屬性 cells[] 返回包含行中所有單元格的一個數組

屬性 rowIndex 返回該行在表中的位置

方法 insertCell() 在一行中的指定位置插入一個空的<td>標簽

方法 deleteCell() 刪除行中指定的單元格

另，對于單元格對象，還有cellIndex可以獲取單元格的索引號

例如,這里需要在表格的末尾追加一行：

Object 對象

Object 對象表示一個 HTML <object> 元素。

訪問 Object 對象

您可以使用 getElementById() 來訪問 <object> 元素：

var x=document.getElementById("myObject");

創建 Object 對象

您可以使用 document.createElement() 方法來創建 <object> 元素：

var x=document.createElement("OBJECT");

Object 對象屬性

屬性	描述
align	HTML5 中不支持。使用 style.cssFloat 替代。設置或返回對象相對于周圍文本的對齊方式。
archive	HTML5 中不支持。設置或返回一個用于實現對象存檔功能的字符串。
border	HTML5 中不支持。使用 style.border 替代。設置或返回圍繞對象的邊框。
code	HTML5 中不支持。設置或返回文件的 URL，該文件包含已編譯的 Java 類。
codeBase	HTML5 中不支持。設置或返回組件的 URL。
codeType	HTML5 中不支持。
data
declare	HTML5 中不支持。
form	返回對對象的父表單的引用。
height	設置或返回對象的高度。
hspace	HTML5 中不支持。使用 style.margin 替代。設置或返回對象的水平外邊距。
name	設置或返回對象的名稱。
standby	HTML5 中不支持。設置或返回在加載對象時的消息。
type	設置或返回通過 data 屬性下載的數據的內容類型。
useMap
vspace	HTML5 中不支持。使用 style.margin 替代。設置或返回對象的垂直外邊距。
width	設置或返回對象的寬度。

標準屬性和事件

Object 對象同樣支持標準屬性和事件。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

OM操作

節點類型

<p title="remark">備注</p>

節點分為三個類型

元素節點如上述html中的p標簽
屬性節點如上述html中的title屬性，元素節點的屬性
文本節點如上述html中的備注，元素節點的子節點

文檔加載順序

html的文檔是按照順序進行加載的，如果將js寫在<head>中，獲取<body>中節點時會獲取不到，使用兩種方式來解決這種情況

第一種方式：在<html>之后編寫<script>

第二種方式：在<script>中使用window.onload來加載html文檔，加載完之后再去獲取html中的元素節點就可以獲取到

獲取節點

獲取元素節點

獲取id為content的節點，html中需要確保id值唯一

window.onload=function(){
  var content=document.getElementById("content");
}

獲取li節點，使用標簽名獲取節點的集合

var liNodes=document.getElementsByTagName("li");

屬于node的方法，可以使用任何節點來調用該方法

var content=document.getElementById("content");
var liNodes=content.getElementsByTagName("li");

根據元素的name屬性獲取指定的節點集合

var genders=document.getElementsByName("gender");

操作屬性節點

通過元素節點 . 的當時來獲取和設置

// 獲取元素節點
var nameNode=document.getElementById("name");
// 讀取屬性的值
var value=nameNode.value;
// 設置指定的屬性值
nameNode.value="你好";

獲取元素節點的子節點

window.onload=function () {
  // 獲取city節點
  var city=document.getElementById("city");
  // 獲取city節點的所有li子節點
  var cityLiNode=city.getElementsByTagName("li");
  alert(cityLiNode.length);
}

節點的屬性

所有的節點都包含有nodeType、nodeName、nodeValue

// 元素節點
var elementNode=document.getElementById("bj");
alert(elementNode.nodeType);  // 元素節點:1
alert(elementNode.nodeName);  // 節點名：li
alert(elementNode.nodeValue); // 元素節點沒有nodeValue屬性值：null

// 屬性節點
var attributeNode=elementNode.getAttributeNode("name");
alert(attributeNode.nodeType); //屬性節點：2
alert(attributeNode.nodeName); // 屬性節點的節點名：屬性名
alert(attributeNode.nodeValue); // 屬性節點的nodeValue屬性值 ： 屬性值

// 文本節點
var textNode=elementNode.firstChild;
alert(textNode.nodeType); //文本節點：3
alert(textNode.nodeName); // 文本節點的nodeName：#text
alert(textNode.nodeValue); // 屬性節點的nodeValue ：文本值

創建節點

// 新創建一個元素節點
window.onload=function () {
    // 創建li元素節點
    var liNode=document.createElement("li");
    // 獲取需要加入li節點的父節點
    var cityNode=document.getElementById("city");
    // 將li元素節點添加到父節點中
    cityNode.appendChild(liNode);

    // 創建一個文本節點
    var textNode=document.createTextNode("香港");
    // 將文本節點放入li元素節點中
    liNode.appendChild(textNode);
}

刪除節點

在線咨詢

上一篇：分享一個通用代碼-飄窗（兼容各種瀏覽器）
下一篇：2021年4月自考00900網頁設計與制作真題

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商