您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

Web精选07集（JavaScriptBOM对象与DOM节点）

时间：04-25来源：作者：点击数：54

一、BOM 对象

1. BOM 介绍

BOM全称为“Browser Object Model”，浏览器对象模型。提供一系列操作浏览器的属性和方法。核心对象为window对象，不需要手动创建，跟随网页运行自动产生，直接使用，在使用时可以省略书写。

2. 对象方法

① 网页弹框

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

② 定时器方法

周期性定时器

作用：每隔一段时间就执行一次代码

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

关闭定时器 :

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

一次性定时器

作用：等待多久之后执行一次代码

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

Demo【时间练习】

<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. 对象属性

window的大部分属性又是对象类型

① history

作用：保存当前窗口所访问过的URL

属性 : length 表示当前窗口访问过的URL数量

方法 :

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

② location

作用：保存当前窗口的地址栏信息(URL)
属性 : href 设置或读取当前窗口的地址栏信息
方法 :

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

二、DOM节点操作

DOM全称为 “Document Object Model”，文档对象模型，提供操作HTML文档的方法。（注：每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。）

1. 节点对象

JavaScript 会对 html 文档中的元素、属性、文本甚至注释进行封装，称为节点对象，提供相关的属性和方法。

2. 访问节点

元素节点 ( 操作标签）
属性节点（操作标签属性）
文本节点（操作标签的文本内容）

标签属性都是元素节点对象的属性,可以使用点语法访问，例如：

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

注意 :

属性值以字符串表示
class属性需要更名为 className，避免与关键字冲突，例如：
h1.className = “c1 c2 c3”；

3. 操作元素样式

为元素添加 id、class属性，对应选择器样式
操作元素的行内样式，访问元素节点的style属性，获取样式对象；样式对象中包含CSS属性，使用点语法操作。

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

注意 :

属性值以字符串形式给出，单位不能省略
如果css属性名包含连接符，使用JS访问时，一律去掉连接符,改为驼峰， font-size -> fontSize

Dome【history】

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>

Demo【轮播图】

实现手动与定时器轮播功能

 <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>

Demo【获取id方式】

 <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>