1. DOM操作HTML元素
注意: 不要在文檔加載完成后去使用document.write("");, 這樣會覆蓋所有原來的內(nèi)容.
- 使用id來獲取HTML元素
<!DOCTYPE html>
<html>
<head>
<head lang="en">
<meta charset="UTF-8">
<title> 事件</title>
</head>
<body>
<p id="pid">需要修改的HTML元素</p>
<button onclick="textChange()">按鈕</button>
<script>
function textChange() {
// document.getElementById("pid").innerHTML = "修改之后的HTML內(nèi)容";
var p = document.getElementById("pid");
p.innerHTML = "修改之后的HTML內(nèi)容";
}
</script>
</body>
</html>
通過標(biāo)簽名找到HTML元素
修改元素屬性
例如修改a標(biāo)簽指向的鏈接:
<!DOCTYPE html>
<html>
<head>
<head lang="en">
<meta charset="UTF-8">
<title> 事件</title>
</head>
<body>
<a id="aid" >hello</a>
<button onclick="textChange()">按鈕</button>
<script>
function textChange() {
// 通過id尋找
var p = document.getElementById("aid");
p.href = "http://www.reibang.com/u/2846c3d3a974";
}
</script>
</body>
</html>
2. DOM操作CSS
基本語法 : document.getElementById(id).style.proper = new style;
<!DOCTYPE html>
<html>
<head>
<head lang="en">
<meta charset="UTF-8">
<title> 事件</title>
<!---引用外部樣式表-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="div" class="div">
這是一個演示
</div>
<button onclick="changeColor()"> 按鈕
</button>
<script>
function changeColor() {
// alert("點(diǎn)擊了");
//修改樣式背景顏色
document.getElementById("div").style.backgroundColor = "blue";
//修改樣式文字顏色
document.getElementById("div").style.color = "white";
}
</script>
</body>
</html>
外部樣式表css文件:
.div {
width: 100px;
height: 100px;
background-color: red;
}
3. DOM EventListener
給元素添加事件句柄
方法:
addEventListenner("事件名稱", 需要添加的方法名稱) : 向指定元素添加事件句柄
removeEventListenner("事件類型", 需要移除的事件方法名) : 移除添加的事件句柄
例如: 為一個按鈕添加點(diǎn)擊事件:
<!DOCTYPE html>
<html>
<head>
<head lang="en">
<meta charset="UTF-8">
<title> 事件</title>
</head>
<body>
<p id="div" class="div">
這是一個演示
</p>
<button id="btn"> 按鈕
</button>
<script>
document.getElementById("btn").addEventListener("click", function click() {
alert("新添加的事件響應(yīng)了");
});
</script>
</body>
</html>
可連續(xù)添加多個句柄事件, 互不影響:
<!DOCTYPE html>
<html>
<head>
<head lang="en">
<meta charset="UTF-8">
<title> 事件</title>
</head>
<body>
<p id="div" class="div">
這是一個演示
</p>
<button id="btn"> 按鈕
</button>
<script>
document.getElementById("btn").addEventListener("click", click1);
document.getElementById("btn").addEventListener("click", click2);
function click1() {
alert("第一個新添加的事件響應(yīng)了");
}
function click2() {
alert("新添加的第二個事件響應(yīng)了");
}
</script>
</body>
</html>
