HTML的DOM和瀏覽器的BOM

時間  2019-11-18
標籤 html dom 瀏覽器 bom 欄目 HTML 简体版
原文   原文鏈接

DOM和BOM的區別javascript

HTML DOM 的 document 是 BOM 的 window 對象的屬性之一：

 

經過可編程的對象模型，JavaScript 得到了足夠的能力來建立動態的 HTML。php

  • JavaScript 可以改變頁面中的全部 HTML 元素
  • JavaScript 可以改變頁面中的全部 HTML 屬性
  • JavaScript 可以改變頁面中的全部 CSS 樣式
  • JavaScript 可以對頁面中的全部事件作出反應

爲了作到這件事情，您必須首先找到該元素。有三種方法來作這件事：java

  • 經過 id 找到 HTML 元素
  • 經過標籤名找到 HTML 元素
  • 經過類名找到 HTML 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
var x=document.getElementsByClassName("intro");

在 JavaScript 中，document.write() 可用於直接向 HTML 輸出流寫內容。node

絕對不要在文檔加載完成以後使用 document.write()。這會覆蓋該文檔。web

如需改變 HTML 元素的內容，請使用這個語法：編程

document.getElementById(id).innerHTML=新的 HTML

如需改變 HTML 元素的屬性，請使用這個語法：瀏覽器

document.getElementById(id).attribute=新屬性值

如需改變 HTML 元素的樣式，請使用這個語法：cookie

document.getElementById(id).style.property=新樣式 
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

style="visibility:hidden"app

<input type="button" value="隱藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="顯示文本" onclick="document.getElementById('p1').style.visibility='visible'" />函數

onclick= JavaScript

HTML 事件的例子：

  • 當用戶點擊鼠標時
  • 當網頁已加載時
  • 當圖像已加載時
  • 當鼠標移動到元素上時
  • 當輸入字段被改變時
  • 當提交 HTML 表單時
  • 當用戶觸發按鍵時

document.getElementById("myBtn").onclick=function(){displayDate()};

onload 和 onunload 事件

onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。

onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些信息來加載網頁的正確版本。

onload 和 onunload 事件可用於處理 cookie。

實例

<body  onload="checkCookies()">
 
事件監聽器( ie9纔開始支持) 
<p>該實例使用 addEventListener() 方法在按鈕中添加點擊事件。 </p>
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

addEventListener() 方法用於向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不會覆蓋已存在的事件句柄。

你能夠向一個元素添加多個事件句柄。

你能夠向同個元素添加多個同類型的事件句柄，如：兩個 "click" 事件。

你能夠向任何 DOM 對象添加事件監聽，不只僅是 HTML 元素。如： window 對象。

addEventListener() 方法能夠更簡單的控制事件（冒泡與捕獲）。

當你使用 addEventListener() 方法時, JavaScript 從 HTML 標記中分離開來，可讀性更強， 在沒有控制HTML標記時也能夠添加事件監聽。

你可使用 removeEventListener() 方法來移除事件的監聽。

element.removeEventListener("mousemove", myFunction);

element.addEventListener(event, function, useCapture);

第一個參數是事件的類型 (如 "click" 或 "mousedown").

第二個參數是事件觸發後調用的函數。

第三個參數是個布爾值用於描述事件是冒泡仍是捕獲。該參數是可選的

注意:不要使用 "on" 前綴。 例如，使用 "click" ,而不是使用 "onclick"

傳遞參數

當傳遞參數值時，使用"匿名函數"調用帶參數的函數：

實例

element.addEventListener("click", function(){ myFunction(p1, p2); });

在 冒泡 中，內部元素的事件會先被觸發，而後再觸發外部元素，即： <p> 元素的點擊事件先觸發，而後會觸發 <div> 元素的點擊事件。

在 捕獲 中，外部元素的事件會先被觸發，而後纔會觸發內部元素的事件，即： <div> 元素的點擊事件先觸發 ，而後再觸發 <p> 元素的點擊事件。

addEventListener( event,  function,  useCapture);

默認值爲 false, 即冒泡傳遞，當值爲 true 時, 事件使用捕獲傳遞。

如何要阻止冒泡，以下

event.stopPropagation();  

或者

return false; 

跨瀏覽器解決方法:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 全部主流瀏覽器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

添加或者刪除元素節點

<script>
var para=document.createElement("p");
var node=document.createTextNode("這是一個新段落。");
para.appendChild(node);
//其實這裏用innerHTML也能夠
var element=document.getElementById("div1");
element.appendChild(para);
</script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);

DOM 須要清楚您須要刪除的元素，以及它的父元素。

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

 

瀏覽器BOM

瀏覽器對象模型（Browser Object Model (BOM)）尚無正式標準。

因爲現代瀏覽器已經（幾乎）實現了 JavaScript 交互性方面的相同方法和屬性，所以常被認爲是 BOM 的方法和屬性

 

Window 對象

全部瀏覽器都支持 window 對象。它表示瀏覽器窗口。

全部 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。

全局變量是 window 對象的屬性。

全局函數是 window 對象的方法。

甚至 HTML DOM 的 document 也是 window 對象的屬性之一：

window.document.getElementById("header");

與此相同：

document.getElementById("header");

 

Window 尺寸

有三種方法可以肯定瀏覽器窗口的尺寸。

對於Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

  • window.innerHeight - 瀏覽器窗口的內部高度(包括滾動條)
  • window.innerWidth - 瀏覽器窗口的內部寬度(包括滾動條)

或者

  • document.body.clientHeight
  • document.body.clientWidth

 不過ie8及如下爲其餘方法

實用的 JavaScript 方案（涵蓋全部瀏覽器）：

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
window.open() - 打開新窗口
window.close() - 關閉當前窗口
window.moveTo() - 移動當前窗口
window.resizeTo() - 調整當前窗口的尺寸

　　

window.screen 對象包含有關用戶屏幕的信息。

  • screen.availWidth - 可用的屏幕寬度
  • screen.availHeight - 可用的屏幕高度

 

Window Location

window.location 對象在編寫時可不使用 window 這個前綴。 一些例子：

一些實例:

  • location.hostname 返回 web 主機的域名
  • location.pathname 返回當前頁面的路徑和文件名
  • location.port 返回 web 主機的端口 （80 或 443）
  • location.protocol 返回所使用的 web 協議（http:// 或 https://）
  • location.href 屬性返回當前頁面的 URL。
  • location.assign() 方法加載新的文檔。實際上就是一個跳轉例如：window.location.assign("http://www.w3cschool.cc")
   
<script>
    document.write(location.href+"<br>");
    document.write(location.hostname +"<br>")
    document.write(location.pathname+"<br>")
     document.write( location.port+"<br>")
     document.write( location.protocol +"<br>")
</script>
=======輸出==============
http://www.runoob.com/try/try.php?filename=tryjs_loc_assign
www.runoob.com
/try/try.php

http:

Window History

  • history.back() - 與在瀏覽器點擊後退按鈕相同
  • history.forward() - 與在瀏覽器中點擊按鈕向前相同 

Window Navigator

window.navigator 對象包含有關訪問者瀏覽器的信息。 

警告!!!

來自 navigator 對象的信息具備誤導性，不該該被用於檢測瀏覽器版本，這是由於：

  • navigator 數據可被瀏覽器使用者更改
  • 一些瀏覽器對測試站點會識別錯誤
  • 瀏覽器沒法報告晚於瀏覽器發佈的新操做系統
<div id="example"></div>
<script>
txt = "<p>瀏覽器代號: " + navigator.appCodeName + "</p>";
txt+= "<p>瀏覽器名稱: " + navigator.appName + "</p>";
txt+= "<p>瀏覽器版本: " + navigator.appVersion + "</p>";
txt+= "<p>啓用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平臺: " + navigator.platform + "</p>";
txt+= "<p>用戶代理: " + navigator.userAgent + "</p>";
txt+= "<p>用戶代理語言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
===========輸出=============
瀏覽器代號: Mozilla

瀏覽器名稱: Netscape

瀏覽器版本: 5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

啓用Cookies: true

硬件平臺: MacIntel

用戶代理: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

用戶代理語言: undefined

JavaScript 彈窗

能夠在 JavaScript 中建立三種消息框：警告框、確認框、提示框。

alert("sometext"); 

confirm("sometext")

var r=confirm("按下按鈕");
if (r==true)
{
    x="你按下了\"肯定\"按鈕!";
}
else
{
    x="你按下了\"取消\"按鈕!";
}

提示框 window.prompt("sometext","defaultvalue");

提示框常常用於提示用戶在進入頁面前輸入某個值。

當提示框出現後，用戶須要輸入某個值，而後點擊確認或取消按鈕才能繼續操縱。

若是用戶點擊確認，那麼返回值爲輸入的值。若是用戶點擊取消，那麼返回值爲 null。

var x;
    var person=prompt("請輸入你的名字","Harry Potter"); if (person!=null && person!=""){
        x="你好 " + person + "! 今天感受如何?";
        document.getElementById("demo").innerHTML=x;
    }

換行

彈窗使用 反斜槓 + "\n" 來設置換行。

JavaScript 計時事件

  • setInterval() - 間隔指定的毫秒數不停地執行指定的代碼。
  • setTimeout() - 暫停指定的毫秒數後執行指定的代碼

setInterval("javascript function",milliseconds);

setInterval() 第一個參數是函數（function）。

第二個參數間隔的毫秒數

setInterval(function(){alert("Hello")},3000);//每過3秒彈一個Hello
<p>在頁面顯示一個時鐘</p>
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}
    </script>
//clearInterval() 方法用於中止 setInterval() 方法執行的函數代碼。
function myStopFunction()
{
clearInterval(myVar);
}

等待3秒，而後彈出 "Hello":

setTimeout(function(){alert("Hello")},3000);
中止用 clearTimeout(myVar);

使用 JavaScript 建立Cookie

JavaScript 可使用 document.cookie 屬性來建立 、讀取、及刪除 cookie。

JavaScript 中，建立 cookie 以下所示：

document.cookie="username=John Doe";

您還能夠爲 cookie 添加一個過時時間（以 UTC 或 GMT 時間）。默認狀況下，cookie 在瀏覽器關閉時刪除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

您可使用 path 參數告訴瀏覽器 cookie 的路徑。默認狀況下，cookie 屬於當前頁面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

使用 JavaScript 讀取 Cookie

在 JavaScript 中, 可使用如下代碼來讀取 cookie：

var x = document.cookie;

使用 JavaScript 修改 Cookie

在 JavaScript 中，修改 cookie 相似於建立 cookie，以下所示：

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

舊的 cookie 將被覆蓋。

使用 JavaScript 刪除 Cookie

刪除 cookie 很是簡單。您只須要設置 expires 參數爲之前的時間便可，以下所示，設置爲 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意，當您刪除時沒必要指定 cookie 的值。

若是您設置了新的 cookie，舊的 cookie 不會被覆蓋。 新 cookie 將添加到 document.cookie 中，因此若是您從新讀取document.cookie，您將得到以下所示的數據：

cookie1=value; cookie2=value;

function setCookie(cname,cvalue,exdays)
{
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}
 
function getCookie(cname)
{
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程