1.DOM简单学习
- 功能： 控制html文档的内容
- 代码：获取页面标签(元素)对象Element
document.getElementeById(“id值”): 通过元素的id获取标签对象。
- 操作Element对象
1.修改属性值
1.明确获取的对象是哪一个?
2.查看API文档，找其中有哪些属性可以设置。
2.修改标签体内容
属性: innerHTML
1. 获取 元素对象
2. 使用innerHTML属性修改标签体内容。
2.事件简单学习
- 功能：某些组件被执行了某些操作后，触发某些代码的执行。
- 如何绑定事件
- 1.直接在html标签上，指定事件的属性(操作)，属性值就是js代码。
<img id="light" src="img/off.gif" onclick="alert("hello world")">
- 2.通过js获取元素对象，指定事件属性，设置一个函数。
<script>
function fun(){
alert("hello world");
}
var bt = document.getElementById("bt")
bt.onclick = fun;
</script>
3.学习示例代码
<!doctype html>
<html>
<head lang="en">
<title>HTML实战</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<input id='bt' type="button" value="点我"></input><br>
<img id='pic' onclick="alert('hello world')"></img>
<script>
function fun(){
var pic = document.getElementById('pic');
pic.src = "test.jpg";
pic.width = 590;
pic.height= 720;
}
var bt = document.getElementById("bt")
bt.onclick = fun;
</script>
</body>
</html>