JS_10

一、DOM的认知

JS是由三部分组成:

ECMAScript:简称ES,它是欧洲计算机协会大概每年的六月中旬定制的语法规范

DOM:全称document object model 即为文档对象模型

BOM:全称browser object model 即为浏览器对象模型

1.1、节点树

概述:节点即为标签。节点之间的关系称为节点树。

 

 DOM:文档对象模型可以理解为是整个节点树最外层‘根元素’

 DOM其实就是JS语言中内置引用类型document对象,DOM对象经常用来操作节点(标签)。比如:操作节点的样式、属性、文本

<script>
    //DOM:内置document对象,引用类型数据
    //DOM是整个页面元素的‘根元素’
    console.log(document);
    console.log(typeof document);
</script>

1.2、DOM属性

 概述:DOM:document object model :在JS中是一种引用类型的数据,官方提供了很多的属性和方法进行操作标签

1.2.1、documentElement:获取到节点树的HTML标签

<script>
    //documentElement属性:获取节点树的html标签
    console.log(document.documentElement);
</script>

 

 

 1.2.2、head:获取到head标签

<script>
    //head属性:获取节点树的head标签
    console.log(document.head);
</script>

 

 

 1.2.3、title属性:获取到节点title标签的文本

<script>
    //title属性:获取节点树title标签中的文本部分
    console.log(document.title);
</script>

 

 1.2.4、body属性:获取到节点树的body标签

<script>
    //body属性:获取节点树的body标签
    console.log(document.body);
</script>

 

 1.3、DOM方法

概述:DOM对象,官方提供了很多方法来操作节点树上的标签。

1.3.1、getElementById:他是DOM对象方法,可以通过标签ID选择器在JS中去获取标签

<script>
    //利用getElementById方法可以通过id选择器来获取到任意的标签,注意这个方法实质上是一个函数,参数要传对应名字的字符串形式
    var element = document.getElementById("box");
    var eleCur = document.getElementById("cur");
    console.log(element);
    console.log(eleCur);
</script>

 

 

不管节点(标签)在网页中嵌套的有多深,都可以通过这个方法获取到 

补充知识:标签的数据类型是Object

1.4、操作节点属性

概述:我们可以通过通过DOM方法来获取到节点树上的任意节点(标签),经常通过点语法来操作节点的属性、文本、样式等。

<script>
    var ele = document.getElementById("box");
    //可以通过点语法来操作节点的属性
    console.log(ele.id);
    //要注意在操作class属性时要写.className才能进行相应的操作。
    console.log(ele.className);
    //改变id的属性(重新赋值,注意值是字符串形式的)
    ele.id = "Cur1";
    ele.className = "Cur2";
</script>

 

1.5、操作节点文本

概述:我们可以通过过DOM对象提供的方法获取对应的节点,也可以通过点语法去操作节点的文本

操作节点的文本分为两种情况:
第一种是操作表单元素文本,通过value属性进行操作

第二种是操作非表单 元素文本,需要通过innerHTML属性进行操作

<script>
    //非表单元素:不是input标签即可。如div span a imag等
    //非标单元素操作文本需要使用innerHTML属性进行操作
    var p = document.getElementById("cur");
    //获取文本
    console.log(p.innerHTML);
    //修改文本(多次修改后面覆盖前面)
    p.innerHTML = "12345600";
    //表单元素操作文本:通过value属性
    var input  = document.getElementById("cur1");
    //获取文本
    console.log(input.value);
    //修改文本
    input.value = "通过JS动态修改表单元素文本";
</script>

 

 

 1.6、操作节点样式

概述:可以通过DOM方法获取节点,可以操作节点属性、文本和行内样式

样式:层叠样式表,样式可以美化网页、可以通过浮动、定位改变他们在网页中的位置。

样式分为三种写法:行内样式、内部样式、外链样式。

行内样式:

<div style = "width:100px;height:100px">正在学习web前端</div> 

内部属性:

 

 外链样式:

通过link标签引入外部样式,在href属性里面添加css的路径

<body>
    <p id = "box" style = "width:100px ; height :100px ; color : red ; font-size:14px">
        我在学习web前端
    </p>
</body>
</html>
<script>
    var p = document.getElementById("box");
    //获取行内样式(获取到的结果是一个JSON对象)
    console.log(p.style);
    //获取具体的样式
    console.log(p.style.height);
    console.log(p.style.width);
    console.log(p.style.color);
    console.log(p.style["font-size"]);
    //修改行内样式(右侧属性值要为字符串形式的)
    p.style.width = "200px";
    p.style.color = "yellow";
    //修改带-的样式时把-去掉之后采用驼峰命名法来设置,例如font-size
    p.style.fontSize = "20px";
</script>

 

 二、事件绑定

概述:在网站当中,用户经常进行鼠标移上或单击某个元素,这个元素可以对用户的行为进行相应。像这种现象称之为“事件绑定”。说白了就是任何机器进行交互

注意:在JS中只有标签才可以绑定事件

element.onxxxx = function (){


}

 onxxxx这些时间名字都是小写的

 右侧部分是一个事件处理函数:当用户触发事件的时候才会执行一次

2.1、onclick和ondblclick

概述:可以通过onclick和ondblclick来给元素绑定单击和双击事件

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    div{
        background-color:red;
        font-size: 14px;
        color:cyan;
        width: 400px;
        height: 400px;
        margin: 0 auto;
        text-align: center;
        line-height:400px;
    }
    </style>
</head>
<body>
    <div id = "box">
        123
    </div>
</body>
</html>
<script>
    var div = document.getElementById("box");
    //添加双击事件绑定
    div.ondblclick = function(){
        //修改的是行内样式
        div.style.backgroundColor = "yellow";
        div.style.fontSize =" 20px";
    }
</script>

 从常理上来说给已给任意元素绑定单击事件,但是在工作中,一般只给非表单元素绑定单击事件

2.2、信号量思想

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    div{
        background-color:red;
        color:cyan;
        width: 400px;
        height: 400px;
        margin: 0 auto;
        text-align: center;
        line-height:400px;
    }
    </style>
</head>
<body>
    <div id = "box">
        123
    </div>
</body>
</html>
<script>
    var div = document.getElementById("box");
    //先声明一个全局变量fs用于记录字体的大小
    var fs = 12 ;
    //添加单击事件绑定
    div.onclick = function(){
        //设置每单击一次使得文字字体变大一号(并且最大字号为60px)
        fs++;
        if(fs <= 60){
        div.style.fontSize = fs + "px";
        }
    }
</script>

 信号量:就是一个全局变量,控制程序走向的一个变量

2.2.1、轮播图

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
       }
       div{
           width: 330px;
           height: 330px;
           margin:100px auto;
           border:1px solid black;
           position: relative;
       }
       #lbtn{
           position: absolute;
           left: 0;
           top:165px;
       }
       #rbtn{
           position: absolute;
           right: 0;
           top:165px;
       }
    </style>
</head>
<body>
    <div>
        <button id = "lbtn"><</button>
        <button id = "rbtn">></button>
        <img src="./images/0.png" alt="" id = "box">
    </div>
</body>
</html>
<script>
    var lbtn = document.getElementById("lbtn");
    var rbtn = document.getElementById("rbtn");
    var img = document.getElementById("box");
    var idx = 0;
    rbtn.onclick = function(){
        idx++;
        idx = idx > 3 ? 0 : idx;
        img.src = "./images/" + idx +".png";
    }
    lbtn.onclick = function(){
        idx--;
        idx = idx >= 0 ? idx : 3;
        img.src = "./images/" + idx +".png";
    }
</script>

 2.3、onmouseenter和onmouseleave

概述:鼠标移上和鼠标移下事件(onmouseenter和onmouseleave)

    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            width: 200px;
            height: 200px;
            margin: 200px auto;
        }
    </style>
</head>
<body>
    <div>
        <img src="./images/0.png" alt="" id = "box">
    </div>
</body>
</html>
<script>
    var img = document.getElementById("box");
    box.onmouseenter = function(){
        img.src = "./images/1.png";
    }
    box.onmouseleave = function(){
        img.src = "./images/0.png";
    }
</script>

 鼠标移上和鼠标移除切换图片的例子

一个节点可以绑定多个事件

鼠标移上:onmouseenter onmouseover

鼠标移除:onmouseleave onmouseout

2.4、聚焦和失焦事件

onfocus和onblur

概述:聚焦和失焦事件一般和表单元素input一起使用,因为只有表单元素才有文字

        
<body   
<p>

请输入您的手机号码:<input type="text" id = "box"> <span id = "cur"></span> </p> </body> </html> <script> var input = document.getElementById("box"); var span = document.getElementById("cur"); input.onfocus = function(){ input.style.fontWeight = "700"; } input.onblur = function(){ var txt = input.value;
//正则表达式验证字符串 if(/^1[3456789]\d{9}/.test(txt)){ span.innerHTML = "是正确的的手机号码"; }else{ span.innerHTML = "请输入正确的手机号码"; } } </script>

  2.5、鼠标系列事件

 常用的鼠标系列事件:

(鼠标左右键均起作用,而onmouseclick只在鼠标左键点击时才会触发)

onmousedown:鼠标按下事件

onmousemove:鼠标在元素上移动就会触发

onmouseup:鼠标抬起事件

<script>
    //鼠标一次完整的点击包括按下和抬起,即onmousedown onmouseup
    //鼠标按下事件:onmousedown
    document.onmousedown = function(){
        var R = parseInt(Math.random()*255);
        var G = parseInt(Math.random()*255);
        var B = parseInt(Math.random()*255);
        document.body.style.background = "rgb(" + R +"," + G + "," + B + ")";
    }
    // //鼠标移动事件:onmousemove
    document.onmousemove = function(){
        var R = parseInt(Math.random()*255);
        var G = parseInt(Math.random()*255);
        var B = parseInt(Math.random()*255);
        document.body.style.background = "rgb(" + R +"," + G + "," + B + ")";
    }
    //鼠标抬起事件:onmouseup
    document.onmouseup = function(){
        var R = parseInt(Math.random()*255);
        var G = parseInt(Math.random()*255);
        var B = parseInt(Math.random()*255);
        document.body.style.background = "rgb(" + R +"," + G + "," + B + ")";
    }
</script>

 三、获取节点的其他方法

getElementById:通过节点的ID属性值获取标签

getElementsByTagName:通过标签的名字获取节点,这个方法返回的是一个数组,数组里面的元素是节点

getElementsByClassName:通过标签的class属性获取相应节点。这个方法给我们返回数组,数组里面的的元素是节点

querySelector:可以通过任意的选择器获取节点

3.1、getElementsByTagName

<body>
    <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    
</body>
</html>
<script>
    //getElemntsByTagName:通过标签的名字来获取所有节点,不管该节点嵌套多深,注意用该方法获得的节点存储在一个类数组中,只能通过遍历类数组的元素来给标签设置样式
    var arr = document.getElementsByTagName("li");
    //通过遍历类数组的元素(节点)来设置样式
    for(var i = 0 ; i < arr.length ; i++){
        arr[i].style.color = "red";
    }
</script>

3.2、getElementsByClassName

<body>
    <ul>
        <li>123</li>
        <li class = "cur">123</li>
        <li>123</li>
    </ul>
    <p class = "cur">123456</p>
    <p>654321</p>
</body>
</html>
<script>
    //getElementsByClassName:通过类名来获取到满足要求的节点,存储到一个类数组中,同样的,只能给类数组的元素(即节点)进行样式设置
    var arr = document.getElementsByClassName("cur");
    for(var i = 0 ; i < arr.length ; i++){
        arr[i].style.background = "red";
    }
</script>

 3.3、querySelector

<body>
    <ul>
        <li>123</li>
        <li>123</li>
        <li class = "cur">123</li>
        <li id = "box">123</li>
        <li>123</li>
    </ul>
    <p class = "cur">123456</p>
    <p id = "box">123456</p>
</body>
</html>
<script>
    //querySelector:通过任意选择器(id class等等)获取节点,返回值是一个节点,(如果有多个标签符合要求则会从上到下返回满足要求的第一个标签)
    var ele = document.querySelector("li");
    var ele1 = document.querySelector(".cur");
    var ele2 = document.querySelector("#box");
    ele.style.color = "red";
    ele1.style.color = "cyan";
    ele2.style.color = "yellow";
</script>

  四、批量添加节点事件

情形:需要给很多相同的标签添加同样的事件,此时可以用到批量添加节点事件

思想:

第一步:通过getElementsByTagName("")获取节点类数组

第二步:通过for循环与IIFE来添加事件

    <style>
        *{
            margin : 0 ;
            padding: 0;
        }
        ul{
            width:100%;
            background : #eee;
            overflow : hidden;
        }
        li{
            padding: 20px;
            list-style:none;
            float: left ;
        }
    </style>
</head>
<body>
    <ul>
        <li>新闻</li>
        <li>体育</li>
        <li>教育</li>
        <li>游戏</li>
        <li>直播</li>
    </ul>
</body>
</html>
<script>
    var liArr = document.getElementsByTagName("li");
    for (var i = 0 ; i < liArr.length ; i++){
        //IIFE拥有自己独立的作用域,如果不采用IIFE的形式的话,每次传递的i值都是5,无法满足点击要求
        +function(index){
            liArr[index].onclick = function(){
                liArr[index].style.color = "red";
            }
        }(i);
    }
</script>

  

 

 

 

 方法二:用this

<script>

var liArr = document.getElementsByTagName("li");
    for (var i = 0 ; i < liArr.length ; i++){
      liArr[i].onclick = function(){
          this.style.color = "red";
      }
    }
</script> 

  淘宝二级菜单的制作

<script>
    var liArr = document.getElementsByTagName("li");
    var rt = document.getElementById("right");
    for(var i = 0 ; i < liArr.length ; i++){
        +function(index){
        //鼠标进入
        liArr[index].onmouseenter = function(){
        //首先让所有文字恢复起始状态
        // for(var j = 0 ; j < liArr.length ; j++){
        //     liArr[j].style.color = "black";
        // }
        //添加鼠标移上事件
        liArr[index].style.color = "pink";
        rt.style.display = "block";   
        rt.innerHTML = "购买的商品" + index; 
        }
        //添加鼠标移除事件
        liArr[index].onmouseleave = function(){
            liArr[index].style.color = "black";
            rt.style.display = "none";
        }
        }(i);
    }
</script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

 

posted @ 2021-08-21 15:11  Viper7  阅读(47)  评论(0)    收藏  举报