目錄
HTML DOM
瀏覽器 BOM
一、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.4removeEventListener()
方法
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>
特別鳴謝菜鳥教程