DOM简单学习和事件简单学习
DOM简单学习
控制：控制html文档的内容
代码：获取页面标签(元素)对象 Element
document.getElementById("id值")：通过元素的id获取元素对象
操作Element对象：
1.修改属性值：
1.明确获取的对象是哪一个？
2.查看API文档，找其中有哪些属性可以设置
2.修改标签体内容：
属性：innerHTML
如果不能使用可以试试在外部找到你项目文件位置右键使用IE打开
<img id="light" src="img/a2.jpg"> <h1 id="title">张三</h1> <script> //通过id获取元素对象 /*let light = document.getElementById("light"); alert("更换图片!!!"); light.src="img/a1.jpg";*/ //1.获取h1标签对象 let title = document.getElementById("title"); alert("更换内容") title.innerHTML = "李四"; </script>
更换后
更换后
事件简单学习
功能：某些组件被执行了某些操作后，触发某些代码的执行。
如何绑定事件
1.直接在html标签上，指定事件的属性(操作),属性值就是js代码
1.事件：onclick - - - 单击事件
2.通过js获取元素对象，指定事件属性，设置一个函数
<body> <img id="light" src="img/a2.jpg" onclick="fun();"> <img id="light2" src="img/a2.jpg"> <script> function fun() { alert('我被点了'); } function fun2() { alert('点我干啥!'); } //1.获取light2对象 var light2 = document.getElementById("light2"); light2.onclick = fun2; </script> </body>
