JavaScript学习Day004(BOM和DOM)

最新推荐文章于 2024-09-24 11:55:49 发布

放在糖果旁的是我很想回忆的甜

最新推荐文章于 2024-09-24 11:55:49 发布

阅读量309

点赞数 4

分类专栏： javaScript 文章标签： javascript 学习前端马力

本文链接：https://blog.csdn.net/qihaojinqiuma/article/details/126978503

版权

javaScript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

什么是ECMAScript

ECMAScript是一种语法结构
语法、变量和数据类型、运算符、逻辑控制语句、关键字、保留字、对象
编码遵循ECMAScript标准

BOM

Browser Object Model(浏览器对象模型)
提供了独立与内容与浏览器窗口进行交互的对象

浏览器对象模型

JavaScript 弹窗

confir()

confirm()弹出一个带有确定按钮和取消按钮的对话框，点击确定按钮返回true，点击取消按钮返回false

<body>
    <button onclick="decaed()">删除</button>
    <script>
        function decaed(){
            /*
                confirm()弹出一个带有确定按钮和取消按钮的对话框，点击确定按钮返回true，点击取消按钮返回false
            */
            var result =confirm("确认删除吗？")
            if(result){
                console.log("数据删除成功");
            }else{
                console.log("取消删除成功");
            }
        }
    </script>
</body>

alert()方法

语法：alert("你好，我是一个警告框！")

prompt()方法

prompt(msg,defaultText)

location对象

用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面

<body>
    <button onclick="newPath()">加载新的文档</button>
    <script>
        console.log(location.href);
        console.log(location.pathname);

        function newPath(){
            location.assign("https://www.baidu.com")
        }
    </script>
</body>

除了location之外也可以使用window.open()

<button onclick="openWindow()"> 打开</button>
    <button onclick="closeWindow()"> 关闭</button>
    <script>
        function openWindow(){
            window.open("https://www.baidu.com","_self");//默认在新的窗口里打开_blank,"_self"是在当前页面打开
        }
        function closeWindow(){
            window.close();
        }
    </script>

DOM

Document Object Model(文档对象模型)
是HTML文档对象模型（HTML DOM）定义的一套标准方法，用来访问和操纵HTML文档

查找HTML元素

//获取html元素
    //getElementById("id属性值"):通过id属性值来获取元素，因为id具有唯一性，所以通过此函数获取的元素只有一个
    var idTestEle = document.getElementById('test');
    console.log(idTestEle);

    //getElementsByTagName("标签名")，通过标签名称来获取元素因为一个页面中可能有多个同名的标签，所以此函数将获取来的元素放在一个类似于数组的集合中(HTMLCollections)
    var pELes = document.getElementsByTagName("p");
    console.log(pELes);
    console.log(pELes[1]);
    //输出所有的p元素
    for(var i=0;i<pELes.length;i++){
        console.log(pELes[i]);
    }

    //getElementsByClassName("calss属性值")：通过class属性来获取元素，因为class属性可以被不同的标签重复使用，所以此函数获取的元素可能有多个，将获取的元素存放在一个类书数组的集合中(HtmlCollections)
    var classDemoEles = document.getElementsByClassName("demo");
    console.log(classDemoEles);
    console.log(classDemoEles[0]);
    for (var i in classDemoEles){
        if(i==0|i==1|i==2){
            console.log(classDemoEles[i]);
        }
        
    }

    console.log("------------------------")
    //querySelector("#id/.class/标签名")此函数只获取页面中满足要求的第一个元素
    var testIdEle = document.querySelector("#test");
    console.log(testIdEle);

    var demoClassEle=document.querySelector(".demo");
    console.log(demoClassEle);

    var liEle = document.querySelector(li);
    console.log(liEls);
    //querySelectorAll("#id/.class/标签名");因为class属性值可以被不同的标签使用/一个页面中可以有多哥同名的标签，此函数获取的元素肯会有多个，此函数将获取的元素存放到一个
    var demoClassElements= document.querySelectorAll('.demo');
    console.log(demoClassElements);

    var liElements= document.querySelectorAll('li')
    console.log(liElements);
    for(var i=0;i<liElements.length;i++){
        console.log(liElements[i]);
    }

    //注意：使用getElementsByTagName("标签名")
    var h3ELe = document.querySelectorAll("h3");
    console.log(h3ELe);

    //总结：在CSS和JS中过你要操作html元素，第一步要做的事情就是找到这个元素，css中是选择器来找，js中是上述操作

改变HTML

改变CSS

<script>
    //定义函数
    function changestyle(){
        //第一步获取p元素
        var pEle = document.querySelector('p');
        pEle.style.fontSize = '40px';
    }
</script>

JavaScript 计时事件

setInterval()方法
       setInterval("调用的函数",间隔的毫秒数)
   clearInterval()方法
       clearInterval(setInterval()返回的ID值)
   setTimeout()方法
       setTimeout("调用的函数",等待的毫秒数)
   clearTimeout()方法
       clearTimeout(setTimeOut()返回的ID值)
       clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout
   setInterval()与setTimeout特点及区别
       特点
           setInterval()和setTimeout()用来处理延时和定时任务
       区别
           setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式，而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式