Javascript学习，DOM对象，方法的使用

时间：2023-11-09 17:31:29

JavaScript：

  1. ECMAScript：

  2. BOM：

  3. DOM：

    1. 事件

DOM的简单学习

  1. 功能：控制html文档内容

  2. 代码：获取页面标签（元素）对象和Element

    1. document.getElementById("id值")：通过元素id获取元素对象

  3. 操作Element对象

    1. 修改属性值

      1. 明确获取的对象是那个？

      2. 查看api文档，找其中有哪些属性可以设置

    2. 修改标签体内容

      1. 属性，innerhtml

  4. 事件简单学习

    1. 功能：某些组件被执行了某些操作后，触发某些代码的执行。

    2. 如何绑定事件

      1. 直接html标签上，指定事件的属性，属性值就是js代码

        1. 事件：onclick..单击事件

        2. 通过js获取元素对象，指定事件的属性，设置一个函数

小案例：点击实现图片切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="c" src="img/psc2.jpg">
​
    <script>
        /*
            1.获取图片对象
            2.绑定单击事件
            3.每次切换图片
                规则，
                    如果灯是开的on，切换为off
​
         */
        var light = document.getElementById("c");
        var flag = false;//加入表示判断图片是否是psc2
        light.onclick = function () {
            if (flag) {
                light.src = "img/psc3.jpg";
                flag = false;
            }else {
                light.src = "img/psc2.jpg";
                flag = true;
            }
        }
​
    </script>
</body>
</html>

  1. BOM：

    1. 概念：Browser object Model 浏览器对象模型

      1. 将浏览器各个组成部分封装成对象

        Browser 对象

        • [Window] 窗口对象

          • <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>window对象</title>
            ​
            </head>
            <body>
                <input id="openBtn" type="button" value="打开新窗口">
                <input id="closeBtn" type="button" value="关闭新窗口">
                <script>
                    /*
                    window窗口对象
                        1.创建
                        2.方法
                            1.与弹出框有关的方法
                                alert（）  弹出一个警告框
                                confirm（）显示带有一段信息以及确认按钮和取消按钮的对话框
                                    如果用户点击确定返回true，点击取消返回false
                                prompt（） 显示提示用户输入的对话框
                            2.与打开关闭有关的方法
                                close（）关闭浏览器窗口
                                    谁调用我，我关闭谁
                                open（）打开一个新的浏览器窗口
                                    返回新的Window对象
            ​
                            3.与定时器有关的方法
                                setInterval()   按照指定的周期（以毫秒计）来调用函数或计算表达式。
                                setTimeout()    在指定的毫秒数后调用函数或计算表达式。
                                    参数：
                                        1.js代码或者方法对象
                                        2.毫秒值
                                       返回值：唯一标识，用于取消定时器
                                clearInterval() 取消由 setInterval() 设置的 timeout。
            cl                  clearTimeout()  取消由 setTimeout() 方法设置的 timeout。
                        3.属性
                            1.获取其他BOM对象
                                history
                                location
                                Screen
                                document
                        4.特点
                            window对象不需要创建可以直接使用，window使用window.方法名
                            window引用可以省略，方法名（）
                     */
                    //alert("hello window");
                    //window.alert("111");
                    //var flag =  confirm("确定要退出");
                    //alert(flag);
            ​
                   /* var newWindow;
                    var openBtn = document.getElementById("openBtn");
                    openBtn.onclick = function () {
                        //打开一个新窗口
                       newWindow = open("http://www.baidu.com");
                    }
                    var closeBtn = document.getElementById("closeBtn");
                    closeBtn.onclick = function () {
                        //关闭一个新窗口
                        newWindow.close();
                    }*/
            ​
            ​
                   //一次性定时器
                    //var id =setTimeout("f1();",2000);
                    clearTimeout(id);
                            function f1() {
                                alert('boom');
                            }
            ​
                    //循环定时器
                     var id = setInterval(f1,2000);
            ​
                </script>
            </body>
            </html>

        轮播图案例

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>轮播图</title>
        ​
        </head>
        <body>
        <img id="img" src="img/psc2.jpg" width="100%" height="100%">
        <script>
            /*
                分析：
                        1.在页面上使用img标签
                        2.定义一个方法修改图片的连接
                        3.定义定时器，每隔一段时间换一张图片
        ​
             */
            //修改图片src
            var num = 1;
            function change() {
                num++;
                if(num>3){
                    num = 1;
                }
                var img1 =  document.getElementById("img");
                img1.src = "img/psc"+num+".jpg";
            }
            //2.定义定时器
            setInterval(change,3000);
        ​
        ​
        ​
        </script>
        </body>
        </html>

        • [Navigator] 浏览器对象

        • [Screen]显示器对象

        • [History]历史记录对象

          • 创建（获取）：

            • window.history

            • history

          • 方法

            • back（）加载history列表中的前一个url

            • forward（）加载history列表中的下一个url

            • go（）加载history列表中的某个具体页面

              • 正数，前进几个历史记录

              • 负数，后退几个历史记录

          • 属性

            • length 返回当前窗口的历史列表中的url数量

        • [Location]地址栏对象

          • 创建

            • window.location

            • location

          • 方法

            • reload（）重新加载当前文档，刷新

          • 属性

            • href 设置或返回完整URL

      2. DOM对象

        1. 概念：document object Model 文档对象模型

          1. 将标记语言文档的各个组成部分，封装成对象，可以使用这些对象，对标记语言

相关文章