JavaScript系列--BOM(一)

简介: JavaScript系列--BOM(一)

一、概述



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>


相关文章
|
5月前
|
缓存 JavaScript 前端开发
javaScript(五):BOM操作
JavaScript 中的 BOM(Browser Object Model)是一组用于操作浏览器窗口的对象和方法集合。BOM 使我们可以通过 JavaScript 访问浏览器窗口的各个组成部分,包括地址栏、菜单栏、历史记录、浏览器的尺寸位置等
48 0
 javaScript(五):BOM操作
|
29天前
|
JavaScript 前端开发
深入了解 JavaScript 中的 DOM 和 BOM
深入了解 JavaScript 中的 DOM 和 BOM
19 4
|
2月前
|
JavaScript 前端开发
JavaScript操作BOM简单案例
JavaScript操作BOM简单案例
9 1
|
2月前
|
JavaScript 前端开发
JavaScript操作BOM对象
JavaScript操作BOM对象
9 1
|
4月前
|
JavaScript 前端开发
JavaScript中的BOM操作
JavaScript中的BOM操作
|
4月前
|
编解码 JavaScript 前端开发
JavaScript学习 --- BOM
JavaScript学习 --- BOM
16 0
|
4月前
|
存储 JSON JavaScript
JavaScript:BOM操作
JavaScript:BOM操作
35 1
|
4月前
|
XML JavaScript 前端开发
JavaScript 之 DOM and BOM 总结
JavaScript 之 DOM and BOM 总结
30 0
|
5月前
|
XML 存储 JavaScript
JavaScript详解DOM和BOM(持续更新)
JavaScript详解DOM和BOM(持续更新)
|
5月前
|
XML JavaScript 前端开发
js中dom和bom有什么区别
js中dom和bom有什么区别
35 0