欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

第2篇快速入门 —js基础实战BOM--浏览器对象模型、DOM

程序员文章站 2022-03-17 20:44:00
...

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的详细内容，更多请关注其它相关文章！

相关标签： -浏览器对象模型、DOM

上一篇： 原生JS怎么异步请求实现Ajax

下一篇： vue中el是什么意思

推荐阅读