JavaScript学习Day004(BOM和DOM)

什么是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;ilength;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;ilength;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()则可以在每隔指定的毫秒数循环调用函数或表达式

相关阅读:
TypeScript之常用类型
微信小程序 java多商家多用户网上商城购物系统#计算机毕业设计
三、静态路由实验
GPS 数据中的精度因子(DOP)与协方差之间的关系 (参考链接)
电子学会2021年6月青少年软件编程（图形化）等级考试试卷（四级）答案解析
使用股票程序交易系统应该注意哪些问题？
Call for Papers丨第三届GLB@KDD‘23 Workshop
【uniapp】小程序开发7：自定义组件、自动注册组件
48.HarmonyOS鸿蒙系统 App(ArkUI)常用组件的使用
JAVA经典百题之排序算法

原文地址：https://blog.csdn.net/qihaojinqiuma/article/details/126978503