JavaScript--BOM物件和DOM物件
阿新 • • 發佈：2021-08-10
目錄
BOM物件
BOM（瀏覽器物件模型），可以對瀏覽器視窗進行訪問和操作。使用 BOM，開發者可以移動視窗、改變狀態列中的文字以及執行其他與頁面內容不直接相關的動作。
使 JavaScript 有能力與瀏覽器“對話”。
window物件
window物件
所有瀏覽器都支援 window 物件。
概念上講.一個html文件對應一個window物件.
功能上講: 控制瀏覽器視窗的.
使用上講: window物件不需要建立物件,直接使用即可.
Window 物件方法
alert() 顯示帶有一段訊息和一個確認按鈕的警告框。 confirm() 顯示帶有一段訊息以及確認按鈕和取消按鈕的對話方塊。 prompt() 顯示可提示使用者輸入的對話方塊。 open() 開啟一個新的瀏覽器視窗或查詢一個已命名的視窗。 close() 關閉瀏覽器視窗。 setInterval() 按照指定的週期（以毫秒計）來呼叫函式或計算表示式。 clearInterval() 取消由 setInterval() 設定的 timeout。 setTimeout() 在指定的毫秒數後呼叫函式或計算表示式。 clearTimeout() 取消由 setTimeout() 方法設定的 timeout。 scrollTo() 把內容滾動到指定的座標。
互動方法
方法講解: //----------alert confirm prompt---------------------------- //alert('aaa'); /* var result = confirm("您確定要刪除嗎?"); alert(result); */ //prompt 引數1 : 提示資訊. 引數2:輸入框的預設值. 返回值是使用者輸入的內容. // var result = prompt("請輸入一個數字!","haha"); // alert(result); 方法講解: //open方法 開啟和一個新的視窗 並 進入指定網址.引數1 : 網址. //呼叫方式1 //open("http://www.baidu.com"); //引數1 什麼都不填 就是開啟一個新視窗. 引數2.填入新視窗的名字(一般可以不填). 引數3: 新開啟視窗的引數. open('','','width=200,resizable=no,height=100'); // 新開啟一個寬為200 高為100的視窗 //close方法 將當前文件視窗關閉. //close();
練習
var num = Math.round(Math.random()*100);
function acceptInput(){
//2.讓使用者輸入(prompt) 並接受 使用者輸入結果
var userNum = prompt("請輸入一個0~100之間的數字!","0");
//3.將使用者輸入的值與 隨機數進行比較
if(isNaN(+userNum)){
//使用者輸入的無效(重複2,3步驟)
alert("請輸入有效數字!");
acceptInput();
}
else if(userNum > num){
//大了==> 提示使用者大了,讓使用者重新輸入(重複2,3步驟)
alert("您輸入的大了!");
acceptInput();
}else if(userNum < num){
//小了==> 提示使用者小了,讓使用者重新輸入(重複2,3步驟)
alert("您輸入的小了!");
acceptInput();
}else{
//答對了==>提示使用者答對了 , 詢問使用者是否繼續遊戲(confirm).
var result = confirm("恭喜您!答對了,是否繼續遊戲?");
if(result){
//是 ==> 重複123步驟.
num = Math.round(Math.random()*100);
acceptInput();
}else{
//否==> 關閉視窗(close方法).
close();
}
}
}
setInterval clearInterval
<input id="ID1" type="text" onclick="begin()">
<button onclick="end()">停止</button>
<script>
function showTime(){
var nowd2=new Date().toLocaleString();
var temp=document.getElementById("ID1");
temp.value=nowd2;
}
var clock;
function begin(){
if (clock==undefined){
showTime();
clock=setInterval(showTime,1000);
}
}
function end(){
clearInterval(clock);
}
</script>
setTimeout clearTimeout
var ID = setTimeout(abc,2000); // 只調用一次對應函式.
clearTimeout(ID);
function abc(){
alert('aaa');
}
History 物件
History 物件屬性
History 物件包含使用者（在瀏覽器視窗中）訪問過的 URL。
History 物件是 window 物件的一部分，可通過 window.history 屬性對其進行訪問。
length 返回瀏覽器歷史列表中的 URL 數量。
History 物件方法
back() 載入 history 列表中的前一個 URL。
forward() 載入 history 列表中的下一個 URL。
go() 載入 history 列表中的某個具體頁面。
<a href="rrr.html">click</a>
<button onclick=" history.forward()">>>></button>
<button onclick="history.back()">back</button>
<button onclick="history.go()">back</button>
Location 物件
Location 物件包含有關當前 URL 的資訊。
Location 物件是 Window 物件的一個部分，可通過 window.location 屬性來訪問。
Location 物件方法
location.assign(URL)
location.reload()
location.replace(newURL)//注意與assign的區別
DOM物件(DHTML)
什麼是 DOM？
DOM 是 W3C（全球資訊網聯盟）的標準。DOM 定義了訪問 HTML 和 XML 文件的標準：
"W3C 文件物件模型（DOM）是中立於平臺和語言的介面，它允許程式和指令碼動態地訪問和更新文件的內容、結構和樣式。"
W3C DOM 標準被分為 3 個不同的部分：
- 核心 DOM - 針對任何結構化文件的標準模型
- XML DOM - 針對 XML 文件的標準模型
- HTML DOM - 針對 HTML 文件的標準模型
DOM 節點
根據 W3C 的 HTML DOM 標準，HTML 文件中的所有內容都是節點(NODE)：
- 整個文件是一個文件節點(document物件)
- 每個 HTML 元素是元素節點(element 物件)
- HTML 元素內的文字是文字節點(text物件)
- 每個 HTML 屬性是屬性節點(attribute物件)
- 註釋是註釋節點(comment物件)
畫dom樹是為了展示文件中各個物件之間的關係，用於物件的導航。
- 節點(自身)屬性
- attributes - 節點（元素）的屬性節點
- nodeType – 節點型別
- nodeValue – 節點值
- nodeName – 節點名稱
- innerHTML - 節點（元素）的文字值
- 導航屬性
- parentNode - 節點（元素）的父節點 (推薦)
- firstChild – 節點下第一個子元素
- lastChild – 節點下最後一個子元素
- childNodes - 節點（元素）的子節點
注意：
<div id="div1">
<div id="div2"></div>
<p>hello yuan</p>
</div>
<script>
var div=document.getElementById("div2");
console.log(div.nextSibling.nodeName); //思考:為什麼不是P?
</script>
推薦導航屬性：
parentElement // 父節點標籤元素
children // 所有子標籤
firstElementChild // 第一個子標籤元素
lastElementChild // 最後一個子標籤元素
nextElementtSibling // 下一個兄弟標籤元素
previousElementSibling // 上一個兄弟標籤元素
節點樹中的節點彼此擁有層級關係。
父(parent),子(child)和同胞(sibling)等術語用於描述這些關係。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。
- 在節點樹中，頂端節點被稱為根（root）
- 每個節點都有父節點、除了根（它沒有父節點）
- 一個節點可擁有任意數量的子
- 同胞是擁有相同父節點的節點
訪問 HTML 元素（節點）,訪問 HTML 元素等同於訪問節點,我們能夠以不同的方式來訪問 HTML 元素：
頁面查詢：
- 通過使用 getElementById() 方法
- 通過使用 getElementsByTagName() 方法
- 通過使用 getElementsByClassName() 方法
- 通過使用 getElementsByName() 方法
區域性查詢：
<div id="div1">
<div class="div2">i am div2</div>
<div name="yuan">i am div2</div>
<div id="div3">i am div2</div>
<p>hello p</p>
</div>
<script>
var div1=document.getElementById("div1");
////支援;
// var ele= div1.getElementsByTagName("p");
// alert(ele.length);
////支援
// var ele2=div1.getElementsByClassName("div2");
// alert(ele2.length);
////不支援
// var ele3=div1.getElementById("div3");
// alert(ele3.length);
////不支援
// var ele4=div1.getElementsByName("yuan");
// alert(ele4.length)
</script>
HTML DOM Event(事件)
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點選某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動作。
onclick 當用戶點選某個物件時呼叫的事件控制代碼。
ondblclick 當用戶雙擊某個物件時呼叫的事件控制代碼。
onfocus 元素獲得焦點。 //練習：輸入框
onblur 元素失去焦點。 應用場景：用於表單驗證,使用者離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange 域的內容被改變。 應用場景：通常用於表單元素,當元素內容被改變時觸發.（三級聯動）
onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress 某個鍵盤按鍵被按下並鬆開。
onkeyup 某個鍵盤按鍵被鬆開。
onload 一張頁面或一幅影象完成載入。
onmousedown 滑鼠按鈕被按下。
onmousemove 滑鼠被移動。
onmouseout 滑鼠從某元素移開。
onmouseover 滑鼠移到某元素之上。onmouseleave 滑鼠從元素離開
onselect 文字被選中。
onsubmit 確認按鈕被點選。
兩種為元素附加事件屬性的方式
<div onclick="alert(123)">點我呀</div>
<p id="abc">試一試!</p>
<script>
var ele=document.getElementById("abc");
ele.onclick=function(){
alert("hi");
};
</script>
注意
<div id="abc" onclick="func1(this)">事件繫結方式1</div>
<div id="id123">事件繫結方式2</div>
<script>
function func1(self){
console.log(self.id)
}
//jquery下是$(self), 這種方式this引數必須填寫;
//------------------------------------------
var ele=document.getElementById("id123").onclick=function(){
console.log(this.id);
//jquery下是$(this), 這種方式不需要this引數;
}
</script>
onload：
onload 屬性開發中 只給 body元素加.
這個屬性的觸發 標誌著 頁面內容被載入完成.
應用場景: 當有些事情我們希望頁面載入完立刻執行,那麼可以使用該事件屬性.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// window.onload=function(){
// var ele=document.getElementById("ppp");
// ele.onclick=function(){
// alert(123)
// };
// };
function fun1() {
var ele=document.getElementById("ppp");
ele.onclick=function(){
alert(123)
};
}
</script>
</head>
<body onload="fun1()">
<p id="ppp">hello p</p>
</body>
</html>
onsubmit:
是當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證使用者輸入是否正確.如果驗證失敗.在該方法中我們應該阻止表單的提交.
<form id="form">
<input type="text"/>
<input type="submit" value="點我!" />
</form>
<script type="text/javascript">
//阻止表單提交方式1().
//onsubmit 命名的事件函式,可以接受返回值. 其中返回false表示攔截表單提交.其他為放行.
var ele=document.getElementById("form");
ele.onsubmit=function(event) {
// alert("驗證失敗 表單不會提交!");
// return false;
// 阻止表單提交方式2 event.preventDefault(); ==>通知瀏覽器不要執行與事件關聯的預設動作。
alert("驗證失敗 表單不會提交!");
event.preventDefault();
}
Event 物件
Event 物件代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態。
事件通常與函式結合使用，函式不會在事件發生前被執行！event物件在事件發生時系統已經建立好了,並且會在事件函式被呼叫時傳給事件函式.我們獲得僅僅需要接收一下即可.
比如onkeydown,我們想知道哪個鍵被按下了，需要問下event物件的屬性，這裡就時KeyCode；
事件傳播
<div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
<div id="abc_2" style="border:1px solid red;width:200px;height:200px;">
</div>
</div>
<script type="text/javascript">
document.getElementById("abc_1").onclick=function(){
alert('111');
}
document.getElementById("abc_2").onclick=function(event){
alert('222');
event.stopPropagation(); //阻止事件向外層div傳播.
}
</script>
本文來自部落格園，作者：Amfc_只敲程式碼不禿頭，轉載請註明原文連結：https://www.cnblogs.com/longloved/p/15123182.html