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>


相关文章
|
4天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
2月前
|
XML 移动开发 JavaScript
js中BOM和DOM总结(基础篇)
文章总结了JavaScript的BOM和DOM知识点,包括window、screen、location、history、navigator对象,以及消息框、计时器和cookie。同时,介绍了DOM的概念、节点获取和修改方法,以及事件处理。
js中BOM和DOM总结(基础篇)
|
1月前
|
JavaScript 前端开发 Java
【前端基础篇】JavaScript之BOM介绍
【前端基础篇】JavaScript之BOM介绍
34 0
|
2月前
|
JavaScript 前端开发 API
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API,允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法,可以极大地增强Web应用的功能性和用户体验。需要注意的是,BOM的某些特征可能会在不同浏览器中表现不一致,因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM,开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
31 1
|
6月前
|
JavaScript 前端开发
javascript操作BOM的方法
javascript操作BOM的方法
50 0
|
3月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
99 1
|
3月前
|
JavaScript 前端开发
js bom的概念
js bom的概念
35 1
|
3月前
|
JavaScript 前端开发
JavaScript BOM 的概念(浏览器对象模型)
JavaScript BOM 的概念(浏览器对象模型)
45 1
|
3月前
|
存储 JavaScript 前端开发
JavaScript中的BOM
JavaScript中的BOM
|
5月前
|
JavaScript 前端开发 API
JavaScript基础-BOM与窗口交互
【6月更文挑战第12天】本文介绍了BOM(浏览器对象模型),它是JavaScript与浏览器交互的API。核心对象包括顶级对象window、document、location、navigator和history。常见问题涉及window全局作用域、location.href编码、history使用和navigator.userAgent检测。提供了代码示例,如设置页面标题、页面跳转及利用history实现无刷新跳转。掌握BOM基础和最佳实践对前端开发至关重要。
43 5