JS day0820 - 技术栈

ok了家人们今天学习Dom对象，和一个综合案例，一起去看看吧。

一.BOM对象

Browser Object Model 浏览器对象模型。

JavaScript 将浏览器的各个组成部分封装为对象

Window ：浏览器窗口对象。对象表示浏览器中打开的窗口
Navigator：浏览器对象。对象包含有关浏览器的信息。
Screen：屏幕对象的信息对象包含有关客户端显示屏幕的信息
History：历史记录对象。对象包含用户（在浏览器窗口中）访问过的 URL。
Location：地址栏对象对象包含有关当前URL的信息。

直接使用 window调用window对象中的属性和函数，其中window. 可以省略

属性：获取其他 BOM对象

1.1 window对象

函数

alert()显示带有一段消息和一个确认按钮的警告框。

prompt()方法用于显示可提示用户进行输入的对话框。这个方法返回用户输入的字符串。

window.confirm(提示信息) 确认框返回true/false let 变量名 = window.setInterval(匿名函数,毫秒)；该函数表示 JavaScript中的定时器，每隔多少毫秒就会执行一次匿名函数体中的函数体。

window.clearInterval(定时器变量名)：取消定时器

let 变量名 = window.setTimeout(匿名函数,毫秒)；该函数表示 JavaScript中的定时器，每隔多少毫秒就会执行一次匿名函数体中的函数体，只会执行一次。

javascript 复制代码

    <script>
        //alert()显示带有一段消息和一个确认按钮的警告框
        alert("你看你（）呢，")

        //prompt()方法用于显示可提示用户进行输入的对话框。这个方法返回用户输入的字符串。
        let username=prompt("请输入您的账号给我盗一下");
        console.log(username);

        //let 变量名 = window.setInterval(匿名函数,毫秒)；该函数表示
        //JavaScript中的定时器，每隔多少毫秒就会执行一次匿名函数体中的函数体
        let time=setInterval(function(){
            alert("你在看xx")

            //window.clearInterval(定时器变量名)： 取消定时器
            window.clearInterval(time)// 取消定时器

        },1000);

        //let 变量名 = window.setTimeout(匿名函数,毫秒)；该函数表示
        //JavaScript中的定时器，每隔多少毫秒就会执行一次匿名函数体中的
        //函数体，只会执行一次。
        let time02=setTimeout(function(){
            alert("还看！！！")
        },1000)

        
    </script>

定时切换图片：每隔1秒，灯泡切换一次状态。

javascript 复制代码

<body>
    <input type="button" value="开灯" onclick="on()"/>
    <img src="img/on.gif" id="myImg"/>
    <input type="button" value="关灯" onclick="off()"/>
    
    <script>
        function on(){
        let img=document.getElementById("myImg");
        img.src="img/on.gif";
        }

        function off(){
        let img=document.getElementById("myImg");
        img.src="img/off.gif";
        }

        let num=0;
        setInterval(function(){
            if(num%2==0){
                on();
            }else{
                off();
            }
        },1000);
    </script>
</body>

1.2 history(了解)

获取：使用 window.history获取，其中window. 可以省略： window.history.方法()；

方法：

forward()：加载 history 列表中的下一个 URL

back()：加载 history 列表中的前一个 URL

javascript 复制代码

<body>
    <a href="liaxi02.html">跳转到下一个网页</a>
    <button onclick="fn01()">前进</button>
    <script>
        //forward()：加载 history 列表中的下一个 URL
        function fn01(){
            window.history.forward();
        }
    </script>
</body>

java 复制代码

<body>
    <a href="lianxi.html"></a>
    <button onclick="fn02()">后退</button>
   
    <script>
        // back()：加载 history 列表中的前一个 URL
        function fn02(){
            window.history.back();
        }
    </script>
</body>

1.3 location(掌握)

获取：使用 window.location获取，其中window. 可以省略。 window.location.方法();

属性：href：设置或返回完整的URL

javascript 复制代码

<body>
    <script>
        setInterval(
        function fn01(){ 
            window.location.href="https://www.baidu.com";
        },5000)
    </script>
   
</body>

二.DOM(掌握)

2.1 DOM对象概述

Document Object Model 文档对象模型。将标记语言的各个组成部分封装为对象。

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象

注意事项：

DOM:文档对象模型，操作html标签的文本属性 css样式以及事件的。
DOM中将所有的标签封装成对象 img标签 ===>Image 对象
所有标签的父对象是Element。

2.2 获取和操作 Element

获取：使用Document对象的方法来获取

getElementById：根据id属性值获取，返回一个Element对象
getElementsByTagName：根据标签名称获取，返回Element对象数组
getElementsByName：根据name属性值获取，返回Element对象数组
getElementsByClassName：根据class属性值获取，返回 Element对象数组

javascript 复制代码

<body>
    <img src="img/off.gif" id="myImg">

    <div class="cls">hello</div>
    <div class="cls">world</div>

    <input type="checkbox" name="hobby">吃饭
    <input type="checkbox" name="hobby">睡觉
    <input type="checkbox" name="hobby">打游戏

    <script>
       //getElementById：根据id属性值获取，返回一个Element对象
       //    let img=document.getElementById("myImg");
       //    console.log(img);

       //修改图片地址 src属性:设置或返回图像的 URL。
       let img=document.getElementById("myImg");
       img.src="off.gif"

       //getElementsByTagName：根据标签名称获取，返回Element对象数组
       //    let div=document.getElementsByTagName("div");
       //    console.log(div);
       
       //设置字体颜色为红色:element.style 设置或返回元素的 style 属性。
       //更改文本:element.innerHTML 设置或返回元素的内容
       let div=document.getElementsByTagName("div");
       for(let i=0;i<div.length;i++){
            let divs=div[i];
            divs.style.color="red";
            divs.innerHTML="红温了"
       }

        //getElementsByName：根据name属性值获取，返回Element对象数组
        //获取上述所有的name属性值是hobby的标签
        // let arrInput=document.getElementsByName("hobby");
        // console.log(arrInput.length);

        //设置复选框被选中:checked 设置或返回 checkbox 是否应被选中
        let inputarr=document.getElementsByName("hobby");
        for(let i=0;i<inputarr.length;i++){
            let input=inputarr[i];
            if(i==1){
                input.checked=true;
            }
        }

        //getElementsByClassName：根据class属性值获取，返回Element对象数组
        //获取class是cls的标签
        let divClass=document.getElementsByClassName("cls");
        console.log(divs.length);
    </script>
   
</body>

三.事件监听

3.1 事件概述

事件：HTML 事件是发生在 HTML 元素上的"事情"。

比如：

按钮被点击
鼠标移动到元素之上
按下键盘按键

事件监听：JavaScript 可以在事件被侦测到时执行代码

3.2 事件绑定

事件绑定有两种方式：

方式一：通过 HTML标签中的事件属性进行绑定

javascript 复制代码

 <button onclick="fn01()">点我试试</button>
    <script>
        function fn01(){
            alert("试试就逝世")
        }
    </script>

方式二：通过 DOM 元素属性绑定

javascript 复制代码

<button id="btn" class="btn">点我试试</button>

    <script>
         document.getElementById("btn").onclick=function(){
             alert("别点了geigei");
        };

      
        document.getElementsByClassName("btn")[0].onclick=function(){
            alert("你再点我一个试试呢");
        };
    </script>

3.3 常见事件

3.3.1 onsubmit事件

javascript 复制代码

 <form  method="get" action="#" id="loginForm">
        <input type="text" name="username" id="username">
        <input type="submit" value="登录">
    </form>

    <script>
        //1.给表单绑定提交事件
        document.getElementById("loginForm").onsubmit=function(){
            //2.获取输入框的值
            let inputValue=document.getElementById("username").value;
            //3.判断
            if(inputValue===""){
                //4.阻止表单提交
                fn01(); 
                return false; 
            }else{
                //5.提交表单
                return true;
            }
        };
    </script>
    <script>
        function fn01(){
            alert("你输入的账号为空请重新输入")
        }
    </script>

注意：表单提交事件onsubmit()。对于该事件，如果阻止表单提交，绑定的匿名函数体返回false。可以提交表单返回true。

3.3.2 onload事件

javascript 复制代码

 <script>
        //1.给表单绑定提交事件
        //document.getElementById("loginForm").onsubmit=function(){
        window.onload=function(){
            //2.获取输入框的值
            let inputValue=document.getElementById("username").value;
            //3.判断
            if(inputValue===""){
                //4.阻止表单提交
                fn01(); 
                return false; 
            }else{
                //5.提交表单
                return true;
            }
        };
   
        function fn01(){
            alert("你输入的账号为空请重新输入")
        }
    </script>
</head>
<body>
    
    <form  method="get" action="#" id="loginForm">
        <input type="text" name="username" id="username">
        <input type="submit" value="登录">
    </form>
</body>

3.4 表单验证（综合案例）

当输入框失去焦点时，验证输入内容是否符合要求
获取表单输入框
绑定 onblur事件
获取输入内容
判断是否符合规则
如果不合符规则，则显示错误提示信息
当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不合符则阻止表单提交
获取表单对象
为表单对象绑定 onsubmit
判断所有输入框是否都符合要求，如果符合，则返回true，如果有一项不符合，则返回false

javascript 复制代码

<body>
    <!-- 完成表单校验 -->
    <form id="reg-form" action="#" method="get">
        <table>
        <tr>
        <td>用户名</td>
        <td>
        <input name="username" 
       type="text" id="username" onblur="checkUsername()">
        <!--display: none 属于css语法，表示
       隐藏标签  -->
        <span id="username_err" 
       class="err_msg" style="color: red; display: none">用
       户名不太受欢迎</span>
        </td>
        </tr>
        <tr>
        <td>密码</td>
                       <td>
                           <input name="password" 
       type="password" id="password" 
       onblur="checkPassword()">
                           <span id="password_err" 
       class="err_msg" style="color: red; display: none">密
       码格式有误</span>
                       </td>
                   </tr>
                   <tr>
                       <td>手机号</td>
                           <td class="inputs"><input 
       name="tel" type="text" id="tel" onblur="checkTel()">
                           <span id="tel_err" 
       class="err_msg" style="color: red; display: none">手
       机号格式有误</span>
                       </td>
                   </tr>
               </table>
               <div>
                   <input value="注 册" type="submit" 
       id="reg_btn">
               </div>
           </form>

        <script>
        //1. 验证 用户名是否符合规则：长度 6~12,单词字符组成
        function checkUsername(){
        //1.1 获取值
        let usernameValue=document.getElementById("username").value;
        //1.2 设置正规表达式
        let reg=new RegExp("^\\w{6,12}$");
        //1.3 判断
        if(reg.test(usernameValue)){
            document.getElementById("username_err").style.display="none";
            return true;
        }else{
            document.getElementById("username_err").style.display="block";
            return false;
        }
    }

        //2. 验证 密码是否符合规则:长度 6~12任意字符
        function checkPassword(){
          //1.1 获取值
          let pwdValues=document.getElementById("password").value;
          //1.2 设置正规表达式
          let reg=new RegExp("^\.{6,12}$");
          //1.3 判断
          if(reg.test(pwdValues)){
            document.getElementById("password_err").style.display="none"
            return true;
          }else{
            document.getElementById("password_err").style.display="block"
            return false;
          }  
        }
        //3. 验证 手机号是否符合规则：长度 11，数字组成，第一位是1
        function checkTel(){
            //获取值
            let telValue=document.getElementById("tel").value;
            //1.2 设置正规表达式
            let reg=new RegExp("^1[356789]\d{9}/$");
            //1.3 判断
            if(reg.test(telValue)){
                document.getElementById("tel_err").style.display="none";
                return true;
            }else{
                document.getElementById("tel_err").style.display="block";
                return false;
            }
        }
        //4. 表单是否可以提交
        let formValue=document.getElementById("reg-form").onsubmit=function(){
            //if(checkUsername && checkPassword && checkTel === true){
            return checkUsername && checkPassword && checkTel;
           // }else{
               // document.getElementById("reg_btn").style.cursor="not-allowed";
           // }
        };
        
        </script>
    
</body>

ok了家人们明天见，