Episodio 07 de Web Collection (objeto JavaScriptBOM y nodo DOM)

Uno, objeto BOM

1. Introducción a la lista de materiales

El nombre completo de BOM es "Modelo de objetos del navegador", el modelo de objetos del navegador. Proporciona una serie de propiedades y métodos para operar el navegador. El objeto principal es el objeto de ventana, que no necesita ser creado manualmente. Se genera automáticamente después de ejecutar la página web y se usa directamente. Se puede omitir la escritura al usarlo.

2. Método de objeto

① Ventana emergente de página web

alert()		//警告框
confirm()	//确认框

② Método del temporizador

Función de temporizador periódico : ejecuta el código cada cierto período de tiempo

//开启定时器:
var timerID = setInterval(function,interval);
/*
参数 :
 function : 需要执行的代码,可以传入函数名;或匿名函数
 interval : 时间间隔,默认以毫秒为单位 1s = 1000ms
返回值 : 返回定时器的ID,用于关闭定时器
*/

Apague el temporizador:

//关闭指定id对应的定时器
clearInterval(timerID);

Función de temporizador de una sola vez : cuánto tiempo esperar antes de ejecutar el código

//开启超时调用:
var timerId = setTimeout(function,timeout);
//关闭超时调用:
clearTimeout(timerId);

Demostración 【Práctica de tiempo】

<h1>时间练习</h1>
        <script>
            function addZero(num){
     
     
                return  num<10?'0'+num:num+'';
            }
            
            function countDown(){
     
     
                var now = new Date();
                var festival= new Date('2019/3/3 12:00:00');
                var leftTime = parseInt((festival-now)/1000);
                var h1 = document.getElementsByTagName('h1')[0];
                if(leftTime<=0){
     
       
                    var html = '时间已经过去啦~';
                    h1.innerHTML = html;
                    console.log(1);
                    clearInterval(timer);//停止定时器
                    return //退出函数
                }
                var date_num = addZero(parseInt(leftTime/(3600*24)));
                var hour = addZero(parseInt(leftTime/3600 % 24));
                var minute = addZero(parseInt(leftTime/60 % 60));
                var second = addZero(leftTime % 60);               
                var html = `${
       
       date_num}天${
       
       hour}时${
       
       minute}分${
       
       second}秒`;
                h1.innerHTML = html;
            }
            countDown();
            // 周期性定时器  1秒钟执行一次函数
            var timer = setInterval(countDown,1000);//ID
    
        </script>

3. Propiedades del objeto

La mayoría de las propiedades de la ventana son tipos de objetos.

① historia

Función: guarda los
atributos de URL visitados por la ventana actual: la longitud indica el número de URL visitadas por la ventana actual
Método:

back() 对应浏览器窗口的后退按钮，访问前一个记录
forward() 对应前进按钮，访问记录中的下一个URL

② ubicación

• Función: guarda la información de la barra de direcciones (URL) de la ventana actual
• Atributo: href Establecer o leer la información de la barra de direcciones de la ventana actual
• Método:

reload(param) 重载页面(刷新)
参数为布尔值，默认为 false，表示从缓存中加载，设置为true,强制从服务器根目录加载

Dos, operación del nodo DOM

El nombre completo de DOM es "Modelo de objeto de documento", que proporciona métodos para manipular documentos HTML. (Nota: cada archivo html se considera un documento en el navegador, y operar un documento es en realidad elementos de página operativos).

1. Objeto de nodo

JavaScript encapsulará los elementos, atributos, texto e incluso comentarios en documentos html, llamados objetos de nodo, y proporcionará atributos y métodos relacionados.

2. Visita el nodo

• Nodo de elemento (etiqueta de acción)
• Nodo de atributo (atributo de etiqueta de operación)
• Nodo de texto (el contenido de texto de la etiqueta de operación)

Los atributos de etiqueta son los atributos del objeto de nodo de elemento, al que se puede acceder utilizando la sintaxis de puntos, por ejemplo:

h1.id = "d1"; 		 //set 方法
console.log(h1.id);  //get 方法
h1.id = null;		//remove 方法

Nota:

• El valor del atributo se expresa como una cadena
• Es necesario cambiar el nombre del atributo de clase className para evitar conflictos con palabras clave, por ejemplo:
  h1.className = "c1 c2 c3";

3. Estilo del elemento operativo

1. Agregue los atributos id y class al elemento, correspondiente al estilo del selector
2. Opere el estilo en línea del elemento, acceda al atributo de estilo del nodo del elemento y obtenga el objeto de estilo; el objeto de estilo contiene atributos CSS y usa operaciones de sintaxis de puntos.

p.style.color = "white";
p.style.width = "300px";
p.style.fontSize = "20px";

Nota:

• El valor del atributo se da en forma de cadena y la unidad no se puede omitir.
• Si el nombre de la propiedad css contiene un conector, cuando se usa el acceso JS, el conector siempre se quita y se cambia a camel case, font-size -> fontSize

Cúpula 【historia】

BOM.html

 <style>
        #a{
     
     
            color: blue;
            text-decoration: underline;
        }
        #a:hover{
     
     
            cursor: pointer;
        }
        #a:active{
     
     
            color: red;
        }
    </style>
</head>
<body>
    <button id="btn1">前进</button>
    <button id="btn2">后退</button>
    <a href="history1.html">history1</a>
    <span id="a">Tmooc</span>

    <script>
        var a = document.getElementById('a');
        a.onclick =function(){
     
     
            console.log(location.href)
            location.href = 'http://www.baidu.com';
        }

        console.log(history.length);
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');
        btn1.onclick = function(){
     
     
            history.forward()
        }
        btn2.onclick = function(){
     
     
            history.back()
        }

        // var res = confirm('确定要删除么');
        // console.log(res);

        // function sayHello(){
     
     
        //     // console.log('hello world');
        //     alert('hello world');
        // }
        // // 周期定时器
        // setInterval(sayHello ,1000);

        // setInterval(function(){
     
     
        //     alert('hello world');
        // },1000)

        // 练习 完成端午节倒计时操作
        // 将之前的代码封装到函数中  使用周期性定时器调用函数

        // setTimeout(function(){
     
     
        //     alert('你好')
        // },5000)

    </script>

history1.html

<h1>
        This is page 1
    </h1>
    <a href="history2.html">history2</a>
    <script>
        console.log(history.length)
    </script>

history2.html

 <h1>
                This is page2
            </h1>
            <a href="BOM.html">BOM</a>
            <script>
                console.log(history.length)
            </script>

Demostración 【Imagen de carrusel】

Realice la función de carrusel manual y temporizador

 <title>Document</title>
    <style>
        #silder{
     
     
            width: 739px;
            height: 419px;
            position: relative;
        }
        /* 大图片 */
        #silder>img{
     
     
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: all 0.5;
        }
        #silder>img.item.active{
     
     
            opacity: 1;
        }
        /* 左右小按钮 */
        #silder>.cart>img{
     
     
            position: absolute;
            top:50%;
            margin-top: -20px;
        }
        .left{
     
     
            left: 0;/*元素定位在左侧*/
        }
        .right{
     
     
            right: 0;/*元素定位在右侧*/
        }
        
    </style>
</head>
<body>
    <div id="silder">
    	<!--  -->
        <img  class="active" src="imgs/bg01.jpg" alt="">
        <img class="item" src="imgs/bg02.jpg" alt="">
        <img class="item" src="imgs/bg03.jpg" alt="">
        <img class="item" src="imgs/bg04.jpg" alt="">
        <img class="item" src="imgs/bg05.jpg" alt="">
        <div class="cart">
            <img class="left" src="imgs/logo.png" alt="">
            <img class="right"  src="imgs/logo2.png" alt="">
        </div>
    </div>

    <script>
        // 左侧按钮
        var left_btn = document.getElementsByClassName('left')[0];
        // 右侧按钮
        var right_btn = document.getElementsByClassName('right')[0];
        //默认显示的是第一张图片
        var i = 0
        
        //找图片
        var items = document.getElementsByClassName('item')
        console.log(items)
        // v1.0 手动
        // 点击左侧按钮时
        // 将第一个图片的active类取消  给第五个图片加active
        // 将第五个图片的active类取消  给第四个图片加active
        // ...
       


        // 点击右侧按钮时
        // 将第一个图片的active类取消  给第二个图片加active
        // 将第二个图片的active类取消  给第三个图片加active
        // ...
        // 将第五个图片的active类取消  给第一个图片加active

        left_btn.onclick = function(){
     
     
            items[i].className = 'item';//去掉当前的图片active
            i--;
            if(i<0){
     
     
                i = items.length-1;//最后一张图的索引值
            }
            items[i].className = "item active";//将找到的图片添加active
        }

        right_btn.onclick = function(){
     
     
            items[i].className = 'item';//去掉当前的图片active
            i++;//找下一个图片的索引
            if(i==items.length){
     
     //最后一张图递增变成第一张图
                i = 0;
            }
            items[i].className = "item active";//将找到的图片添加active
        }
        
         right_btn.onclick = function(){
     
     
            items[i].className = 'item';//去掉当前的图片active
            i++;//找下一个图片的索引
            if(i==items.length){
     
     //最后一张图递增变成第一张图
                i = 0;
            }
            items[i].className = "item active";//将找到的图片添加active
        }

        // v2.0自动
        //将右侧按钮点击功能直接交给定时器
        var timer = setInterval(right_btn.onclick,1500)
        var silder = document.getElementById('silder');
        // 创建定时器 执行(点击右侧按钮)函数
        // 鼠标移入停止定时器
        // 鼠标移出启动定时器

        //当鼠标移入到silder上停止定时器
        silder.onmouseover = function(){
     
     
            clearInterval(timer)
        }

        //当鼠标移出silder启动定时器
        silder.onmouseout = function(){
     
     
            // 新启动的定时器的id要保存在全局 供停止定时器的函数使用
            timer = setInterval(right_btn.onclick,1500)
        }

    </script>

Demostración 【Cómo obtener una identificación】

 <div id="div1"></div>
    <script>
        //方法1
        // document.getElementById('div1').innerHTML = 'hello world';
        //方法2
        // var div = document.getElementById('div1');
        // div.innerHTML = 'hello world';
        // 方法3
        // 封装id函数
        function $(id){
     
     
            return document.getElementById(id)
        }
        $('div1').innerHTML = 'hello world'
    </script>