618 阿裏雲技術社區[雲棲]

JS HTML DOM

HTML DOM(文檔對象模型)

通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素

當網頁被加載時，瀏覽器會創建頁麵的文檔對象模型（Document Object Model）。

通過可編程的對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML

JavaScript 能夠改變頁麵中的所有 HTML 元素

JavaScript 能夠改變頁麵中的所有 HTML 屬性

JavaScript 能夠改變頁麵中的所有 CSS 樣式

JavaScript 能夠對頁麵中的所有事件做出反應

查找 HTML 元素

通常，通過JavaScript，您需要操作 HTML 元素。為了做到這件事情，您必須首先找到該元素。有三種方法來做這件事：

1.通過 id 找到 HTML 元素

在 DOM 中查找 HTML 元素的最簡單的方法，是通過使用元素的 id

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

如果找到該元素，則該方法將以對象（在 x 中）的形式返回該元素。如果未找到該元素，則 x 將包含 null

2.通過標簽名找到 HTML 元素

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

3.通過類名找到 HTML 元素

var x=document.getElementsByClassName("intro");

HTML DOM 改變 HTML 內容

HTML DOM 允許 JavaScript 改變 HTML 元素的內容

改變 HTML 輸出流

JavaScript 能夠創建動態的 HTML 內容：

document.write(Date());//顯示今天的日期

絕對不要在文檔加載完成之後使用 document.write()。這會覆蓋該文檔

改變 HTML 內容

修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。

如需改變 HTML 元素的內容，請使用這個語法：

document.getElementById(id).innerHTML=new HTML

改變 HTML 屬性

如需改變 HTML 元素的屬性，請使用這個語法：

document.getElementById(id).attribute=new value

例如：

document.getElementById("image").src="landscape.jpg";

HTML DOM 改變 CSS

HTML DOM 允許 JavaScript 改變 HTML 元素的樣式

語法：

document.getElementById(id).style.property=new style

例如：

<script>
    document.getElementById("p2").style.color="blue";
</script>

<button type="button" >
Click Me!</button>

HTML DOM 事件

HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應

HTML 事件屬性

如需向 HTML 元素分配事件，您可以使用事件屬性。

//向 button 元素分配 onclick 事件：
<button >Try it</button>

在上麵的例子中，名為 displayDate 的函數將在按鈕被點擊時執行

使用 HTML DOM 來分配事件

HTML DOM 允許您使用 JavaScript 來向 HTML 元素分配事件：

//向 button 元素分配 onclick 事件：
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

在上麵的例子中，名為 displayDate 的函數被分配給 id=myButn" 的 HTML 元素。
按鈕點擊時Javascript函數將會被執行

onload 和 onunload 事件

onload 和 onunload 事件會在用戶進入或離開頁麵時被觸發

onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些信息來加載網頁的正確版本

onload 和 onunload 事件可用於處理 cookie。

<body >

onchange 事件

onchange 事件常結合對輸入字段的驗證來使用。

下麵是一個使用onchange的例子。當用戶改變輸入字段的內容時，會調用upperCase()函數

<input type="text"  onchange="upperCase()">

onmouseover 和 onmouseout 事件

onmouseover和onmouseout事件可用於在用戶的鼠標移至HTML元素上方或移出元素時觸發函數

<div  onmouseout="mOut(this)">Mouse Over Me</div>
<script>
    function mOver(obj){
        obj.innerHTML="Thank You"
    }
    function mOut(obj){
        obj.innerHTML="Mouse Over Me"
    }
</script>

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup以及onclick構成了鼠標點擊事件的所有部分。首先當點擊鼠標按鈕時會觸發onmousedown事件，當釋放鼠標按鈕時，會觸發onmouseup事件，最後，當完成鼠標點擊時，會觸發onclick事件

onfocus 事件

<script>
    function myFunction(x){
        x.style.background="yellow";
    }
</script>
輸入你的名字: <input type="text" onfocus="myFunction(this)">

HTML DOM EventListener

addEventListener() 方法

addEventListener()方法用於向指定元素添加事件句柄

addEventListener()方法添加的事件句柄不會覆蓋已存在的事件句柄

可以向一個元素添加多個事件句柄

可以向同個元素添加多個同類型的事件句柄，如：兩個 "click" 事件

可以向任何DOM對象添加事件監聽，不僅僅是HTML元素。如：window對象

addEventListener()方法可以更簡單的控製事件（冒泡與捕獲）

當你使用addEventListener()方法時, JavaScript從HTML標記中分離開來，可讀性更強，在沒有控製HTML標記時也可以添加事件監聽

你可以使用removeEventListener()方法來移除事件的監聽。

語法

element.addEventListener(event, function, useCapture);

第一個參數是事件的類型 (如 "click" 或 "mousedown")

第二個參數是事件觸發後調用的函數

第三個參數是個布爾值用於描述事件是冒泡還是捕獲。該參數是可選的

例如：

document.getElementById("myBtn").addEventListener("click", displayDate);

向原元素添加事件句柄

element.addEventListener("click", function(){ alert("Hello World!"); });

可以使用函數名，來引用外部函數:

element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

向同一個元素中添加多個事件句柄

addEventListener() 方法允許向同個元素添加多個事件，且不會覆蓋已存在的事件：

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

也可以向同個元素添加不同類型的事件：

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

向 Window 對象添加事件句柄

addEventListener()方法允許在HTML DOM對象添加事件監聽，HTML DOM對象如：HTML元素, HTML文檔, window對象。或者其他支出的事件對象如:xmlHttpRequest對象。

當用戶重置窗口大小時添加事件監聽：

window.addEventListener("resize", function(){//resize:重置瀏覽器窗口大小
    document.getElementById("demo").innerHTML = sometext;
});

傳遞參數

當傳遞參數值時，使用"匿名函數"調用帶參數的函數：

var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}

事件冒泡或事件捕獲

事件傳遞有兩種方式：冒泡與捕獲

事件傳遞定義了元素事件觸發的順序。如果你將 <p> 元素插入到<div>元素中，用戶點擊<p>元素, 哪個元素的 "click" 事件先被觸發呢？

在冒泡中，內部元素的事件會先被觸發，然後再觸發外部元素，即：<p>元素的點擊事件先觸發，然後會觸發<div>元素的點擊事件

在捕獲中，外部元素的事件會先被觸發，然後才會觸發內部元素的事件，即：<div>元素的點擊事件先觸發，然後再觸發<p>元素的點擊事件

addEventListener() 方法可以指定 "useCapture" 參數來設置傳遞類型：

默認值為 false, 即冒泡傳遞，當值為 true 時, 事件使用捕獲傳遞

removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

element.removeEventListener("mousemove", myFunction);

例子：

document.getElementById("myDIV").addEventListener("mousemove",myFunction);
function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
    document.getElementById("myDIV").removeEventListener("mousemove",myFunction);
}

注意：IE8及更早IE版本，Opera7.0及其更早版本不支持addEventListener()和removeEventListener()方法。但是，對於這類瀏覽器版本可以使用detachEvent()方法來移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);

例如：

var x = document.getElementById("myBtn");
if (x.addEventListener) {
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
    x.attachEvent("onclick", myFunction);
}
function myFunction() {
    alert("Hello World!");
}

HTML DOM 事件對象

HTML DOM 事件

HTML DOM事件允許Javascript在HTML文檔元素中注冊不同事件處理程序，事件通常與函數結合使用，函數不會在事件發生前被執行！(如用戶點擊按鈕)

具體事件可以查看我以前的文章：HTML DOM 事件對象

方法

方法	描述	DOM
initMouseEvent()	初始化鼠標事件對象的值	2
initKeyboardEvent()	初始化鍵盤事件對象的值	3

HTML DOM 元素

創建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必須首先創建該元素（元素節點），然後向一個已存在的元素追加該元素

var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);//把文字插入新建節點p
var element=document.getElementById("div1");
element.appendChild(para);//把新建節點p插入原節點div

刪除已有的 HTML 元素

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);//把節點div中節點p刪除

如果能夠在不引用父元素的情況下刪除某個元素，就太好了。不過很遺憾。DOM 需要清楚您需要刪除的元素，以及它的父元素。這是常用的解決方案：找到您希望刪除的子元素，然後使用其 parentNode 屬性來找到父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

最後更新：2017-06-01 16:31:31

JS HTML DOM

HTML DOM(文檔對象模型)

查找 HTML 元素

HTML DOM 改變 HTML 內容

改變 HTML 輸出流

改變 HTML 內容

改變 HTML 屬性

HTML DOM 改變 CSS

HTML DOM 事件

HTML 事件屬性

使用 HTML DOM 來分配事件

onload 和 onunload 事件

onchange 事件

onmouseover 和 onmouseout 事件

onmousedown、onmouseup 以及 onclick 事件

onfocus 事件

HTML DOM EventListener

addEventListener() 方法

語法

向原元素添加事件句柄

向同一個元素中添加多個事件句柄

向 Window 對象添加事件句柄

傳遞參數

事件冒泡或事件捕獲

removeEventListener() 方法

HTML DOM 事件對象

HTML DOM 事件

方法

HTML DOM 元素

創建新的 HTML 元素

刪除已有的 HTML 元素

上一篇：《Microsoft.NET企業級應用架構設計（第2版）》——2.2 軟件項目的機製

下一篇：《Microsoft.NET企業級應用架構設計（第2版）》——第2章為成功而設計 2.1“大泥球”

相關內容

熱門內容

最新內容

JS HTML DOM

HTML DOM(文檔對象模型)

查找 HTML 元素

HTML DOM 改變 HTML 內容

改變 HTML 輸出流

改變 HTML 內容

改變 HTML 屬性

HTML DOM 改變 CSS

HTML DOM 事件

HTML 事件屬性

使用 HTML DOM 來分配事件

onload 和 onunload 事件

onchange 事件

onmouseover 和 onmouseout 事件

onmousedown、onmouseup 以及 onclick 事件

onfocus 事件

HTML DOM EventListener

addEventListener() 方法

語法

向原元素添加事件句柄

向同一個元素中添加多個事件句柄

向 Window 對象添加事件句柄

傳遞參數

事件冒泡或事件捕獲

removeEventListener() 方法

HTML DOM 事件對象

HTML DOM 事件

方法

HTML DOM 元素

創建新的 HTML 元素

刪除已有的 HTML 元素

上一篇： 《Microsoft.NET企業級應用架構設計（第2版）》——2.2 軟件項目的機製

下一篇： 《Microsoft.NET企業級應用架構設計（第2版）》——第2章 為成功而設計 2.1“大泥球”

相關內容

熱門內容

最新內容

上一篇：《Microsoft.NET企業級應用架構設計（第2版）》——2.2 軟件項目的機製

下一篇：《Microsoft.NET企業級應用架構設計（第2版）》——第2章為成功而設計 2.1“大泥球”