第二章 JavaScript操作BOM对象

masa010

于 2024-10-03 20:39:32 发布

阅读量704

点赞数 19

分类专栏： java全栈学习网站开发文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_65279640/article/details/142695897

版权

java全栈学习同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

网站开发

3 篇文章 0 订阅

订阅专栏

1、目标

会使用getElementById方法访问DOM元素
会使用getElementByName访问DOM元素
会使用getElementsByTagName方法访问DOM元素
会使用定时函数和Data对象制作时钟特效

2、 BOM

2.1 BOM模型

BOM：浏览器对象模型（Browser Object Model）

BOM 是 Browser Object Model，浏览器对象模型。BOM 是为了控制浏览器的行为而出现的接口。

对于JavaScript：为了能够让JavaScript能控制浏览器的行为，JavaScript就有了一套自己的BOM接口。

BOM提供了独立于内容的、可以与浏览器窗口进行交互的对象结构

BOM可以实现功能

弹出新的浏览器窗口

移动、关闭浏览器窗口以及调整窗口的大小

页面的前进、后退

2.2 window对象

常用属性

属性名称	说明
history	有关客户访问过的URL的信息
location	有关当前 URL 的信息

语法

window.属性名 = "属性值"；
//示例
window.location = 'http://www.baidu.com' //实现页面跳转

常用方法

方法名称	说明
prompt( )	显示可提示用户输入的对话框
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm( )	显示一个带有提示信息、确定和取消按钮的对话框
close( )	关闭浏览器窗口
open( )	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( )	在指定的毫秒数后调用函数或计算表达式
setInterval( )	按照指定的周期（以毫秒计）来调用函数或表达式

confirm() 方法

confirm() 将弹出一个确认对话框

语法

confirm("对话框中显示的纯文本")

<script type="text/javascript">
   var flag=confirm("确认要删除此条信息吗？");
    if(flag==true)
	      alert("删除成功！");
      else
	       alert("你取消了删除");
</script>

confirm()与alert()、prompt() 区别

alert()：一个参数，仅显示警告对话框的信息，无返回值、不能对脚本产生任何改变

prompt() : 两个参数，输入对话框，用来提示用户输入一些信息，单机取消按钮则返回null，单击确定按钮则返回用户输入的值，常用于收集关于特定问题而反馈的信息

confirm() : 一个参数，确认对话框，显示提示对话框的信息，"确认"按钮和取消按钮，单击确认则返回true，单击取消按钮返回false，因此与if-else语句搭配使用

<script type="text/javascript">
    //alert
    alert("你好！！！")

    //prompt
    var r = prompt("你好！请输入信息：","默认信息")
    document.write("我是prompt的返回值" + r)
    //confirm
    var a = confirm("请确认输入信息是否有误")
    if(a){
        document.write("没有错误哦！")
    }else{
        document.write("有错误");
    }
</script>

open() 方法

window.open("弹出窗口的url","窗口名称","窗口特征")

属性名称	说明
height、width	窗口文档显示区的高度、宽度。以像素计
left、top	窗口的x坐标、y坐标。以像素计
toolbar=yes \| no \|1 \| 0	是否显示浏览器的工具栏。黙认是yes
scrollbars=yes \| no \|1 \| 0	是否显示滚动条。黙认是yes
location=yes \| no \|1 \| 0	是否显示地址地段。黙认是yes
status=yes \| no \|1 \| 0	是否添加状态栏。黙认是yes
menubar=yes \| no \|1 \| 0	是否显示菜单栏。黙认是yes
resizable=yes \| no \|1 \| 0	窗口是否可调节尺寸。黙认是yes
titlebar=yes \| no \|1 \| 0	是否显示标题栏。黙认是yes
fullscreen=yes \| no \|1 \| 0	是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式

<script type="text/javascript">
    window.open("https://mmjon.github.io","百度","width:200px;height:200px")

</script>

history对象

常用方法

名称	说明
back()	加载 history 对象列表中的前一个URL
forward()	加载 history 对象列表中的下一个URL
go()	加载 history 对象列表中的某个具体URL

location对象

常用属性

名称	说明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

常用方法

名称	说明
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

location和history对象的应用

主页面使用href实现跳转和刷新本页

//主页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>我是主页面</h1>
    <a href="javascript:location.href='flower.html'">查看鲜花详情</a>  

</body>
</html>


//鲜花页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>我是flower页面</h1>
    <a href="javascript:location.reload()">刷新本页</a>
    <a href="javascript:history.back()">返回主页面</a>
</body>
</html>

Document对象

常用属性

名称	说明
referrer	返回载入当前文档的URL
URL	返回当前文档的URL

document.referrer
document.url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    当前页面：
</body>
<script type="text/javascript">
//如果当前文档不是通过超级链接访问的，则为 null。
//这个属性允许客户端 JavaScript 访问 HTTP 引用头部。
//这里我们直接运行是不会显示内容的，当我们重新ctrl+s文件的时候才会显示   Live Server模式中
    document.write(document.referrer)
//URL 属性可返回当前文档的 URL。  直接显示
document.write(document.URL)
</script>
</html>

判断页面是否是连接进入
自动跳转到登陆页面

award.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script type="text/javascript">
    var preUrl=document.referrer;  //载入本页面文档的地址
if(preUrl==""){	
      document.write("<h2>您不是从领奖页面进入，5秒后将自动 跳转到主页面</h2>");
      setTimeout("javascript:location.href='yemian.html'",5000);
}

</script>
</html>

yemian.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="./award.html">领奖</a>
</body>
</html>

常用方法

名称	说明
getElementById()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByTagName()	返回带有指定标签名的对象的集合
write()	向文档写文本、HTML表达式或JavaScript代码

动态改变层、标签中的内容

访问相同name的元素

访问相同标签的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    姓名：<span id="name">张三</span>
    <button onclick="update()">修改名字</button>

    <span name="number">123</span>
    <span name="number">456</span>
    <span name="number">789</span>
    <button onclick="visit()">number</button>
    <button onclick="visittag()">Tag</button>
    <span name="replace"> </span>
</body>
<script type="text/javascript">

    //修改名字
    function update(){
        document.getElementById("name").innerHTML="李四";
    }

    //访问相同name的元素
    function visit(){
        var list = document.getElementsByName("number");
        var str = "";

        for(var i = 0; i < list.length;i++){
            str += list[i].textContent +" ";
        }
        // document.write(str)
        document.getElementsByName("replace")[0].textContent=str
    }
    //访问相同标签的元素
    function visittag(){
        var list = document.getElementsByTagName("span");
        var str = "";
        for(var i = 0; i < list.length;i++){
            str += list[i].textContent +" ";
        }
        document.getElementsByName("replace")[0].textContent=str
    }
</script>
</html>

3、JavaScript内置对象

Array：用于再单独的变量名中存储一系列的值

String：用于支持对字符串的处理

Math：用于执行常用的数学任务，它包含了若干个数字常量和函数

Date：用于操作日期和时间

Date对象

语法

var 日期对象 = new Date(参数)
参数格式： MM DD,YYYY,hh:mm:ss
例如：
var  today=new Date();   //返回当前日期和时间
var tdate=new Date("september 1,2013,14:58:12");

常用方法

方法	说明
getDate()	返回 Date 对象的一个月中的每一天，其值介于1～31之间
getDay()	返回 Date 对象的星期中的每一天，其值介于0～6之间
getHours()	返回 Date 对象的小时数，其值介于0～23之间
getMinutes()	返回 Date 对象的分钟数，其值介于0～59之间
getSeconds()	返回 Date 对象的秒数，其值介于0～59之间
getMonth()	返回 Date 对象的月份，其值介于0～11之间
getFullYear()	返回 Date 对象的年份，其值为4位数
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

制作时钟特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="clock"></div>
</body>
<script>
    function clock(){
        var now = new Date();
        var ss = now.getSeconds();
        var mm = now.getMinutes();
        var hh = now.getHours();

        document.getElementById("clock").innerHTML = hh + ":" + mm +":" + ss
    }
    clock();
</script>
</html>

Math对象

常用方法

方法	说明	示例
ceil()	对数进行上舍入	Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25
floor()	对数进行下舍入	Math.floor(25.5);返回25 Math.floor(-25.5);返回-26
round()	把数四舍五入为最接近的数	Math.round(25.5);返回26 Math.round(-25.5);返回-26
random()	返回0~1之间的随机数	Math.random();例如：0.6273608814137365

实现返回2-99的整数范围

var iNum=Math.floor(Math.random()*98+2);

随机选择颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="">
        <span >本次选择的颜色是： </span>
        <span id = "wz"></span>
        <button onclick="cc()">点击查看</button>
    </div>
</body>
<script>
function cc(){
    var array = new Array("红色","黄色","白色","蓝色")
    var num = Math.ceil(Math.random()*4)-1
    document.getElementById("wz").innerHTML = array[num]
}
</script>
</html>

定时函数

setTimeout()

语法

setTimeout("调用的函数",等待的毫秒数)

使用

var  myTime＝setTimeout("disptime() ", 1000 );

setInterval()

语法

setInterval("调用的函数",间隔的毫秒数)

使用

var  myTime＝setInterval("disptime() ", 1000 );

如果要多次调用，使用setInterval()或者让disptime()自身再次调用setTimeout()

清除函数

clearTimeout()

语法

clearTimeout(setTimeOut()返回的ID值)

使用

var  myTime＝setTimeout("disptime() ", 1000 );
clearTimeout(myTime)；

clearInterval ()

语法

clearInterval(setInterval()返回的ID值)

使用

var  myTime＝setInterval("disptime() ", 1000 );
clearInterval(myTime)；

练习

练习一、制作简易的当当购物车页面

Shopping

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>制作简易的当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<script src="./js/shopping.js"></script>
<body>
<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg"><span onclick="pagedown()">关闭</span>
    </div>
    <div class="cartList">
        <ul>
            <li onclick="collect()">移入收藏</li>
            <li onclick="del()">删除</li>
            <li onclick="collect()">移入收藏</li>
            <li onclick="del()">删除</li>
            <li><span onclick="pay()">结 算</span></li>
        </ul>
    </div>
</div>
</body>
</html>

//关闭
function pagedown(){
    window.close();
}

//收藏
function collect(){    
    if(confirm("请确认是否收藏")){
        alert("收藏成功")
    }else{
        alert("取消收藏")
    }
}

//删除
function del(){
    if(confirm("请确认是否删除")){
        alert("删除成功")
    }else{
        alert("取消删除")
    }
}

//结算
function pay(){
    if(confirm("请确认是否结算")){
        window.open("","结算页面","width:50px;height:100px;")
    }else{
        alert("取消删除")
    }
}

练习二、查看一年四季变化

这里只展示春天和主页面

spring.html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
<title>春</title>
<style type="text/css">
body{margin:0;}
img{
	border:0;
	padding:5px;    
	}
td{
	font-size:14px;
	line-height:20px;
	}
</style>

</head>

<body><table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="images/spring.jpg" alt="春天" /></td>
    <td>春来――爆竹声中一岁除，春风送暖入屠苏<br />
      春雨――小楼一夜听春雨，深巷明朝卖杏花<br />
      春花――惆怅东栏一株雪，人生看得几清明<br />
      春风――春风又绿江南岸，明月何时照我还<br />
      春光――等闲识得东风面，万紫千红总是春<br />
      春景――试上超然台上看，半壕春水一城花<br />
      春游――东风知我欲山，吹断檐间积雨声 <br />
      春思――春心莫共花争发，一寸相思一寸灰<br />
      春寂――春潮带雨晚来急，野渡无人舟自横<br />
      春愁――问君能有几多愁，恰似一江春水向东流<br />
      春梦――枕上片时春梦中，行尽江南数千里<br />
      春恨――人生自是有情痴，此恨不关风和月<br />
      春归――落红不是无情物，化作春泥更护花<br />
    <a href="javascript:location.href='./summer.html'">夏天</a> <a href="javascript:location.href='./autumn.html'">秋天</a> <a href="javascript:location.href='./winter.html'">冬天</a>  <a href="javascript:history.go(-1)">后退</a>   <a href="javascript:history.go(1)">前进</a></td>
  </tr>
</table>

</body>
</html>

index.html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
<title>查看一年四季的变化</title>
<style type="text/css">
table{
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top:1px #cccccc solid;
	border-left:1px #cccccc solid;
	width:400px;
	}
img{
	border:0;
	padding:5px;    
	}
td{
	font-size:14px;
	line-height:25px;
	text-align:center;
	border-bottom:1px #cccccc solid;
	border-right:1px #cccccc solid;
	}
</style>
</head>

<body><table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="images/1.jpg" /></td>
    <td><img src="images/2.jpg" /></td>
  </tr>
  <tr>
    <td><a href="javascript:location.href='./spring.html'">春</a></td>
    <td><a href="javascript:location.href='./summer.html'">夏</a></td>
  </tr>
  <tr>
    <td><img src="images/3.jpg" /></td>
    <td><img src="images/4.jpg" /></td>
  </tr>
  <tr>
    <td><a href="javascript:location.href='./autumn.html'">秋</a></td>
    <td><a href="javascript:location.href='./winter.html'">冬</a></td>
  </tr>
  <tr>
    <td colspan="2"><a href="javascript:location.reload()">刷新本页</a></td>
  </tr>
</table>

</body>
</html>

练习三：完善当当购物车页面

需求说明在练习1的基础上完善当当购物车页面计算商品总计

shopping.js

var alist = document.getElementsByName('amount');
//关闭页面
function close_plan(){
    window.close();
}
function del(){
    if(confirm("请确认是否删除")){
        alert("删除成功")
    }else{
        alert("取消删除")
    }
}
function collection(){
    if(confirm("请确认是否收藏")){
        alert("收藏成功")
    }else{
        alert("取消收藏")
    }
}
//数量加
function plus(num) {
    alist[num].value = parseInt(alist[num].value) + 1;
}

//数量减
function minus(num) {
    alist[num].value = parseInt(alist[num].value) - 1;
}
//计算总价
document.addEventListener("DOMContentLoaded", function () {
    var totalPrice = document.getElementById("totalPrice");
    var plist = document.getElementsByName('price');
    var alist = document.getElementsByName('amount');
    var mlist = document.getElementsByName('minus');
    var addlist = document.getElementsByName('plus');
    function sum() {
        var total = 0;
        for (var i = 0; i < plist.length; i++) {
            //设置数量不能为为空或小于0
            if (alist[i].value == '' || alist[i].value < 0) {
                alist[i].value = 0;
            }
            total += parseFloat(plist[i].value) * parseInt(alist[i].value);
            // alert(total)
        }
        totalPrice.innerHTML = total.toFixed(2)
    }
    for (var i = 0; i < plist.length; i++) {
        plist[i].addEventListener("input", sum)
        alist[i].addEventListener("input", sum)
        mlist[i].addEventListener("click", sum)
        addlist[i].addEventListener("click", sum)
    }
    sum()
});

//支付
function accounts(){
    var total = document.getElementById('totalPrice').textContent;
    if(confirm("总价：" + total + "，请打开支付宝进行支付")){
        window.open("","结算页面","width:50px;height:100px;")
    }else{
        alert("取消删除")
    }
}

shopping.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>访问当当购物车页面节点</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body>
<script src="./js/shopping.js"></script>
<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg"><span onclick="close_plan();">关闭</span>
    </div>
    <div class="cartList" id="cartList">
        <ul>
            <li>¥<input type="text" name="price" value="21.90"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(0);"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(0);"></li>
            <li id="price0">¥21.90</li>
            <li><p  onclick="collection();">移入收藏</p><p onclick="del();">删除</p></li>
        </ul>
        <ul>
            <li>¥<input type="text" name="price" value="24.00"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(1);"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(1);"></li>
            <li id="price1">¥24.00</li>
            <li><p  onclick="collection();">移入收藏</p><p onclick="del();">删除</p></li>
        </ul>
        <ol>
            <li id="totalPrice">&nbsp;</li>
            <li><span onclick="accounts();">结 算</span></li>
        </ol>
    </div>
    <div></div>
</div>
</body>
</html>

练习四、制作12进制的时钟特效

训练要点Date对象的使用setInterval( )方法的使用需求说明制作显示年、月、日、星期几，并且显示上午（AM）和下午（PM）的十二进制的时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="clock"></div>
</body>
<script>
    function cc(){
        var now = new Date();
        var YY = now.getFullYear();
        var MM = now.getMonth() + 1;
        var dd = now.getDate();
        var hh = now.getHours();
        var mm = now.getMinutes();
        var ss = now.getSeconds();
        var apm = hh>12 ? "pm":"am";
        var hh = hh%12;
        var hh = hh ? hh:12;
        var hh = hh<10 ? "0" + hh : hh;
        var mm = mm<10 ? "0" + mm : mm;
        var ss = ss<10 ? "0" + ss : ss;
        var dd = dd<10 ? "0" + dd : dd;
        var MM = MM<10 ? "0" + MM : MM;

        var week = now.getDay();
        switch(week){
            case 1: week = "星期一";break;
            case 2: week = "星期二";break;
            case 3: week = "星期三";break;
            case 4: week = "星期四";break;
            case 5: week = "星期五";break;
            case 6: week = "星期六";break;
            case 7: week = "星期七";break;

        }

        document.getElementById("clock").textContent = "当前时间是：" + YY +"年"+ MM +"月"+ dd +"日   "+ hh +":"+ mm +":"+ ss + "  " +apm + "   " + week;
    }
    setInterval(cc,1000);
    window.onload = cc;
</script>
</html>