一、HTML DOM

DOM是Document Object Model文檔對象模型的縮寫。根據W3C DOM規範，DOM是一種與瀏覽器，平臺，語言無關的接口，使得你可以訪問頁面中其他的標準組件，DOM是以層次結構組織的節點或信息片斷的集合。這個層次結構允許開發人員在樹中導航尋找特定信息。

在 HTML DOM 中，所有事物都是節點。DOM 是被視爲節點樹的 HTML。每個節點都擁有包含着關於節點某些信息的屬性。這些屬性是nodeName（節點名稱）、nodeValue（節點值）、nodeType（節點類型）

根據W3C的 HTML DOM 標準，HTML 文檔中的所有內容都是節點：

（1）整個文檔是一個文檔節點
（2）每個 HTML 元素是元素節點
（3）HTML 元素內的文本是文本節點
（4）每個 HTML 屬性是屬性節點
（5）註釋是註釋節點

當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。HTML DOM 模型被構造爲對象的樹：

1.1 查找HTML元素

1.1.1 通過 id 找到 HTML 元素

//通過元素設置的id名，找到該元素
var x=document.getElementById("myidname");

<p class="myidname">我是一個P標籤</p>

//獲取id爲main下的所有P元素
document.getElementById("main").getElementsByTagName("p");

1.1.2 通過類名 class 找到 HTML 元素

var x=document.getElementsByClassName("myclassname");

<p class="myclassname">我是一個P標籤</p>

1.1.3 通過標籤名查找 HTML 元素

//獲取p標籤
var y=document.getElementsByTagName("p");

//獲取id爲myidname的div中的p標籤
var x=document.getElementById("myidname");
var y=x.getElementsByTagName("p");

<div class="myidname">
	<p class="myclassname1">我是一個P標籤</p>
	<p class="myclassname2">我是一個P標籤</p>
	<p class="myclassname3">我是一個P標籤</p>
</div>

1.1.4 獲取元素內容

（1）獲取元素內容的最簡單方法是使用 innerHTML 屬性

//獲取id爲myidname的內容
var txt=document.getElementById("myidname").innerHTML;

（2）除了 innerHTML 屬性，也可以使用 childNodes 和 nodeValue 屬性來獲取元素的內容。

1.2 DOM 動作

1.2.1 改變HTML文檔

（1）document.write()：直接向 HTML 輸出流寫內容

document.write("寫入html文檔的內容");

（2） innerHTML ：更改原HTML文檔的內容

document.getElementById("myidname").innerHTML="新更改的內容!";

（3）attribute：改變文檔元素的屬性值

//更改圖片
document.getElementById("myimage").src="landscape.jpg";
<img id="image" src="smiley.gif">

//更改超鏈接
document.getElementById("myidname").href="www.newxxx.com";
<a href="www.xxx.com"></a>

1.2.2 改變CSS樣式

語法

document.getElementById(id).style.property=新樣式

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

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

1.3 DOM 事件

1.3.1 常見事件

（1）onclick：當用戶點擊鼠標時觸發

1）方法1：

//this代表當前的h1元素
//(1)點擊後直接更改元素
<h1 onclick="this.innerHTML='點擊後顯示的內容'">點擊前顯示的內容</h1>

//(2)點擊後觸發js函數進行更改
function changetext(param){
    param.innerHTML="點擊後顯示的內容";
}
<h1 onclick="changetext(this)">點擊前顯示的內容</h1>

2）方法2：

//不通過this傳遞當前元素
<script>
	function display(){
		document.getElementById("demo").innerHTML="點擊後向p標籤顯示的內容";
	}
</script>

<button onclick="display()">點擊這個按鈕能調用函數</button>
<p id="demo"></p>

方法3：

//綁定button與函數的關係
<script>
	document.getElementById("myBtn").onclick=function(){displayDate()};

	function display(){
		document.getElementById("demo").innerHTML="點擊後向p標籤顯示的內容";
	}
</script>

<button id="myBtn">點擊這個按鈕能調用函數</button>
<p id="demo"></p>

（2）
onload 事件會在用戶加載頁面後觸發
onunload 事件會在用戶離開頁面時被觸發。

//頁面加載後會執行functionname()這個js函數
<body onload="functionname()">
</body>

（3）onchange ：當元素內容被改變的時候刪除

function myFunction(){
    var x=document.getElementById("fname");
    x.value=x.value.toUpperCase();
}

輸入: <input type="text" id="fname" onchange="myFunction()">
<p>當你離開輸入框後，函數將被觸發，將小寫字母轉爲大寫字母。</p>

（4）onmouseover 和 onmouseout 事件可用於在用戶的鼠標移至 HTML 元素上方或移出元素時觸發函數。
（5）onmousedown, onmouseup 以及 onclick 構成了鼠標點擊事件的所有部分。

1）首先當點擊鼠標按鈕時，會觸發 onmousedown 事件，鼠標按着不鬆開
2）當釋放鼠標按鈕時，會觸發 onmouseup 事件，  鼠標鬆開
3）最後，當完成鼠標點擊時，會觸發 onclick 事件。

1.3.2 事件表

1.3.3 `addEventListener()`：事件監聽

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

使用該方法，可以給頁面元素添加一個監聽事件，當監聽的動作被觸發時，執行綁定的函數。

語法

element.addEventListener(event, function, useCapture);

（1）第一個參數是事件的類型 (如 “click” 或 “mousedown”).

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

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

//給id爲 myBtn 的頁面元素添加監聽事件，當該元素綁定的動作執行的時候就觸發函數
<script>
	document.getElementById("myBtn").addEventListener("click", displayDate);
	
	function displayDate() {
    	document.getElementById("demo").innerHTML = Date();
}
</script>

<button id="myBtn">點擊</button>
<p id="demo"></p>

注意：不要使用 “on” 前綴。例如，使用 “click” ,而不是使用 “onclick”

//設置監聽的時候綁定兩個或者多個函數
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

事件冒泡和捕獲
ddEventListener() 方法可以指定 “useCapture” 參數來設置傳遞類型：

addEventListener(event, function, useCapture);

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

（1）事件冒泡：，內部元素的事件會先被觸發，然後再觸發外部元素，即： p 元素的點擊事件先觸發，然後會觸發 div 元素的點擊事件。

document.getElementById("myDiv").addEventListener("click", myFunction, false);

（2）事件捕獲：外部元素的事件會先被觸發，然後纔會觸發內部元素的事件，即： div元素的點擊事件先觸發，然後再觸發 p 元素的點擊事件。

document.getElementById("myDiv").addEventListener("click", myFunction, true);

什麼意思呢，就是說當p標籤位於div內，當我們p標籤的監聽動作被觸發，使用冒泡就先執行p綁定的動作，再執行div綁定的動作。而使用捕獲方式的話，就是先執行div再執行p

1.3.4`removeEventListener()` 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件

element.removeEventListener("mousemove", myFunction);

1.4 DOM 元素

1.4.1 創造

（1）document.createElement("元素類型")：創建元素節點
（2）appendChild()：元素添加
（3） document.createTextNode(）：創建文本節點

實例：

//使用該方法需要獲取一個已經存在的元素
//創建p元素
var para = document.createElement("p");

//創建文本
var node = document.createTextNode("這是一個新的段落。");

//將文本添加到p元素中去
para.appendChild(node);

//獲取存在的元素div1
var element = document.getElementById("div1");

////將p元素添加到div中去
element.appendChild(para);

1.4.2 移除

要移除一個元素removeChild()，你需要知道該元素的父元素

//查找 id="div1" 的元素:
var parent = document.getElementById("div1");

//查找 id="p1" 的 <p> 元素
var child = document.getElementById("p1");

//從父元素中移除子節點：
parent.removeChild(child);

1.4.3 替換

replaceChild()方法進行替換

var para = document.createElement("p");
var node = document.createTextNode("這是一個新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");

//新創建的p元素替換p1元素
parent.replaceChild(para, child);

1.5 DOM 集合

當我們通過js獲取頁面元素的時候，可能會一次性獲取到多個頁面元素，例如：

var x = document.getElementsByTagName("p");

上面的實例將會獲取到文檔中所有的p元素，p元素可能有多個，那麼我們入夥獲取某一個呢？

//訪問到第一個p元素
y = x[0];

//訪問到第二個p元素
y = x[1];

//元素的數量
x.length

實例：

//遍歷所有p元素，替換其顏色
var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}

二、瀏覽器 BOM

BOM(Browser Object Model) 是指瀏覽器對象模型，是用於描述這種對象與對象之間層次關係的模型，瀏覽器對象模型提供了獨立於內容的、可以與瀏覽器窗口進行互動的對象結構

2.1 Window對象

所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。所有 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。

（1）window.innerHeight ：瀏覽器窗口的內部高度(包括滾動條)
（2）window.innerWidth ：瀏覽器窗口的內部寬度(包括滾動條)

window.open(url) - 打開新窗口
window.close() - 關閉當前窗口
window.moveTo() - 移動當前窗口
window.resizeTo() - 調整當前窗口的尺寸

2.2 window.screen

window.screen 對象包含有關用戶屏幕的信息。window.screen對象在編寫時可以不使用 window 這個前綴。

（1）screen.availWidth：可用的屏幕寬度
（2）screen.availHeight：可用的屏幕高度
（3）screen.colorDepth：色彩深度
（4）screen.pixelDepth：分辨率

2.3 window.location

window.location 對象用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面，window.location 對象在編寫時可不使用 window 這個前綴

（1）location.hostname ：返回 web 主機的域名
（2）location.pathname：返回當前頁面的路徑和文件名
（3）location.port ：返回 web 主機的端口（80 或 443）
（4）location.protocol ：返回所使用的 web 協議（http: 或 https:）
（5）location.href：返回當前頁面的 URL
（6）location.assign("url") ：方法加載新的文檔（打開一個新的頁面）
（7）location.replace("url")：替換指定的URL,不同於assgin，無法返回
（8）location.reload()：刷新

window.location.assign(url) ：加載 URL 指定的新的 HTML 文檔。就相當於一個鏈接，跳轉到指定的url，當前頁面會轉爲新頁面內容，可以點擊後退返回上一個頁面。

window.location.replace(url) ：通過加載 URL 指定的文檔來替換當前文檔，這個方法是替換當前窗口頁面，前後兩個頁面共用一個窗口，所以是沒有後退返回上一頁的

2.4 window.history

對象包含瀏覽器的歷史，window.history對象在編寫時可不使用 window 這個前綴。
（1）history.go()：前進或者後退指定的頁面數，正爲前進，負爲後退
（2）history.back() ：後退一頁
（3）history.forward() ：前進一頁

2.5 window.navigator

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

// 返回用戶代理頭的字符串
navigator.userAgent

// "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36"

// 返回是否可以支持cookie
navigator.cookieEnabled

// 返回瀏覽器名稱
navigator.appName // Chrome,IE

// 返回瀏覽器內核
navigator.appCodeName // Mozilla

2.6 window彈框

（1）警告框 window.alert("sometext")

function myFunction(){
    alert("你好，我是一個警告框！");
}

（2）確認框 window.confirm("sometext")

確認框通常用於驗證是否接受用戶操作。
1）當確認卡彈出時，用戶可以點擊 "確認" 或者 "取消" 來確定用戶操作。
2）當你點擊 "確認", 確認框返回 true， 如果點擊 "取消", 確認框返回 false

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

（3）window.prompt("sometext","defaultvalue")、

提示框經常用於提示用戶在進入頁面前輸入某個值。
1）當提示框出現後，用戶需要輸入某個值，然後點擊確認或取消按鈕才能繼續操縱。
2）如果用戶點擊確認，那麼返回值爲輸入的值。如果用戶點擊取消，那麼返回值爲 null。

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

彈窗使用反斜槓 + “n”(\n) 來設置換行。

2.7 計時事件

通過使用 JavaScript，我們有能力做到在一個設定的時間間隔之後來執行代碼，而不是在函數被調用後立即執行。我們稱之爲計時事件。

（1）setInterval()：間隔指定的毫秒數不停地執行指定的代碼

語法

window.setInterval("javascript function",milliseconds);
(函數，間隔時間)；

//1000毫秒等於1秒，每隔3秒彈出hello
setInterval(function(){alert("Hello")},3000);

時鐘實例：

var myVar=setInterval(function(){myTimer()},1000);
 
function myTimer()
{
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}

（2）clearInterval() 方法用於停止 setInterval() 方法執行的函數代碼。
要使用 clearInterval() 方法, 在創建計時方法時必須使用全局變量

實例：

<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
    clearInterval(myVar);
}
</script>

（3）setTimeout() ：在指定的毫秒數後執行指定代碼。

語法

myVar= window.setTimeout("javascript function", milliseconds);

setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名爲 myVar 的變量中

//等待3秒，然後彈出 "Hello"
setTimeout(function(){alert("Hello")},3000);

（4）clearTimeout() 方法用於停止執行setTimeout()方法的函數代碼。

//點擊第一個按鈕等待3秒後出現"Hello"彈框。
//點擊第二個按鈕來阻止第一個函數運行。（你必須在3秒之前點擊它）

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

setInterval() 和setTimeout() 的區別：

setInterval()循環執行，每隔幾秒執行一次
setTimeout() 執行一次，延遲幾秒只執行一次

2.8 cookie

Cookie 用於存儲 web 頁面的用戶信息，Cookie 是一些數據, 存儲於你電腦上的文本文件中，簡單點來說就是：瀏覽器緩存

Cookie 以名/值對形式存儲，以;分隔如下所示:

username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

2.8.1 創建cookit

document.cookie="username=John Doe";

//添加過期時間（以 UTC 或 GMT 時間）。默認情況下，cookie 在瀏覽器關閉時刪除
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

//再添加cookit路徑，默認情況下，cookie 屬於當前頁面
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

2.8.2 讀取cookit

var x = document.cookie;

document.cookie 將以字符串的方式返回所有的 cookie，類型格式： cookie1=value; cookie2=value; cookie3=value;

2.8.3 修改cookit

//舊的 cookie 將被覆蓋
document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

2.8.4 刪除cookit

刪除 cookie 非常簡單。您只需要設置 expires 參數爲以前的時間即可，如下所示，設置爲 Thu, 01 Jan 1970 00:00:00 GMT:

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

實例

以下實例中，我們將創建 cookie 來存儲訪問者名稱。

首先，訪問者訪問 web 頁面, 他將被要求填寫自己的名字。該名字會存儲在 cookie 中。

訪問者下一次訪問頁面時，他會看到一個歡迎的消息。

<script>
//設置cookit
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;
}

//獲取cookit
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 "";
}

//檢測cookit
function checkCookie(){
	var user=getCookie("username");
	if (user!=""){
		alert("歡迎 " + user + " 再次訪問");
	}
	else {
		user = prompt("請輸入你的名字:","");
  		if (user!="" && user!=null){
    		setCookie("username",user,30);
    	}
	}
}
</script>

<body onload="checkCookie()"></body>

特別鳴謝菜鳥教程

Python全棧開發學習--javascript--（HTML DOM、瀏覽器BOM）--Day11

目錄