webBasic_javaScript_day03_定时器_BOM_DOM基础知识

最新推荐文章于 2022-12-23 21:17:23 发布

CXZ___deboke

最新推荐文章于 2022-12-23 21:17:23 发布

阅读量326

点赞数

CC 4.0 BY-SA版权

分类专栏： webBasic javaScript 文章标签：定时器_BOM_DOM基础

本文链接：https://blog.youkuaiyun.com/CXZ___deboke/article/details/79592897

webBasic 同时被 2 个专栏收录

7 篇文章

订阅专栏

javaScript

4 篇文章

订阅专栏

本文介绍了浏览器对象模型(BOM)和文档对象模型(DOM)的基本概念及其应用。BOM允许开发者进行窗口操作如移动和调整大小，而DOM则提供了一套标准的方法来访问和操作HTML文档，包括查找、增加、删除和修改标签对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BOM Browser Object Model 浏览器对象模型

通过使用BOM,可以移动窗口,更改状态栏文本等操作

执行不与页面内容发生直接联系的操作(不能操作标签)

没有相关的标准,但被广泛支持

DOM Document object Model 文档对象模型

定义了访问和操作HTML文档的标准方法(API)

Dom让我们做两件事:

1.找到要操作的标签对象

2.对这些标签对象的属性和内容,进行增删改查操作!

js外部对象

window对象

window表示浏览器窗口

所有的js的全局对象,函数,变量都是自动成为

window对象的成员(都可以使用window点出来)

同时,window可以省略

window对象常用的函数,方法

1.弹出窗

    <body>
        <input type="button" 
        value="btn1" onclick="fn1();">
        <input type="button" 
        value="btn2" onclick="fn2();">
        <input type="button" 
        value="btn3" onclick="fn3();">
    </body>

    <script type="text/javascript">
    function fn1(){
        //普通弹出框
        window.alert("你好");
    }
    function fn2(){
        //确认框
        var flag=confirm("你吃了吗?");
        console.log(flag);
    }
    function fn3(){
        //输入框
        var text=prompt("你吃的是什么");
        console.log(text);
    }
    </script>

总结:所有弹出窗方法都可以使用window对象调用

定时器

1.周期性定时器

以一定的间隔执行代码,循环往复

window.setInterval(exp,time);

exp:要反复执行的代码,一般为匿名函数

time:间隔时间,毫秒

返回值:这个启动的定时器对象(id)

clearInterval(id);//id为要关闭的定时器对象

<input type="button" 
value="启动定时器" onclick="fn4();">

function fn4(){
    var n=5;
    var id=setInterval(function(){
        console.log(n--);
        if(n<0){
            clearInterval(id);
        }
    },1000);
    console.log("今天星期三");
}
</script>

总结:启动定时器,相当于启动了一个支线程

fn4是主线程,定时器内的匿名函数在支线程

两条线程同时并发执行,相互不等待

课堂练习–简易时钟

此处会有bug,要处理

    <body>
        <p>
            <input type="button" 
            value="开始" onclick="star();">
            <input type="button" 
            value="停止" onclick="stop();">
        </p>
        <p id="clock"></p>
    </body>

    <script type="text/javascript">
        var id;
        function star(){
            var oP=document.getElementById("clock");
            if(id){
                //如果id中有定时器对象了,
                //就不要再开启定时器了
                //进入if块,执行return即可
                return;
            }
            id=setInterval(function(){
                //1.获取当前时间转换成本地格式
                var d=new Date();
                var now=d.toLocaleTimeString();
                //2.写入p中
                oP.innerHTML=now;
            }, 1000);
        }
        function stop(){
            if(id){
                //id中有定时器对象
                //才进if块关闭定时器
                clearInterval(id);
                //并且在关闭之后
                //id要清空
                //不然开始按钮会不再开启新定时器
                id=null;
            }

        }
    </script>

一次性定时器(延迟定时器)

在一个设定的时间之后,执行代码.只执行一次.

window.setTimeout(exp,time);

exp:延迟执行的代码.一般为匿名函数

time:延迟执行的时间,毫秒

返回值是一次性定时器对象

    <body>
        <p>
            <input type="button" value="发送"
            onclick="send();">
            <input type="button" value="撤销"
            onclick="cancel();">
        </p>
        <p id="msg"></p>
    </body>

    <script type="text/javascript">
        var id;//全局,存储定时器对象
        function send(){
            if(id){
                return;
            }
            var oP=document.getElementById("msg");
            oP.innerHTML="正在发送...";
            //延迟3秒再发送
            id=setTimeout(function(){
                oP.innerHTML="发送成功"
            }, 3000);
        }
        function cancel(){
            if(id){
                var oP=document.getElementById("msg");
                oP.innerHTML="已撤销";
                window.clearTimeout(id);
            }
                id=null;

        }
    </script>

window常用对象

1.location对象

包含当前URL的信息

用于获取和改变当前浏览的网址

href属性 location.href

reload()方法,重新加载当前网址,等同按下刷新按钮

2.screen

包含了有关客户端显示屏幕的信息

width/height

availWidth/availHeight 可用宽度/可用高度

减去界面特性，比如窗口任务栏,就是可用高度

3.history

包含用户在浏览器窗口中访问过的URL

length属性浏览器历史列表中的url的数量

方法:后退back();前进forward();

    history.back();//后退history.go(-1)
    history.forward();//前进history.go(1);
    history.go(num);

4.navigator

包含浏览器的相关信息

DOM对象

DOM提供了如下操作

1.查找节点

    <p id="p1">1.<b>读写</b>节点</p>
    <p id="p2">2.<b>查询</b>节点</p>
    <p id="p3">3.<b>增删</b>节点</p>
    <script type="text/javascript">
        window.onload=function(){
            var oP=document.getElementById("p1");
            //节点类型
            console.log(oP.nodeType);
            //节点名称
            console.log(oP.nodeName);
        }
    </script>

nodeType:节点类型

1.元素节点,返回值1

2.属性节点,返回值2

3.文本节点,返回值3

8.注释节点,返回值8

9.文档节点,返回值9

读写元素节点的内容

双标签中间的文本叫内容,任何双标签都有内容

1.innerHTML(结果含子标签)

2.innerText(结果忽略子标签)

1.读写节点

    需求:1.p标签显示---今天天气有雾霾
    oP.innerText="今天天气有<u>雾霾</u>";
    需求:2.p标签显示---今天天气有雾霾,雾霾使用<u></u>包裹
    oP.innerHTML="今天天气有<u>雾霾</u>";

总结:如果需求是在父节点对象中动态添加若干子节点

使用innerHTML

读取节点的值–value

表单中节点对象的数据都叫值(单标签)

input select textarea

2.读取节点信息

读写节点的属性

1.通过方法读写属性

<body>
    <p><img id="img1" src="../img/06.png"></p>
</body>

<script type="text/javascript">
    window.onload=function(){
        //通过方法读取节点对象的属性
        var oImg=document.getElementById("img1");
        console.log(oImg.getAttribute("src"));
        //通过方法设置节点对象的属性
        oImg.setAttribute("src", "../img/19.png");
        //oImg.removeAttribute("src");
    }
    </script>

2.通过标准的属性名读写属性

id style className

    <p id="p1" class="blue" style="color:red;width:100px">

    //通过标准属性名读取改变属性值
    var oP=document.getElementById("p1");
    console.log(oP.style.color);
    //oP.style.color="blue";
    oP.className="change";