第2篇快速入门—js基础实战BOM--浏览器对象模型、DOM
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了第2篇快速入门—js基础实战BOM--浏览器对象模型、DOM,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含7798字,纯文字阅读大概需要12分钟。
内容图文
![第2篇快速入门—js基础实战BOM--浏览器对象模型、DOM](/upload/InfoBanner/zyjiaocheng/286/26c81d904ea54e6588b31396ecae3edb.jpg)
BOM:把浏览器窗口封装成对象模型,供js进行访问。最重要的一个对象是:window
<!DOCTYPE html> <html> <head> <title>BOM--浏览器对象模型</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function resizeWindow(){ window.resizeTo(500, 300) } </script> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <pre> BOM:把浏览器窗口封装成对象模型,供js进行访问。最重要的一个对象是:window </pre> <h3>window中的属性演示</h3> <script type="text/javascript"> function fun1(){ window.status = "湖南城市学院......" //window.pageXOffset="200px"; //IE不支持 //window.dialogHeight="200"; //deprecated alert("aa"); //window.resizeTo(500,400); //window.resizeBy(-100,-100); } function aa(){ //alert("Aaaa"); alert(window.innerHeight); } </script> <input type="button" value="window对象中的status属性演示" onclick="fun1();"> <br/> <input type="button" onclick="aa();" value="文档窗口高度"> <br/> <a href="aa.html">前进</a> <hr/><input type="button" onclick="locationDemo();" value="window中的location对象属性"> <script type="text/javascript"> function locationDemo(){ //alert( window.location.href); alert(window.location.hostname); //通过window.location.href属性实现页面跳转 window.location.href = "http://www.baidu.com"; } </script> <br/> <input type="button" onclick="navigatorDemo();" value="window中的Navigator对象属性"> <br/> <script type="text/javascript"> function navigatorDemo(){ alert( window.navigator.appName); alert( window.navigator.appVersion); } </script> </body> </html>
两种定时器:
一次性定时器:setTimeout(),clearTimeout()
周期性定时器;setInterval(),clearInterval()
<!DOCTYPE html> <html> <head> <title>BOM--浏览器对象模型</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <h3>window中的方法演示</h3> <script type="text/javascript"> function fun1(){ window.close();//关闭窗口 } function fun2(){ var boo = window.confirm("是否真的要做某事?");//消息确认 if (boo) { alert("做某事...."); } else { alert("不做某事...."); } } function fun3(){ window.moveBy(10, 10);//经测试,当前浏览器,不支持 } </script> <input type="button" value="window对象中的close()方法演示" onclick="fun1();"> <br/> <input type="button" value="window对象中的confirm()方法演示" onclick="fun2();"> <br/> <input type="button" value="window对象中的moveBy()方法演示" onclick="fun3();"> <br/> <br/> <br/> <!--///////////////以下演示定时器////////////////// --> <!--这个定时器是一次性的,setTimeout(),clearTimeout()--> <input type="button" value="启动定时器1" onclick="start1();"> <br/> <input type="button" value="关闭定时器1" onclick="stop1();"> <br/> <script type="text/javascript"> var t1;//全局变量 function start1(){ t1 = window.setTimeout("aa()", 1000);//返回值为当前闭定时器的id } function aa(){ alert("aaa....."); } function stop1(){ t1 = window.clearTimeout(t1);//指定所关闭定时器的id } </script> <!--这个定时器是周期性的,setInterval(),clearInterval()--> <input type="button" value="启动定时器2" onclick="start2();"> <br/> <input type="button" value="关闭定时器2" onclick="stop2();"> <br/> <script type="text/javascript"> var t2; function start2(){ //t2=window.setInterval("bb()",2000); t2=setInterval("bb()",2000);//返回值为当前闭定时器的id } function bb(){ //window.alert("bbbbbbb....."); alert("bbbbbbb....."); } function stop2(){ //window.clearInterval(t2); //指定所关闭定时器的id clearInterval(t2); //指定所关闭定时器的id } </script> <hr/> <!--打开新窗口: open() --> <input type="button" value="新开一个窗口" onclick="demo();"> <br/> <script type="text/javascript"> function demo(){ //window.open(URL,name,features,replace) window.open("ad.html","ad","height=300,width=300,status=no,location=no"); } </script> <input type="button" onclick="disp_prompt()" value="Display a prompt box" /> <br/> <script type="text/javascript"> function disp_prompt(){ var name=prompt("Please enter your name","") if (name!=null && name!="") { document.write("Hello " + name + "!") } } </script> <input type="button" onclick="disp_scrollBy()" value="Display scrollBy" /> <br/> <script type="text/javascript"> function disp_scrollBy(){ scrollBy(10, 10);//模拟用户点击滚动条动作 } </script> <h2>为了演示滚动效果</h2> <h2>为了演示滚动效果</h2> <h2>为了演示滚动效果</h2> <h2>为了演示滚动效果</h2> <h2>为了演示滚动效果</h2> <h2>为了演示滚动效果</h2> <h2>为了演示滚动效果</h2> <h2>为了演示滚动效果</h2> </body> </html>
小例子
<!DOCTYPE html> <html> <head> <title>ad.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <h2>一条广告消息</h2> <h2>一条广告消息</h2> <h2>一条广告消息</h2> <form> Name:<input type="text" name="name"> <input type="submit" value="注册"> </form> <script type="text/javascript"> //3秒后自动关闭窗口 setTimeout("window.close();",3000); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>BOM---浏览器对象模型</title> <script> function resizeWindow() { window.resizeTo(500,300) } </script> </head> <body> <h3>history演示中的第二个页面</h3> <script> function fun1(){ //"window."可以省略 //window.history.back(); //go(-1) history.back();//go(-1) } </script> <a href="#" onclick="fun1 ();">后退</a> </body> </html>
DOM--文档对象模型
文档对象模型(DOM: Document Object Model):
文档:标记型文档(HTML,XML)。特征:里面除了标签,就是标签封装的内容
对象:封装了属性和行为的实体,可以被直接调用。
模型:所有标记型文档都具备一些共有特征的一个体现。
DOM = BOM(浏览器对象模型) + DOM(文档对象模型)
DHTML:动态HTML,它不是一门语言,是多项技术综合体的简称。DHTML = HTML + CSS + DOM + JS
技术边界:
HTML: 负责提供标签,对数据进行封装,目的是便于对该标签中的数据进行操作。
CSS: 负责提供样式属性,对标签中的数据进行样式的定义。
DOM: 负责将标记型文档以及文档中的所有内容进行封装成对象,解析。在对象中定义了更多的属性和行为,便于对对象进行操作。
JS: 负责提供程序设计语言。--if, for, var , function, ...
<!DOCTYPE html> <html> <head> <title>DOM--文档对象模型</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </script> <style type="text/css"> .d { background-color: #00ff00; width: 200px; height: 40px; } </style> </head> <body> <pre> 文档对象模型(DOM: Document Object Model): 文档:标记型文档(HTML,XML)。特征:里面除了标签,就是标签封装的内容 对象:封装了属性和行为的实体,可以被直接调用。 模型:所有标记型文档都具备一些共有特征的一个体现。 DOM = BOM(浏览器对象模型) + DOM(文档对象模型) </pre> <pre> DHTML:动态HTML,它不是一门语言,是多项技术综合体的简称。 DHTML = HTML + CSS + DOM + JS 技术边界: HTML: 负责提供标签,对数据进行封装,目的是便于对该标签中的数据进行操作。 CSS: 负责提供样式属性,对标签中的数据进行样式的定义。 DOM: 负责将标记型文档以及文档中的所有内容进行封装成对象,解析。 在对象中定义了更多的属性和行为,便于对对象进行操作。 JS: 负责提供程序设计语言。--if, for, var , function, ... </pre> <p id="p1"> </p> <input type="button" value="dhtml简单演示" onclick="aa();"> <script type="text/javascript"> function aa(){ var objp = document.getElementById("p1"); //设置纯文本 //objp.innerText=objp.innerText+"湖南城市学院"; //设置HTML格式串 objp.innerHTML = objp.innerHTML + "<button>aa</button>" objp.className = "d"; } </script> </body> </html>
相关文章:
第1篇快速入门—js基础实战中的Date、Math、Global对象
第3篇快速入门—js基础实战应用代码分享
相关视频:
前端JS开发27个经典实战视频教程-免费在线视频教程
以上就是第2篇快速入门 —js基础实战BOM--浏览器对象模型、DOM的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的第2篇快速入门—js基础实战BOM--浏览器对象模型、DOM全部内容,希望文章能够帮你解决第2篇快速入门—js基础实战BOM--浏览器对象模型、DOM所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。