文檔對象模型DOM

時間 2019-11-12

標籤文檔對象模型 dom 欄目 HTML 简体版

原文原文鏈接

W3C（ World Wide Web Consortium，萬維網聯盟）推薦的處理標記語言文檔的標準編程接口APIjavascript

DOM提供了對HTML或XML文檔的訪問模型，將文檔做爲一個樹形結構，樹的每一個結點表示一個標籤或標籤內的文本項html

XML（eXtensible Markup Language）java

可擴展標記語言：經過用戶自定義的標籤，對數據進行結構化組織，用於數據交換node

DOM基礎－－什麼是DOM編程

DOM是一種與瀏覽器、語言無關的編程接口，用於訪問或修改XML文件中的內容瀏覽器

將XML（HTML）解析爲節點樹進行訪問：//html也是xml的一中，DOM對於html的解析和讀取也相當重要。app

DOM樹的節點類型：

Document－－頂層節點dom

Elementide

Attr－－屬性名和屬性值，沒有子節點函數

Text－－標籤與標籤之間的文本，沒有子節點

Node接口：定義節點對象的屬性和方法

nodeName String 節點的名字；根據節點的類型而定義

nodeType Number 節點的類型常量值之一

ownerDocument Document 指向這個節點所屬的文檔

firstChild Node 指向在childNodes列表中的第一個節點

previousSibling Node 指向前一個兄弟節點；若是這個節點就是第一個兄弟節點，那麼該值爲null

appendChild(node) 將node添加到childNodes的末尾

removeChild(node) 從childNodes中刪除node

BOM document ＝ HTML DOM document

var oHtml = document.documentElement; //<html>元素

訪問指定節點方法1：getElementsByTagName()

返回一個包含全部的tagName（標籤名）等於指定值的元素的NodeList，如：
var oImgs = document.getElementsByTagName("img");

var oPs = document. getElementsByTagName(「p」);

var oImgs = oPs[0]. getElementsByTagName(「img」);

訪問指定節點方法2：getElementsByName()

訪問指定節點方法3：getElementById() 返回id等於指定值的元素，效率最高

處理節點的屬性：

DOM定義了三個元素方法來幫助快速訪問屬性：

getAttribute(name)——等於attributes.getNamedItem(name).value； //顧名思義，得到屬性值。

setAttribute(name, newvalue)——等於attribute.getNamedItem(name).value = newvalue；

removeAttribute(name)——等於attributes.removeNamedItem(name)。 //刪除誰，直接說名字

建立和操做節點：

createElement()、createTextNode()、appendChild()

建立和操做節點：

removeChild()、replaceChild()和insertBefore() //appendChild是在已有節點以後插入節點

建立並加入文檔片斷：（適用於大量更新）

createDocumentFragment()

var oFragment = document.createDocumentFragment();

for (var i=0; i < arrText.length; i++) {

var oP = document.createElement("p");

var oText = document.createTextNode(arrText[i]);

oP.appendChild(oText);

oFragment.appendChild(oP);

}

document.body.appendChild(oFragment);

//實際上oFragment就不存在了，oFragment的子節點會變成插入的元素的直接子節點。

事件編程

事件是能夠被 JavaScript 偵測到的行爲，如鼠標單擊、頁面載入完成，交互式功能經過事件編程來實現

事件－－事件處理函數/監聽函數

響應某個事件而調用的函數稱爲事件處理函數

方法一：直接在代碼上加載事件

或者：

function createMsg() {

......}

</script>

方法二：使用DOM的方式獲取對象，並加載事件

window.onload = function() {

var element = document.getElementById('choices');

var anchors = element.getElementsByTagName('a');

for (var i=0; i < anchors.length; i++ ) {

anchors[i].onclick = popUpResult;}

//注意，onClick對應的是方法自己，而不是方法的結果，因此不要加（）！

}

popUpResult = function(evt){

var src = evt.srcElement; … …

}

方法三：使用標準的addEventListener方式和IE的attachEvent方式

try //標準方式

{ doms[i].addEventListener('mouseover',show_color,false);

doms[i].addEventListener('mouseout',hide_color,false);

}

catch(e) //IE方式

{ doms[i].attachEvent('onmouseover', show_color);

doms[i].attachEvent('onmouseout', hide_color);

}

事件對象在發生事件時建立，只有事件處理函數能夠訪問 e

IE中： oDiv.onclick = function(){

var oEvent = window.event; }

DOM中： oDiv.onclick = function(){

var oEvent = arguments[0]; }

或oDiv.onclick = function(oEvent)

//注意，在火狐中，不容許function(e){}這種事件樣式出現，要寫成標準的function(event e){}纔可以使其識別。

屬性和方法

altKey 是否按下alt鍵

button 按下鼠標的按鈕，1－左鍵，2－右鍵…

clientX，clientY 鼠標在客戶區中的位置

keyCode 按鍵代碼，Unicode字符

type 事件的名稱

srcElement 引發事件的元素

toElement 鼠標事件中，鼠標正在進入的元素

分爲：用戶操做事件（鼠標、鍵盤），瀏覽器HTML事件（網頁載入、表單提交等）

鼠標事件

click 左鍵單擊

dbclick 左鍵雙擊

mousedown 任一鍵單擊

mouseout 鼠標移出某個元素時

mousemove 在某個元素上時持續發生

鍵盤事件

keydown 鍵盤按鍵產生

keypress 按鍵併產生字符時產生

keyup 釋放按鍵產生

屬性

keyCode //鍵盤按鍵碼，如a和A都是65

charCode //Unicode字符

target（DOM）或者 srcElement（IE）

shiftKey、ctrlKey、altKey

瀏覽器HTML事件

load 頁面徹底載入後，window對象上觸發，<img/>徹底載入後，在其上觸發，<object/>元素徹底載入後，在其上觸發

error javascript出錯時

change 文本框內容發生變化時

submit 提交表單時，在<form/>上觸發

focus與blur 控件得到或失去焦點時

scroll 滾動條捲動時觸發

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。