首頁 > 開發者 > JavaScript
JS教程JavaScript HTML DOM
摘自http://www.w3school.com.cn
一HTML DOM （文件物件模型 DocumentObject Model）
HTML DOM 樹
通過可程式化的物件模型，JavaScript獲得了足夠的能力來建立動態 HTML。
l JavaScript 能夠改變頁面中的所有 HTML 元素
l JavaScript 能夠改變頁面中的所有 HTML 屬性
l JavaScript 能夠改變頁面中的所有 CSS 樣式
l JavaScript 能夠對頁面中的所有事件做出反應
二 尋找 HTML 元素
通常，通過 JavaScript，您需要操作 HTML 元素。
有三種方法來找到要操作的元素：
l 通過 id 找到 HTML 元素
document.getElementById(id)
l 通過標籤名找到 HTML 元素
getElementsByTagName(tagName)
l 通過類名找到 HTML 元素 (在 IE 5,6,7,8 中無效)
三 改變 HTML
1.改變 HTML 輸出資料流
document.write()
可用於直接向 HTML 輸出資料流寫內容。
提示：絕不要使用在文檔載入之後使用 document.write()。這會覆蓋該文檔。
2. 改變 HTML 內容
document.getElementById(id).innerHTML=newHTML
3. 改變 HTML 屬性
document.getElementById(id).attribute=newvalue
執行個體:
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
4.改變HTML樣式
document.getElementById(id).style.property=newstyle
<p id="p2">HelloWorld!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.background-color="#ccc";
</script>
5. 對 HTML 事件做出反應
HTML 事件的例子：
l 當使用者點擊滑鼠時
l 當網頁已載入時
l 當映像已載入時
l 當滑鼠移動到元素上時
l 當輸入欄位被改變時
l 當提交 HTML 表單時
l 當使用者觸發按鍵時
等等
當事件發生時可以執行 JavaScript;
如使用者在 HTML 元素上點擊時,可以對 HTML 的onclick事件添加 JavaScript 代碼：
onclick=JavaScript
執行個體:
<script>
function changetext(obj){obj.innerHTML="謝謝!";}
</script>
<h1onclick="changetext(this)">請點擊該文本</h1>
onclick是HTML元素的點擊事件;
要讓HTML元素在某個事件發生(前,時,後)作什麼(作什麼是動作),首先要先給這個HTML元素添加對應的事件(添加事件),其次再加上你要作的動作(編寫JS代碼);
1).事件添加方式及onclick事件
a.事件直接加在HTML元素上
<h1onclick="this.innerHTML='謝謝!'">請點擊該文本</h1>
b.事件通過JS添加在HTML元素上
<button id="myBtn ">點擊這裡</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
2).onload 和 onunload 事件
onload 和 onunload 事件會在使用者進入或離開頁面時被觸發。
onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些資訊來載入網頁的正確版本。
onload 和 onunload 事件可用於處理cookie。
執行個體:
<!DOCTYPE html>
<html>
<bodyonload="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("已啟用cookie")
}
else
{
alert("未啟用cookie")
}
}
</script>
<p>提示框會告訴你，瀏覽器是否已啟用cookie。</p>
</body>
</html>
3) .onchange事件
onchange 事件常結合對輸入欄位的驗證來使用,或者其它動作.
執行個體:
<script>
function myFunction()
{
varx=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
<input type="text"id="fname" onchange="myFunction()">
<p>當您離開輸入欄位時，會觸發將輸入文本轉換為大寫的函數。</p>
4).onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用於在使用者的滑鼠移至HTML 元素上方或移出元素時觸發函數
執行個體:
<h1 onmouseover="style.color='red'"onmouseout="style.color='blue'">
例一 請把滑鼠移到這段文本上
</h1>
<divonmouseover="mOver(this)" onmouseout="mOut(this)" >
例二 把滑鼠移到上面
</div>
<script>
function mOver(obj)
{
obj.innerHTML="謝謝"
}
function mOut(obj)
{
obj.innerHTML="把滑鼠移到上面"
}
</script>
5). onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及onclick 構成了滑鼠點擊事件的所有部分;
l 首先當按下滑鼠按鍵時,會觸發 onmousedown 事件;
l 當釋放滑鼠按鍵時,會觸發 onmouseup 事件;
l 最後，當完成滑鼠點擊時,會觸發 onclick 事件.
執行個體:
<div onmousedown="mDown(this)" onmouseup="mUp(this)"onclick="mClick(this)" style="width:90px;height:20px;">請點擊這裡</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="請釋放滑鼠按鍵";
}
function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="請按下滑鼠按鍵";
}
function mClick(obj){ obj.innerHTML="click";}
</script>
6). onfocus、onblur事件
獲得和失去焦時間點事件
執行個體:
<script>
function focusFun(x)
{
x.style.background="yellow";
}
functionblurFun(x)
{
x.style.background="#fff";
}
</script>
<input type="text" onfocus="focusFun(this)"onblur=" blurFun(this)">
更多詳情:
1.http://www.w3school.com.cn/htmldom/dom_obj_event.asp
2.http://www.w3school.com.cn/tags/html_ref_eventattributes.asp
比較1和2中事件的不同,2裡沒有onerror和onresize事件
四 JavaScript HTML DOM 元素（節點）
1. 添加節點（HTML 元素）
添加新HTML DOM元素，首先建立該元素（元素節點），然後向一個已存在的元素追加該元素
1) 建立HTML元素
document.createElement(Element)
2) 向elementNode節點內的子項目末追加元素
(向節點的子節點列表的末尾添加新的子節點)
elementNode.appendChild(newElement)
3) 向elementNode節點內某個子項目前插入元素
(在已有的子節點前插入一個新的子節點)
elementNode.insertBefore(new_node,existing_node)
new_node 要 插入新的節點
existing_node 已有節點,在此節點前插入新節點
4) 建立文本節點
document.createTextNode(contents)
執行個體:
<div id="div1">
<p id="p1">這是一個段落</p>
<p id="p2">這是另一個段落</p>
</div>
<script>
varpara=document.createElement("p");
var node=document.createTextNode("這是新段落。");
para.appendChild(node);
varelement=document.getElementById("div1");
element.appendChild(para);
</script>
2.刪除節點（HTML 元素）
如需刪除 HTML
元素，您必須首先獲得該元素的父元素
刪除子節點, 如成功，則返回被刪除的節點，否則返回 NULL。
elementNode.removeChild(node)
elementNode父節點 node 子節點
執行個體一:顯示找到父元素,再刪除子項目
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
varparent=document.getElementById("div1");
varchild=document.getElementById("p1");
parent.removeChild(child);
</script>
執行個體二:間接通過父元素刪除子項目
varchild=document.getElementById("p1");
child.parentNode.removeChild(child);
3. lastChild 屬性
lastChild 屬性返迴文檔的最後一個子節點
documentObject.lastChild
4. previousSibling屬性
previousSibling屬性可返回某節點之前緊跟的節點（處於同一樹層級）
如果沒有此節點，那麼該屬性返回 null。
nodeObject.previousSibling
5. nodeType屬性
nodeType
屬性返回被選節點的節點類型。
elementNode.nodeType
節點編號對應節點名稱
節點編號 |
節點名稱 |
節點編號 |
節點名稱 |
1 |
Element |
7 |
Processing Instrucion |
2 |
Attribute |
8 |
Comment |
3 |
Text |
9 |
Document |
4 |
CDATA |
10 |
Document Type |
5 |
Entity Reference |
11 |
Document Fragment |
6 |
Entity |
12 |
Notation |
刪除節點執行個體:
<scripttype="text/javascript">
//檢查最後一個節點是否是元素節點
function get_lastchild(n)
{
var x=n.lastChild;
while (x.nodeType!=1)
{
x=x.previousSibling;
}
return x;
}
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
varlastNode=get_lastchild(xmlDoc.documentElement);
vardelNode=xmlDoc.documentElement.removeChild(lastNode);
</script>
使用 JavaScript 訪問 HTML DOM更多詳情:
http://www.w3school.com.cn/htmldom/index.asp
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
