09 BOM编程

最新推荐文章于 2024-11-03 20:03:09 发布

Bennett_gxd

最新推荐文章于 2024-11-03 20:03:09 发布

阅读量177

点赞数 1

分类专栏： Java进阶文章标签： html bom编程

本文链接：https://blog.csdn.net/Bennettgxd/article/details/114604825

版权

Java进阶专栏收录该内容

15 篇文章 0 订阅

订阅专栏

BOM编程

1、bom
2、页面跳转
3、document对象
- 3.1.访问页面元素
- 3.2 元素的隐藏与显示

内容：
1、bom
2、访问页面元素
3、操作页面元
能力目标：
1、能够掌握bom结构
2、能够使用javascript实现页面跳转
3、能够使用javascript控制元素隐藏与显示

1、bom

BOM(Browser Object Model)是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的window对象是BOM的顶层对象，window对象包含了三个子对象，分别是history对象、document对象、location对象。document对象包含了link对象、form对象、anchor对象。form对象包含了button对象、checkbox对象、text对象、textarea对象、radio对象、select对象等表单元素对象。BOM模型如图1所示。

BOM模型

2、页面跳转

location对象表示当前浏览器窗口中显示文档的Web地址，包含文档的完整URL以及URL的各个部分。location是JavaScript实现页面跳转的对象。

任务1：幸运跳转
制作一个幸运测试的网页，使用随机数产生3个等级，不同等级跳转到不同的网页。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面跳转</title>
</head>
<script type="text/javascript">
<!--confirm()函数弹出有确定和取消按钮的对话框，点击确定返回true,点击取消返回false-->
    if(window.confirm("马上开始测试，准备好了吗？")){
<!--    Math.round()函数用于产生0.0~1.0之间的一个随机数。-->
        var luckNum = Math.round(Math.random()*3);
<!--        根据不同的随机数，地址跳转向不同的页面-->
            if(luckNum==1){
               location.href = "http://www.baidu.com";
            }else if(luckNum==2){
               location.href = "https://leetcode-cn.com/";
            }else if(luckNum==3){
<!--            reload（）重新加载当前页面-->
               location.reload();
            }else{
               document.write("页面没出来，重新测试");
            }
    }else{
       document.write("刷新页面，可以重新开始测试信用数字");
    }
</script>
<body>
</body>
</html>

解释：

window对象的confirm()函数用于弹出确认对话框，确认对话框中包含提示的文本和确
认和取消按钮。当点击确认按钮时，返回true值，当点击取消按钮时返回false值。
window 对象的location 属性用于设置页面跳转的URL。

3、document对象

3.1.访问页面元素

JavaScript可以操作HTML元素，若要操作HTML元素首先要获取到被操作的元素。JavaScript的document对象提供了3种获取HTML元素的方法。

数据类型	具体描述
`getElementByld(selector`)	参数 `selector` 是`ID`选择器，返回对拥有指定`id`的第一个对象的引用
`getElementsByName(selector)`	参数`selector`是标签选择器，返回带有指定名称的对象的集合
`getElementsByTagName(selector)`	参数 `selector`是标签选择器，返回带有指定标签名的对象的集合表1获取元素的方法

任务2：获取页面元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用document方法获取页面元素</title>
    <style type="text/css">
        body{
            font-size:14px;
            line-height:30px;
        }
        input{
            margin:1px;
            width:90px;
            font-size:12px;
            padding:0;
        }
        #node{
            width:100px;
            font-size:24px;
            font-weight:bold;
            float:left;
        }
    </style>
    <script type="text/javascript">
        function changeLink(){
            document.getElementById("node").innerHTML="宋江";
        }
        function all_input(){
            var alnput = document.getElementsByTagName("input");
            var sStr = "";
            for(var i=0;i<alnput.length;i++){
                sStr += alnput[i].value+"<br/>";
            }
            document.getElementById("s").innerHTML=sStr;
        }
        function s_input(){
            var alnput = document.getElementsByName("mingzhu");
            var sStr = "";
            for(var i=0;i<alnput.length;i++){
                if(alnput[i].type=="text"){
                    sStr += alnput[i].value+"<br/>";
                }
            }
            document.getElementById("s").innerHTML=sStr;
        }
    </script>
</head>

<body>
<div id="node">武松</div>
<input name="b1" type="button" value="改变层内容" onclick="changeLink();">
<br/>
<input name="mingzhu" type="text" value="三国"/>
<input name="mingzhu" type="text" value="水浒传"/>
<input name="mingzhu" type="text" value="西游记"/>
<br/>
<input name="b2" type="button" value="显示所有input内容" onclick="all_input()"/>
<input name="b3" type="button" value="显示文本框的内容" onclick="s_input()"/>
<p id="s"></p>
</body>
</html>

解释：

document对象的getElementByld()可根据元素的id获取元素，返回单个对象。
document对象的 getElementsByTagName()可根据标签名称获取一组元素，返回数组。
document对象的getElementsByName()可根据元素的name获取一组元素，返回数组。运行结里

3.2 元素的隐藏与显示

JavaScript可以通过控制HTML元素的CSS的display属性来实现隐藏与显示，以实现诸如菜单，选项卡的效果。displsy的属性的值如表所示：

值	描述
none	表示此元素不会被显示
block	表示此元素将显示为块级元素，此元素前后会带有换行符。
inline	表示此元素将显示为内联元素，此元素前后不会带有换行符。
inline-block	块行块