javaScript HTML DOM
HTML DOM(文檔對象模型)
當(dāng)網(wǎng)頁被加載時,瀏覽器會創(chuàng)建頁面的文檔對象模型
查找HTML元素
通過id找到HTML元素:例如:
document.getElementById("intro");
通過標(biāo)簽名找到HTML元素:例如:
document.getElementsByTagName("p");
通過類名找到HTML元素:例如:
document.getElementsByClassName("intro");
改變HTML輸出流
document.write()
改變HTML內(nèi)容
document.getElementById("p").innerHTML="新的code";
改變HTML屬性
document.getElementById("p").attribute=新屬性值
例如:修改image中src屬性
document.getElementById("image").src="lan.jpg";
改變HTML樣式
document.getElementById("p").style.property=新樣式联四;
例如:修改p2中的顏色
document.getElementById("P2").style.color="blue";
使用事件
<button type="button" onclick="document.getElementById("id1").style.color='red'">
對事件做出反應(yīng)
例如:當(dāng)用戶在HTML元素上點擊時,需要在用戶點擊某個元素時執(zhí)行代碼
<h1 onclick="this.innerHTML="javaScript"">點擊問文本</h1>
HTML事件屬性
<button onclick="displayDate()">點這里</button>
使用HTML DOM來分配事件
document.getElementById("myBtn").onclick=function(){
dispalyDate();
};
onload和onunload事件
onload和onunload事件會在用戶進入或離開頁面時被觸發(fā)哨鸭。
onload事件可用于檢測訪問者的瀏覽器類型和瀏覽器版本昧狮,并基于這些信息來加載網(wǎng)頁的正確版本。
onload和onunload事件用于處理cookie
onchange事件
<input type="text" id="fname" onchange="upcase()"/>
onmouseover和onmouseout事件
onmouseover和onmouseout事件可用于在用戶的鼠標(biāo)移至HTML元素上方或移出元素時觸發(fā)的函數(shù)
<button type="button" onclick="document.getElementById('aa').style.color='red'">button</button>
onmousedown、onmouseup事件