DOM操作HTML
- 改变HTML输出流
注意:绝对不要在文档加载完成之后使用document.write().这会覆盖该文档
- 寻找元素:
- 通过id找到HTML元素
- 通过标签名找到HTML元素
- 改变HTML内容
- 使用属性: 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>
