社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > 第2篇快速入門 —js基礎實戰BOM--瀏覽器物件模型、DOM

第2篇快速入門 —js基礎實戰BOM--瀏覽器物件模型、DOM

php是最好的语言
發布： 2018-07-28 10:41:29
原創
1231 人瀏覽過


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 class="brush:php;toolbar:false">
  BOM:把浏览器窗口封装成对象模型，供js进行访问。最重要的一个对象是:window

window中的属性演示



前进


登入後複製

兩種計時器：

一次計時器：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 class="brush:php;toolbar:false">
  文档对象模型(DOM: Document Object Model):
  文档:标记型文档(HTML,XML)。特征:里面除了标签，就是标签封装的内容
  对象:封装了属性和行为的实体，可以被直接调用。
  模型:所有标记型文档都具备一些共有特征的一个体现。 
  
  DOM = BOM(浏览器对象模型) + DOM(文档对象模型)

  DHTML：动态HTML，它不是一门语言，是多项技术综合体的简称。
  DHTML = HTML + CSS + DOM + JS
  技术边界:
  HTML: 负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作。
  CSS: 负责提供样式属性，对标签中的数据进行样式的定义。
  DOM: 负责将标记型文档以及文档中的所有内容进行封装成对象，解析。
               在对象中定义了更多的属性和行为，便于对对象进行操作。
  JS: 负责提供程序设计语言。--if, for, var , function, ...

登入後複製

 相關文章：

第1篇快速入門—js基礎實戰中的Date、Math、Global物件

第3篇快速入門—js基礎實戰應用程式碼分享

#相關影片：

前端JS開發27個經典實戰影片教學-免費線上影片教學

#

以上是第2篇快速入門 —js基礎實戰BOM--瀏覽器物件模型、DOM的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
-浏览器对象模型、DOM
來源：php.cn
上一篇：第3篇快速入門—js基礎實戰應用程式碼分享 下一篇：第1篇快速入門—js基礎實戰中的Date、Math、Global對象
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
方法 .map 在應用程式 React 中不起作用 物件的.map方法不起作用，我無法與我匯入的API的物件互動。在瀏覽器的控制台上我讀取了該物件。這是一個組件razze("races")constBASE_UR...
來自於 2024-04-02 21:52:34
0
1
266
如何停止Javascript程式碼自動將hsl轉換為rgb 我有這段程式碼，我為一個物件分配顏色，然後使用條件來檢查該項目是否已被選擇。然而，條件不起作用，因為javascript（或瀏覽器）將hsl轉換為rgb，這會阻止任何匹配的發生。我...
來自於 2024-03-31 16:46:02
0
1
338
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板