JavaScript中的DOM

. 關(guān)于DOM

文檔對(duì)象模型(DocumentObject Model)，是基于瀏覽器編程的一套API接口，W3C出臺(tái)的推薦標(biāo)準(zhǔn)，每個(gè)瀏覽器都有一些細(xì)微的差別，其中以Mozilla(火狐)的瀏覽器最與標(biāo)準(zhǔn)接近。

通過(guò) DOM，可以訪問(wèn)所有的 HTML元素，連同它們所包含的文本和屬性。可以對(duì)其中的內(nèi)容進(jìn)行修改和刪除，同時(shí)也可以創(chuàng)建新的元素。

2. 動(dòng)態(tài)改變文檔內(nèi)容

要想對(duì)頁(yè)面的內(nèi)容做修改，需要如下方式來(lái)操作：

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

? b.通過(guò)DOM提供的屬性和方法，獲取或改變文檔的內(nèi)容

2.1 DOM的節(jié)點(diǎn)

HTML 文檔中的每個(gè)成分都是一個(gè)節(jié)點(diǎn)（Node）

DOM 是這樣規(guī)定的：

整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)
每個(gè) HTML 標(biāo)簽是一個(gè)元素節(jié)點(diǎn)
包含在 HTML 元素中的文本是文本節(jié)點(diǎn)
每一個(gè) HTML 屬性是一個(gè)屬性節(jié)點(diǎn)
注釋屬于注釋節(jié)點(diǎn)

2.1.1 節(jié)點(diǎn)間的關(guān)系

節(jié)點(diǎn)彼此都有等級(jí)關(guān)系

父節(jié)點(diǎn)、子節(jié)點(diǎn)、兄弟節(jié)點(diǎn)（同級(jí)節(jié)點(diǎn)）

2.2 DOM標(biāo)準(zhǔn)接口

W3C提供了三類(lèi)DOM標(biāo)準(zhǔn)接口,如下：

? a. 核心DOM，適用于各種結(jié)構(gòu)化文檔

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

c. XML DOM,專用于XML文檔

3. 核心DOM操作

3.1 訪問(wèn)節(jié)點(diǎn)

訪問(wèn)節(jié)點(diǎn)兼容處理

getElement系列方法

使用getElement系列方法來(lái)訪問(wèn)指定的節(jié)點(diǎn)

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

3.1.1 節(jié)點(diǎn)信息1

每個(gè)節(jié)點(diǎn)都擁有包含節(jié)點(diǎn)某些信息的屬性

nodeName（節(jié)點(diǎn)名稱）
nodeValue（節(jié)點(diǎn)值）
nodeType（節(jié)點(diǎn)類(lèi)型）

3.1.2 節(jié)點(diǎn)信息2

nodeName

元素節(jié)點(diǎn)的 nodeName (節(jié)點(diǎn)名稱)是標(biāo)簽名稱
屬性節(jié)點(diǎn)的 nodeName 是屬性名稱
文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text
文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document

nodeValue

對(duì)于文本節(jié)點(diǎn)，nodeValue 屬性包含文本
對(duì)于屬性節(jié)點(diǎn)，nodeValue 屬性包含屬性值

nodeType

元素 1 、屬性 2、文本 3、注釋 8、文檔 9
上面不同的數(shù)值代表不同的節(jié)點(diǎn)類(lèi)型

3.2 創(chuàng)建和操作節(jié)點(diǎn)

3.2.1 主要方法

方法說(shuō) 明

createElement( tagName) 創(chuàng)建一個(gè)名為tagName的新元素節(jié)點(diǎn),用法Document.createElement(標(biāo)簽名)

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

insertBefore( ANode,BNode ) 把A節(jié)點(diǎn)插入到B節(jié)點(diǎn)之前

Node.loneNode(deep) deep為true則復(fù)制該節(jié)點(diǎn)以及該節(jié)點(diǎn)的所有子節(jié)點(diǎn)，為false則只復(fù)制該節(jié)點(diǎn)和其屬性

3.2.2 操作節(jié)點(diǎn)的屬性

3.3 刪除和替換節(jié)點(diǎn)

方法說(shuō) 明

removeChild( node) 刪除指定的節(jié)點(diǎn)(用父級(jí)元素去調(diào)用它)

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

3.3.1 removeChild()示例代碼如下

var tb = document.getElementById("tb");
//先找到要?jiǎng)h除的節(jié)點(diǎn)，這里要?jiǎng)h除一行
var tr = tb.lastChild.lastChild;
//這里也需要父節(jié)點(diǎn)操作子節(jié)點(diǎn)
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 = "我的內(nèi)容1";
td2.innerHTML = "我的內(nèi)容2";
tr.appendChild(td1);
tr.appendChild(td2);

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

3.4 其他

id,value等操作

innerHTML和innerText的區(qū)別

如果內(nèi)容中有html標(biāo)簽，使用innerHTML時(shí)，內(nèi)容中的html標(biāo)簽會(huì)被解析出來(lái)，而使用innerText時(shí)，html只會(huì)被當(dāng)作文本顯示出來(lái)

元素.style.樣式

className

3.5 示例

代碼1：

結(jié)果1：

代碼2：

結(jié)果2：

代碼3：

結(jié)果3：

4. HTML DOM操作

? HTML文檔中的每個(gè)節(jié)點(diǎn)，都是DOM對(duì)象,每個(gè)DOM對(duì)象都有屬于自己的屬性和方法.

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

? Table對(duì)象可以操作行對(duì)象，行對(duì)象可以操作單元格對(duì)象

4.1 table表格對(duì)象

類(lèi)別名稱描述

屬性 rows[] 返回包含表格中所有行的一個(gè)數(shù)組

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

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

4.2 row行對(duì)象

類(lèi)別名稱描述

屬性 cells[] 返回包含行中所有單元格的一個(gè)數(shù)組

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

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

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

另，對(duì)于單元格對(duì)象，還有cellIndex可以獲取單元格的索引號(hào)

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

Object 對(duì)象

Object 對(duì)象表示一個(gè) HTML <object> 元素。

訪問(wèn) Object 對(duì)象

您可以使用 getElementById() 來(lái)訪問(wèn) <object> 元素：

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

創(chuàng)建 Object 對(duì)象

您可以使用 document.createElement() 方法來(lái)創(chuàng)建 <object> 元素：

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

Object 對(duì)象屬性

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

標(biāo)準(zhǔn)屬性和事件

Object 對(duì)象同樣支持標(biāo)準(zhǔn) 屬性和事件。

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

OM操作

節(jié)點(diǎn)類(lèi)型

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

節(jié)點(diǎn)分為三個(gè)類(lèi)型

元素節(jié)點(diǎn) 如上述html中的p標(biāo)簽
屬性節(jié)點(diǎn) 如上述html中的title屬性，元素節(jié)點(diǎn)的屬性
文本節(jié)點(diǎn) 如上述html中的備注，元素節(jié)點(diǎn)的子節(jié)點(diǎn)

文檔加載順序

html的文檔是按照順序進(jìn)行加載的，如果將js寫(xiě)在<head>中，獲取<body>中節(jié)點(diǎn)時(shí)會(huì)獲取不到，使用兩種方式來(lái)解決這種情況

第一種方式：在<html>之后編寫(xiě)<script>

第二種方式：在<script>中使用window.onload來(lái)加載html文檔，加載完之后再去獲取html中的元素節(jié)點(diǎn)就可以獲取到

獲取節(jié)點(diǎn)

獲取元素節(jié)點(diǎn)

獲取id為content的節(jié)點(diǎn)，html中需要確保id值唯一

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

獲取li節(jié)點(diǎn)，使用標(biāo)簽名獲取節(jié)點(diǎn)的集合

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

屬于node的方法，可以使用任何節(jié)點(diǎn)來(lái)調(diào)用該方法

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

根據(jù)元素的name屬性獲取指定的節(jié)點(diǎn)集合

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

操作屬性節(jié)點(diǎn)

通過(guò)元素節(jié)點(diǎn) . 的當(dāng)時(shí)來(lái)獲取和設(shè)置

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

獲取元素節(jié)點(diǎn)的子節(jié)點(diǎn)

window.onload=function () {
  // 獲取city節(jié)點(diǎn)
  var city=document.getElementById("city");
  // 獲取city節(jié)點(diǎn)的所有l(wèi)i子節(jié)點(diǎn)
  var cityLiNode=city.getElementsByTagName("li");
  alert(cityLiNode.length);
}

節(jié)點(diǎn)的屬性

所有的節(jié)點(diǎn)都包含有nodeType、nodeName、nodeValue

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

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

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

創(chuàng)建節(jié)點(diǎn)

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

    // 創(chuàng)建一個(gè)文本節(jié)點(diǎn)
    var textNode=document.createTextNode("香港");
    // 將文本節(jié)點(diǎn)放入li元素節(jié)點(diǎn)中
    liNode.appendChild(textNode);
}

刪除節(jié)點(diǎn)

在線咨詢

上一篇：分享一個(gè)通用代碼-飄窗（兼容各種瀏覽器）
下一篇：2021年4月自考00900網(wǎng)頁(yè)設(shè)計(jì)與制作真題

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商