BOM编程
内容：
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获取一组元素，返回数组。运行结里