JavaScript的BOM 对象和DOM节点操作

一、BOM 对象

1. BOM 介绍

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

2. 对象方法

  1. 网页弹框
    alert()		//警告框
    confirm()	//确认框
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BOM</title>
</head>
<body>
    <button id="btn">删除</button>
    <script>
        //alert()
        //prompt()
        //确认框
        //当btn被点击时,弹出确认弹框,提示用户是否删除

        window.onload = function(){
            //查找btn
            var btn = document.getElementById('btn')
            btn.onclick = function(){
                //confirm 会根据用户的选择返回不同的结果:确定是true,取消是false
                var isDel = confirm('确定删除?')
                console.log(isDel)
                if(isDel){
                    alert('删除成功')
                }
            }
        }
    </script>
</body>
</html>
  1. 定时器方法

周期性定时器
作用:每隔一段时间就执行一次代码

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

关闭定时器 :

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

一次性定时器
作用:等待多久之后执行一次代码

//开启超时调用:
var timerId = setTimeout(function,timeout);
//关闭超时调用:
clearTimeout(timerId);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定时器timer</title>
</head>
<body>
    <button id="btn">清除周期性定时器</button>
    <script>
        //周期性定时器
        function sayHello(){
            alert('Hello World')
        }
        //创建周期性定时器
        //setinterval(函数名,时间间隔)
        //时间间隔单位是毫秒
        // var timer = setInterval(sayHello, 2000)

        var btn = document.getElementById('btn')
        btn.onclick = function(){
        //停止计时器,clearinterval(),清除周期性定时器
        clearInterval(timer)
        timer = null
        }


        //创建一次性定时器(通常用于延迟做某些事)
        var timer2 = setTimeout(sayHello, 2000)
        //清除一次性定时器
        clearTimeout(timer2)
        timer2 = null


    </script>
</body>
</html>

3. 对象属性

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

  1. history

    作用:保存当前窗口所访问过的URL
    属性 : length 表示当前窗口访问过的URL数量
    方法 :

    back() 对应浏览器窗口的后退按钮,访问前一个记录
    forward() 对应前进按钮,访问记录中的下一个URL
    
  2. 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. 操作元素样式

  1. 为元素添加 id、class属性,对应选择器样式
  2. 操作元素的行内样式,访问元素节点的style属性,获取样式对象;样式对象中包含CSS属性,使用点语法操作。
p.style.color = "white";
p.style.width = "300px";
p.style.fontSize = "20px";
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM文档对象模型</title>
    <style>
        .red{
            color: red;
        }
        .blue{
            color: blue;
        }
    </style>
    <script>
        window.onload = function(){
            //查找元素
            var div = document.getElementById('d1');
            // var div = document.getElementsByName();                                 //获取表单控件对应的name值的
            // var div = document.getElementsByClassName('red');             //找到的是一系列元素,集合
            // var div = document.getElementsByTagNameNS('div');           //找到的是一系列元素,集合

            //对元素内容的操作      innerHTML,  innerText
            console.log(div.innerHTML);                //直接访问,打印的文字是带格式的
            console.log(div.innerText);                   //打印不带格式的文本文字
            div.innerHTML = '2020-1-2';                 //修改元素内容

            //对元素属性的操作
            //找到的div是一个DOM对象,    通过对象.属性的方式操作
            console.log(div.id);                             //div.getAttribute('id')
            div.id = 'div1';                                        //改id,程序自上而下运行,不会影响其他操作  div.setAttribute('id', 'div1')
            console.log(div.id);
            
            console.log(div.className);             //查看类名
            div.className = 'blue';
            console.log(div.className)              //该类名


            //对元素样式的操作
            console.log(div.style);
            div.style.backgroundColor = 'lightblue';            //与之前的属性命名不同了,background-color:'lightblue'
        }
    </script>
</head>
<body>
    <div id="d1" class="red" style="width: 200px; height:200px; border:2px solid blue">
        div中的演示文字
    </div>
</body>
</html>

注意 :

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值