javascript HTML DOM 簡單介紹

最後更新：2017-11-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：而不是 other elements hang 今天指定事件處理器控制進入

JavaScript HTML DOM
通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。
HTML DOM (文件物件模型)
當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）。

通過可程式化的物件模型，JavaScript 獲得了足夠的能力來建立動態 HTML。
JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應

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

通過 id 尋找 HTML 元素
在 DOM 中尋找 HTML 元素的最簡單的方法，是通過使用元素的 id。
本例尋找 id="intro" 元素：
執行個體
var x=document.getElementById("intro");
如果找到該元素，則該方法將以對象（在 x 中）的形式返回該元素。
如果未找到該元素，則 x 將包含 null。
通過標籤名尋找 HTML 元素
本例尋找 id="main" 的元素，然後尋找 id="main" 元素中的所有 <p> 元素：
執行個體
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
通過類名找到 HTML 元素
本例通過 getElementsByClassName 函數來尋找 class="intro" 的元素：
執行個體
var x=document.getElementsByClassName("intro");

JavaScript HTML DOM - 改變 HTML
HTML DOM 允許 JavaScript 改變 HTML 元素的內容。
改變 HTML 輸出資料流
JavaScript 能夠建立動態 HTML 內容：
今天的日期是： Sat Nov 04 2017 16:35:50 GMT+0800 (中國標準時間)
在 JavaScript 中，document.write() 可用於直接向 HTML 輸出資料流寫內容。
執行個體
<!DOCTYPE html>
<html>
<body>

</body>
</html>
絕對不要在文檔載入完成之後使用 document.write()。這會覆蓋該文檔。

改變 HTML 內容
修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。
如需改變 HTML 元素的內容，請使用這個文法：
document.getElementById(id).innerHTML=新的 HTML
本例改變了 <p>元素的內容：
執行個體
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>
本例改變了 <h1> 元素的內容：
執行個體
<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

</body>
</html>
執行個體講解：
上面的 HTML 文檔含有 id="header" 的 <h1> 元素
我們使用 HTML DOM 來獲得 id="header" 的元素
JavaScript 更改此元素的內容 (innerHTML)

改變 HTML 屬性
如需改變 HTML 元素的屬性，請使用這個文法：
document.getElementById(id).attribute=新屬性值
本例改變了 <img> 元素的 src 屬性：
執行個體
<!DOCTYPE html>
<html>
<body>

</body>
</html>
執行個體講解：
上面的 HTML 文檔含有 id="image" 的 <img> 元素
我們使用 HTML DOM 來獲得 id="image" 的元素
JavaScript 更改此元素的屬性（把 "smiley.gif" 改為 "landscape.jpg"）

JavaScript HTML DOM - 改變CSS

HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。
改變 HTML 樣式
如需改變 HTML 元素的樣式，請使用這個文法：
document.getElementById(id).style.property=新樣式
下面的例子會改變 <p> 元素的樣式：
執行個體
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通過指令碼修改。</p>
</body>
</html>

使用事件
HTML DOM 允許我們通過觸發事件來執行代碼。
比如以下事件：
元素被點擊。
頁面載入完成。
輸入框被修改。
在接下來的章節，你會學到更多關於事件的知識。
本例改變了 id="id1" 的 HTML 元素的樣式，當使用者點擊按鈕時：
執行個體
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">我的標題 1</h1>
<button type="button"
onclick="document.getElementById(‘id1‘).style.color=‘red‘">
點我!</button>
</body>
</html>

如何使元素不可見（例子：）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p id="p1">這是一個段落。</p>
<input type="button" value="隱藏文本" onclick="document.getElementById(‘p1‘).style.visibility=‘hidden‘" />
<input type="button" value="顯示文本" onclick="document.getElementById(‘p1‘).style.visibility=‘visible‘" />
</body>
</html>

JavaScript HTML DOM 事件
HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應。
對事件做出反應
我們可以在事件發生時執行 JavaScript，比如當使用者在 HTML 元素上點擊時。
如需在使用者點擊某個元素時執行代碼，請向一個 HTML 事件屬性添加 JavaScript 代碼：
onclick=JavaScript
HTML 事件的例子：
當使用者點擊滑鼠時
當網頁已載入時
當映像已載入時
當滑鼠移動到元素上時
當輸入欄位被改變時
當提交 HTML 表單時
當使用者觸發按鍵時
在本例中，當使用者在 <h1> 元素上點擊時，會改變其內容：
執行個體
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML=‘Ooops!‘">點擊文本!</h1>
</body>
</html>
本例從事件處理器調用一個函數：
執行個體
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">點擊文本!</h1>
</body>
</html>

如需向 HTML 元素分配事件，您可以使用事件屬性。
執行個體
向 button 元素分配 onclick 事件：
<button onclick="displayDate()">點這裡</button>
在上面的例子中，名為 displayDate 的函數將在按鈕被點擊時執行。

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

<p>點擊按鈕執行 <em>displayDate()</em> 函數.</p>
<button id="myBtn">點這裡</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

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

onload 和 onunload 事件
onload 和 onunload 事件會在使用者進入或離開頁面時被觸發。
onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些資訊來載入網頁的正確版本。
onload 和 onunload 事件可用於處理 cookie。
<body onload="checkCookies()">
<script>
function checkCookies(){
if (navigator.cookieEnabled==true){
alert("Cookies 可用")
}
else{
alert("Cookies 不可用")
}
}
</script>
<p>彈窗-提示瀏覽器 cookie 是否可用。</p>
</body>

onchange 事件
onchange 事件常結合對輸入欄位的驗證來使用。
下面是一個如何使用 onchange 的例子。當使用者改變輸入欄位的內容時，會調用 upperCase() 函數。
執行個體
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

輸入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>當你離開輸入框後，函數將被觸發，將小寫字母轉為大寫字母。</p>
</body>

onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用於在使用者的滑鼠移至 HTML 元素上方或移出元素時觸發函數。
執行個體
一個簡單的 onmouseover-onmouseout 執行個體：
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>
</body>

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

JavaScript HTML DOM EventListener
addEventListener() 方法
執行個體
在使用者點擊按鈕時觸發監聽事件：
<body>

<p>該執行個體使用 addEventListener() 方法在按鈕中添加點擊事件。 </p>
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>

</body>

addEventListener() 方法用於向指定元素添加事件控制代碼。
addEventListener() 方法添加的事件控制代碼不會覆蓋已存在的事件控制代碼。
你可以向一個元素添加多個事件控制代碼。
你可以向同個元素添加多個同類型的事件控制代碼，如：兩個 "click" 事件。
你可以向任何 DOM 對象添加事件監聽，不僅僅是 HTML 元素。如： window 對象。
addEventListener() 方法可以更簡單的控制事件（冒泡與捕獲）。
當你使用 addEventListener() 方法時, JavaScript 從 HTML 標籤中分離開來，可讀性更強，在沒有控制HTML標記時也可以添加事件監聽。
你可以使用 removeEventListener() 方法來移除事件的監聽。
文法
element.addEventListener(event, function, useCapture);
第一個參數是事件的類型 (如 "click" 或 "mousedown").
第二個參數是事件觸發後調用的函數。
第三個參數是個布爾值用於描述事件是冒泡還是捕獲。該參數是可選的。
注意:不要使用 "on" 首碼。例如，使用 "click" ,而不是使用 "onclick"。

向原元素添加事件控制代碼
執行個體
當使用者點擊元素時彈出 "Hello World!" :
element.addEventListener("click", function(){ alert("Hello World!"); })

你可以使用函數名，來引用外部函數:
執行個體
當使用者點擊元素時彈出 "Hello World!" :
element.addEventListener("click", myFunction);

function myFunction() {
alert ("Hello World!");
}

向同一個元素中添加多個事件控制代碼
addEventListener() 方法允許向同個元素添加多個事件，且不會覆蓋已存在的事件：
執行個體
<body>

<p>該執行個體使用 addEventListener() 方法向同個按鈕中添加兩個點擊事件。</p>
<button id="myBtn">點我</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
alert ("Hello World!")
}
function someOtherFunction() {
alert ("函數已執行!")
}
</script>
</body>

可以向同個元素添加不同類型的事件：
執行個體
<body>

<p>執行個體使用 addEventListener() 方法在同一個按鈕中添加多個事件。</p>
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {
document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
document.getElementById("demo").innerHTML += "Moused out!<br>"
}
</script>

</body>

向 Window 對象添加事件控制代碼
addEventListener() 方法允許你在 HTML DOM 對象添加事件監聽， HTML DOM 對象如： HTML 元素, HTML 文檔, window 對象。或者其他支出的事件對象如: xmlHttpRequest 對象。
執行個體
當使用者重設視窗大小時添加事件監聽：
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});

傳遞參數
當傳遞參數值時，使用"匿名函數"調用帶參數的函數：
執行個體
element.addEventListener("click", function(){ myFunction(p1, p2); });

事件冒泡或事件捕獲？
事件傳遞有兩種方式：冒泡與捕獲。
事件傳遞定義了元素事件觸發的順序。如果你將 <p> 元素插入到 <div> 元素中，使用者點擊 <p> 元素, 哪個元素的 "click" 事件先被觸發呢？
在冒泡中，內部元素的事件會先被觸發，然後再觸發外部元素，即： <p> 元素的點擊事件先觸發，然後會觸發 <div> 元素的點擊事件。
在捕獲中，外部元素的事件會先被觸發，然後才會觸發內部元素的事件，即： <div> 元素的點擊事件先觸發，然後再觸發 <p> 元素的點擊事件。
addEventListener() 方法可以指定 "useCapture" 參數來設定傳遞類型：
addEventListener(event, function, useCapture);
預設值為 false, 即冒泡傳遞，當值為 true 時, 事件使用捕獲傳遞。
執行個體
document.getElementById("myDiv").addEventListener("click", myFunction, true);

removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件控制代碼:
執行個體
element.removeEventListener("mousemove", myFunction);

JavaScript HTML DOM 元素(節點)
建立新的 HTML 元素
如需向 HTML DOM 添加新元素，您必須首先建立該元素（元素節點），然後向一個已存在的元素追加該元素。
執行個體
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>

var element=document.getElementById("div1");
element.appendChild(para);
</script>
例子解析：
這段代碼建立新的<p> 元素：
var para=document.createElement("p");
如需向 <p> 元素添加文本，您必須首先建立文本節點。這段代碼建立了一個文本節點：
var node=document.createTextNode("這是一個新段落。");
然後您必須向 <p> 元素追加這個文本節點：
para.appendChild(node);
最後您必須向一個已有的元素追加這個新元素。
這段代碼找到一個已有的元素：
var element=document.getElementById("div1");
以下代碼在已存在的元素後添加新元素：
element.appendChild(para);

刪除已有的 HTML 元素
以下代碼示範了如何刪除元素：
執行個體
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
執行個體解析
這個 HTML 文檔含有擁有兩個子節點（兩個 <p> 元素）的 <div> 元素：
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
找到 id="div1" 的元素：
var parent=document.getElementById("div1");
找到 id="p1" 的 <p> 元素：
var child=document.getElementById("p1");
從父元素中刪除子項目：
parent.removeChild(child);
如果能夠在不引用父元素的情況下刪除某個元素，就太好了。
不過很遺憾。DOM 需要清楚您需要刪除的元素，以及它的父元素。
這是常用的解決方案：找到您希望刪除的子項目，然後使用其 parentNode 屬性來找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);

javascript HTML DOM 簡單介紹

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More