[JS]学习笔记--DOM操作
2017-04-18 本文已影响23人
流火绯瞳
1. DOM操作HTML元素
注意: 不要在文档加载完成后去使用document.write("");, 这样会覆盖所有原来的内容.
- 使用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内容";
var p = document.getElementById("pid");
p.innerHTML = "修改之后的HTML内容";
}
</script>
</body>
</html>
-
通过标签名找到HTML元素
-
修改元素属性
例如修改a标签指向的链接:
<!DOCTYPE html>
<html>
<head>
<head lang="en">
<meta charset="UTF-8">
<title> 事件</title>
</head>
<body>
<a id="aid" href="http://www.baidu.com">hello</a>
<button onclick="textChange()">按钮</button>
<script>
function textChange() {
// 通过id寻找
var p = document.getElementById("aid");
p.href = "http://www.jianshu.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("点击了");
//修改样式背景颜色
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("事件类型", 需要移除的事件方法名) : 移除添加的事件句柄
例如: 为一个按钮添加点击事件:
<!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("新添加的事件响应了");
});
</script>
</body>
</html>
可连续添加多个句柄事件, 互不影响:
<!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("第一个新添加的事件响应了");
}
function click2() {
alert("新添加的第二个事件响应了");
}
</script>
</body>
</html>
