前端全栈学习第十三天-js-WebAPI-DOM 第一天

￡神魔★判官ぃ 2021-09-18 11:12 373阅读 0赞

1：js的三部分

2：dom操作页面元素(一件事有触发，有响应，有事件源)：基本元素操作，表单元素操作

3：元素的样式操作

1：js三部分
    a:ECMAscript:js基本语法
    b:DOM文档对象模型 -- 操作页面的元素--dom树由文档和文档中所有的元素组成的树状结构图
    c:BOM 浏览器对象模型 --操作浏览器
    2：dom操作页面元素
    A:基本元素操作
    操作元素的时候，一般都是通过按钮的方式。这时候按钮点击叫做事件触发，里面执行的叫事件响应，事件源是你要事件响应的元素
    每次你要想操作，你就得先获取，但是每次都document.getElementById显然有点费事，这时候把它封装在一个文件里面
    Function  my$(id){
    Return  document.getElementById(id);
    }
    用的时候调用就行
    案例1
    <input type="button" value="点我" id="bt"/>
    <input type="button" value="边长边宽" id="bt1"/>
    <img src="" alt="" id="im"/>
    <script src="../../common.js"></script>
    <script>
        //点击按钮显示图片，修改长宽
        //事件触发
    my$("bt").onclick = function () {
    //事件响应
          //事件源  my$("im").src = "../../images/5.jpg"; //src不用style
            my$("im").width = "50";
            my$("im").height = "50";// 特有属性不用style也行？像素不加px也行！
        }
    值得注意的是，一个图片的title和alt ，Width，height，src是本身自带的，所以设置他的属性的时候不用style也行，不用style后面也就不用px
    案例2：修改p标签的内容
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <input type="button" value="点我" id="bt"/>
    <p id="p">大家好</p>
    <script src="../../common.js"></script>
    <script>
    my$("bt").onclick = function(){
        my$("p").innerHTML  ="不好"
    //    区分innerText和innerHtml，
    //    innerText：只是获取标签之间的文字，成对的标签
    //    innerHTML：连标签带文字一起获取
    }
    </script>
    </body>
    </html>
    修改一个基本元素的内容，innerText:修改的时候如果有标签，会将标签一起带着
    innerHTML：只是修改内容，不带标签
    案例3：修改多个p标签的内容
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <input type="button" value="点我" id="bt"/>
    
    <p>大家好</p>
    
    <div id="dv1">
        <p>好</p>
    
        <p>好</p>
    
        <p>好</p>
    </div>
    
    <script src="../../common.js"></script>
    <script>
        my$("bt").onclick = function () {
    //        var pObj = document.getElementsByTagName("p") //getElementByTagName返回值是一个伪数组
            var pObj = my$("dv1").getElementsByTagName("p") //注意选择的范围，由大到小
    
            console.log(pObj);
            for (var i = 0; i < pObj.length; i++) {
                pObj[i].innerHTML = "不好";
    
            }
        }
    </script>
    </body>
    </html>
    获取多个标签的内容，用的方法getElementByTargetsName();这个方法的返回值是一个伪数组，所以要获取所有的p标签，需要通过循环的方式，得到每一个p，然后修改他的值。innerHTML 如果有标前，也只是要内容
    案例4：修改所有文本框的值
    方法和p一样，只不过文本框都是input，如果type类型不一样，但是value值都是字符串，这个时候就需要加判断
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <input type="button" value="点我" id="bt"/>
    
    <input type="text" value="哈哈"/>
    <input type="text" value="哈哈"/>
    <input type="text" value="哈哈"/>
    <input type="text" value="哈哈"/>
    <input type="text" value="哈哈"/>
    <input type="text" value="哈哈"/>
    <script src="../../common.js"></script>
    <script>
        my$("bt").onclick = function () {
            var inputObj = document.getElementsByTagName("input");
            for (var i = 0; i < inputObj.length; i++) {
                if (inputObj[i].type != "button") { //注意这里是字符串 tyoe number ，string
                    inputObj[i].value = "你好";
    
                }
            }
        }
    </script>
    </body>
    </html>
    If(InputObj[i] type !=”button”){
    改变值，这里用innerHTML和value都可以
    值得注意的是type后面可以是字符串，数字，布尔类型，所有button要加双引号
    }
    案例5：按钮的排他功能
    排他功能第一步，循环遍历所有按钮，为每个按钮注册点击事件。点击事件里面有两步，第一步；将所有的按钮值设置为默认值，然后将当前的值改为想要改的值，这里需要注意，获取标签名，是TagName
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    
    <input type="button" value="哈哈"/><br/>
    <input type="button" value="哈哈"/><br/>
    <input type="button" value="哈哈"/><br/>
    <input type="button" value="哈哈"/><br/>
    <input type="button" value="哈哈"/><br/>
    <input type="button" value="哈哈"/><br/>
    <script src="../../common.js"></script>
    <script>
        var inputObj = document.getElementsByTagName("input");
        for (var i = 0; i < inputObj.length; i++) {
            //            wei每个按钮注册点击事件
            inputObj[i].onclick = function () {
                //            把所有按钮的value设置为默认值
                for (var j = 0; j < inputObj.length; j++) {
                    inputObj[j].value = "哈哈";
                }
                //            将当前按钮设置为
                this.value = "mnp" //这里不能用inputObj[j]，for循环是在页面加载完毕的时候，执行完毕了
            }
        }
    </script>
    </body>
    </html>
    
    案例6：修改性别
    其实这个案例主要就是在表单中，如果属性和值只有一个，并且这个值是本身，那么在写js代码，DOM操作的时候，这个值，只要是boolean类型就可以
    Disabled,selection,checked
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <input type="button" value="点我" id="bt"/>
    <input type="radio" name="sex" id="rad1" value="1"/>男
    <input type="radio" name="sex" id="rad2" value="2"/>女
    <script src="../../common.js"></script>
    <script>
        //规律：在表单标签中，如果属性和值只有一个，并且值是这个属性本身，那么在写js代码，DOM操作的时候，这个属性值，是布尔类型就可以
        my$("bt").onclick = function () {
            my$("rad1").checked = true; //只要是非空字符串就可以
    //        html中的属性和值都是自己的，并且只有一个，其实可以只写这个属性，不用赋值
    //disabled ====>这个属性是禁用
    //        selection
        }
    </script>
    </body>
    </html>
    
    案例7：点击按钮，显示和隐藏按钮
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            #dv {
                width: 200px;
                height: 200px;
                background-color: #DB192A;
            }
        </style>
    </head>
    <body>
    <input type="button" value="显示" id="bt"/>
    
    <div id="dv"></div>
    <script src="../../common.js"></script>
    <script>
        my$("bt").onclick = function () {
            console.log("是的");
    
            if (this.value == "显示") {
                my$("dv").style.display = "none";
                this.value = "隐藏";
            }
            else if (this.value == "隐藏") {
                my$("dv").style.display = "block";
                this.value = "显示";
            }
        }
    </script>
    </body>
    </html>
    这个的思路是你只有一个按钮，所以注册点击事件是在一个按钮上面，然后在里面进行value值得判断，判断玩之后再改回来
    案例11 --用类样式的方法操作上面的案例 主要用到className=””
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .cls {
                width: 200px;
                height: 200px;
                background-color: #DB192A;
            }
        </style>
    </head>
    <body>
    <input type="button" value="显示" id="bt"/>
    
    <div id="dv" class="cls"></div>
    <script src="../../common.js"></script>
    <script>
        my$("bt").onclick = function () {
            if (my$("dv").className != "cls") {
                my$("dv").className = "cls";
                this.value = "显示"
            }
            else {
                my$("dv").className = "";
                this.value = "隐藏"
            }
        }
    </script>
    </body>
    </html>
    案例12 开关灯
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .cls {
                background-color: black;
            }
        </style>
    </head>
    <body class="cls">
    <input type="button" value="开/关灯" id="bt"/>
    <script src="../../common.js"></script>
    <script>
        my$("bt").onclick =function(){
            document.body.className = document.body.className!="cls"?"cls":"";
        }
    //如果body的className = cls那么就是关灯，如果不是，就将body的className设置为空，这样没有值，就是页面的颜色，白色，正好做到了黑白开关

简单总结：

1：学了怎样获取页面中的元素，通过id，但是哪一串太长了，所以封装起来。缺点是每次只能获取一个

2：通过标签名 TagName ，由于你获取到的是一组，而且是伪数组，如果想要对标签一样的进行操作哦，就需要循环遍历；当然你要是想取其中某一个，可以通过\[\]数组的方式来获取；当你想要在一堆标签中选一组，你就要缩小范围，document.getElementsByTagName中的document是页面中的所有，你可以用

var pObj = my$("dv1").getElementsByTagName("p")

来缩小范围

3：说完基本元素，就是表单元素：表单元素

属性和值是同一个，那么在下js代码，操作DOM的时候，只写属性或者这个属性值是布尔类型就可以

4：按钮的排他功能：排他工能的思路是

先获取所有的按钮，由于是所有的，然后循环遍历每一个，并且为每一个注册点击事件。当你点击的时候其实发生了两件事，先是将所有到的按钮值设置为默认值，(这个时候就需要再循环遍历所有的按钮)，然后设置当前的按钮值，

5：修改所有文本框的值，由于所有文本框都是在input里面，input里面包括文本，按钮，文本域，这时候就需要判断类型，来确定你输入的就是文本框，

每一个都要判断，判断的是类型

if (inputObj\[i\].**type** != "button")

6：按钮的显示隐藏

第一种是id，做一个判断，value值是不是显示，是的话隐藏，并且将下次的value设置为显示

第二种className的方式，如果他的className不是cls(字符串)，那么就将他的className设置为clas；如过className是cls，就将className设置为空