HTML的DOM和瀏覽器的BOM

記錄下自己最近看的知識點。

HTML DOM (文檔對象模型)#

概述：當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。

查找 HTML 元素#

通常，通過 JavaScript 可以操作需要操作 HTML 元素。

為了做到這件事情，必須首先找到該元素。有三種方法來做這件事：

通過 id 找到 HTML 元素：var x=document.getElementById (“intro”);
通過標籤名找到 HTML 元素：var y=document.getElementsByTagName (“p”);
通過類名找到 HTML 元素：var x=document.getElementsByClassName (“intro”);

改變 HTML 內容#

使用 innerHTML 屬性。

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

</body>
</html>

改變 HTML 樣式#

使用 style

<body>
 
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

</body>

使用事件#

<body>

<h1 id="id1">我的標題 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
按鈕</button>

</body>

JS 中定義函數綁定事件

var funcc = function () {
                alert("hello world")
            }
var aa = document.getElementById('vv')
aa.onclick = funcc

利用 addEventListener

document.getElementById('vv').addEventListener('click',funcc);


document.getElementById('vv').addEventListener('click',function () {
           alert('hahah')
        })

onload 和 onunload 事件#

onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。
onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些信息來加載網頁的正確版本。
onload 和 onunload 事件可用於處理 cookie。

<body onload="checkCookies()">

<script>
function checkCookies(){
	if (navigator.cookieEnabled==true){
		alert("Cookies 可用")
	}
	else{
		alert("Cookies 不可用")
	}
}
</script>
	
</body>

onchange 事件#

onchange 事件常結合對輸入字段的驗證來使用。

<!-- 當輸入框內容改變，焦點離開輸入框的時候會調用函數 -->
<input type="text" id="fname" onchange="upperCase()">

onmouseover ，onmouseout 和 onmousedown，onmouseup 事件#

onmouseover：當鼠標移到 html 元素上方的時候觸發事件
onmouseout：當鼠標從 html 元素上方移開的時候觸發事件
onmousedown：當鼠標點下元素的時候，觸發事件
onmouseup：當鼠標釋放按鈕時，觸發事件。

HTMLCollection 對象#

概述：getElementsByTagName () 方法返回 HTMLCollection 對象。HTMLCollection 對象類似包含 HTML 元素的一個數組。集合中的元素可以通過索引 (以 0 為起始位置) 來訪問。

var x = document.getElementsByTagName("p");
y = x[1];   //訪問第二個p元素

NodeList 對象#

概述：NodeList 對象是一個從文檔中獲取的節點列表 (集合) 。

通過querrySelectorAll屬性來獲取對象

var myNodeList = document.querySelectorAll("p");

同樣通過索引的方法來訪問元素。

NodeList 和 HTMLCollection 兩者的區別#

HTMLCollection 元素可以通過 name，id 或索引來獲取。
NodeList 只能通過索引來獲取。
只有 NodeList 對象有包含屬性節點和文本節點。

瀏覽器對象模型 (BOM)#

該對象表示瀏覽器窗口，全局變量是 window 對象的屬性。全局函數是 window 對象的方法（包括 document）。

Window 尺寸#

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

Window Screen#

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

Window Location#

location.hostname 返回 web 主機的域名
location.pathname 返回當前頁面的路徑和文件名
location.port 返回 web 主機的端口（80 或 443）
location.protocol 返回所使用的 web 協議（http: 或 https:）
location.href 返回當前頁面的 URL
location.assign (url) 加載 URL 指定的新的 HTML 文檔。就相當於一個鏈接，跳轉到指定的 url，當前頁面會轉為新頁面內容，可以點擊後退返回上一個頁面。
location.replace (url) 通過加載 URL 指定的文檔來替換當前文檔，這個方法是替換當前窗口頁面，前後兩個頁面共用一個窗口，所以是沒有後退返回上一頁的。

Window History#

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

在進行前進後退功能上，也可以通過 history.go () 方法來實現

history.go(1);  // go() 裡面的參數表示跳轉頁面的個數 例如 history.go(1) 表示前進一個頁面
history.go(-1);  // go() 裡面的參數表示跳轉頁面的個數 例如 history.go(-1) 表示後退一個頁面
history.go(0);  // go() 裡面的參數為0,表示刷新頁面

彈窗#

警告框

alert()

alert("警告框！");

確認框

confirm()

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

提示框

prompt () - 當提示框出現後，用戶需要輸入某個值，然後點擊確認或取消按鈕才能繼續操作。

var person=prompt("請輸入");
if (person!=null && person!=""){
    document.getElementById("demo").innerHTML=person;
}

JavaScript 計時事件#

setInterval () - 間隔指定的毫秒數不停地執行指定的代碼。括弧內兩個參數，第一個參數是函數，第二個參數是毫秒數。
setTimeout () - 在指定的毫秒數後執行指定代碼。第一個參數是函數，第二個參數是毫秒數。

關於停止計時的方法：clearInterval() 和 clearTimeout()

var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
   alert("Hello");
}
function myStopFunction(){
    clearInterval(myVar);
}


var myVar;
function myFunction()
{
    myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction()
{
    clearTimeout(myVar);
}

概述：Cookie 是一些數據，存儲於你電腦上的文本文件中。以鍵值對的形式儲存。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT"; //expries是該cookie的過期時間，默認情況下，cookie 在瀏覽器關閉時刪除
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/"; //path 參數告訴瀏覽器 cookie 的路徑。默認情況下，cookie 屬於當前頁面。

var x = document.cookie;

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/"; //類似創建，直接覆蓋

設置了新的 cookie，舊的 cookie 不會被覆蓋。新 cookie 將添加到 document.cookie 中，所以如果重新讀取 document.cookie，將獲得如下所示的數據：
cookie1=value; cookie2=value;

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 "";
}