标签：编程 对象 元素 location BOM 跳转 document 页面
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获取一组元素，返回数组。运行结里
标签：编程,对象,元素,location,BOM,跳转,document,页面 来源： https://blog.csdn.net/Bennettgxd/article/details/114604825
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。