Java教程

BOM编程

本文主要是介绍BOM编程，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

BOM编程

  • 1、bom
  • 2、页面跳转
  • 3、document对象
    • 3.1.访问页面元素

内容：
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所示。

window history document location Link form anchor button checkbox text ... textarea radio select

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>

解释：

  1. window对象的confirm()函数用于弹出确认对话框，确认对话框中包含提示的文本和确
    认和取消按钮。当点击确认按钮时，返回true值，当点击取消按钮时返回false值。
  2. 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>

解释：

  1. document对象的getElementByld()可根据元素的id获取元素，返回单个对象。
  2. document对象的 getElementsByTagName()可根据标签名称获取一组元素，返回数组。
  3. document对象的getElementsByName()可根据元素的name获取一组元素，返回数组。运行结里
这篇关于BOM编程的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航