一、概述
JS由一下几个部分组成,学习BOM要先了解一下事件DOM的基础知识
ECMAScript:脚本语言的基本语法和一些常用对象
BOM:
DOM:
1.事件
1.1DOM
文档对象模型
1.2功能
控制html文档内容
1.3代码
获取页面标签(元素)对象 Element
document.getElementById(“id值”):通过元素的id
1.4操作Element对象
1.修改属性值
明确获取的对象是哪一个
查看API文档,找其中有哪些属型可以设置
2.修改标签体内容:
属型:innerHTML
<body> <!-- <img id = "one" src="../image/2.jpeg">--> <h1 title="title">妻不知刘强东</h1> <script> // var img1 = document.getElementById(one); // alert("换图片了哦!"); // img1.src = "../image/3.jpeg"; var title = document.getElementById("title"); alert("换字了"); title.innerHTML = "哈哈哈"; </script> </body>
1.5事件
1.5.1概念
某些组件被执行了某些操作后,触发某些代码的执行
造句:XXX被XXX,我就XXX
我方水晶被摧毁后,我就责备对象
1.5.2如何绑定事件
直接在html标签上
<img id = "img1" src="../img/1.jpg" onclick="fun();"> <img id = "img2" src="../img/2.jpg"> <script> function fun(){ alert('w c'); alert('?'); } function fun2(){ alert('what happen?'); alert('?'); } var img1 = document.getElementById("img2"); img1.onclick = fun2; </script>
1.5.3综合实例
实现图片点一次切换一次
<body> <img id = 1 src="../img/1.jpg"> <script> //1.获取图片对象 // flag = flase;这个地方错五,没有提示看不出来怎么办?浏览器打开之后按f12进入控制台会有提示 flag = true; var str = document.getElementById(1); str.onclick = function (){ if (flag){ str.src = "../img/2.jpg"; flag = false; }else{ str.src = "../img/1.jpg"; flag = true; } } </script> </body>