DOM操作HTML
- 改變HTML輸出流
注意:絕對不要在文檔加載完成之后使用document.write().這會覆蓋該文檔
- 尋找元素:
- 通過id找到HTML元素
- 通過標簽名找到HTML元素
- 改變HTML內(nèi)容
- 使用屬性: innerHTML
- 改變HTML屬性
- 使用屬性:attribute
DOM EventListener
- DOM EventListener
- 方法: addEventListener
- removeEventListener
- addEventListener
- 方法用于向指定元素添加事件句柄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="pid">hello</p>
<button id="btn">按鈕</button>
<script>
document.getElementById("btn").addEventListener("click", function () {
alert("hello");
})
</script>
</body>
</html>
- 添加多個句柄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">按鈕</button>
<script>
var btn = document.getElementById("btn");
btn.addEventListener("click", hello);
btn.addEventListener("click", sayBye);
function hello() {
alert("hello");
}
function sayBye() {
alert("bye");
}
</script>
</body>
</html>
- removeEventListener 方法用于移除方法添加的句柄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">按鈕</button>
<script>
var btn = document.getElementById("btn");
btn.addEventListener("click", hello);
btn.addEventListener("click", sayBye);
btn.removeEventListener("click", hello);
function hello() {
alert("hello");
}
function sayBye() {
alert("bye");
}
</script>
</body>
</html>
