DOM 文档对象模型 Document object Model
一,DOM操作HTML
1,改变HTML输出流:
注意:绝对不要在文档加载完车后使用document.write().这会覆盖掉该文档
2,寻找元素:
通过id找到HTML元素
通过标签名找到HTML元素
3,改变Html内容:使用属性:innerHTML
4,改变HTML属性:
使用属性: attribute
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作HTML</title>
</head>
<body>
<a id="aid" href="http://www.baidu.com">跳转</a>
<p id="pid">Hello</p>
<button onclick="demo()">按钮</button>
<script>
//简单的输出
// document.write("hello")
//使用id寻找HTML元素
// function demo(){
// // var nv= document.getElementById("pid");
// // nv.innerHTML = "world";
// document.getElementById("pid").innerHTML = "world"
// }
//改变HTML的属性
function demo(){
document.getElementById("aid").href = "http://www.taobao.com";
}
</script>
</body>
</html>二,通过DOM对象改变CSS
语法 : document.getElementById(id).style.property = new style;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DOM操作css</title>
<link rel="stylesheet" type="text/css" href="DOM操作CSS.css">
</head>
<body>
<div class="div" id="div">这是一个盒子</div>
<input type="button" value="按钮" onclick="demo1()">
<script>
function demo1(){
var gn = document.getElementById("div");
gn.style.backgroundColor = "blue";
}
</script>
</body>
</html>三,事件句柄
句柄事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件句柄</title>
</head>
<body>
<p id="pid">Hello</p>
<button id="btn">按钮</button>
<script>
document.getElementById("btn").addEventListener("click",function(){//事件句柄不会被覆盖,可以设置多个
alert("hello")
});
document.getElementById("btn").addEventListener("click",function(){//事件句柄不会被覆盖,可以设置多个
alert("word")
});
</script>
</body>
</html>