JavaScript高級
目錄
BOM
- BOM:
broswer object model瀏覽器對象模型
Navigator 瀏覽器對象
Navigator 對象獲取一些瀏覽器的信息.
- 屬性
appName返回瀏覽器的名稱。 - 相關文檔 https://www.w3school.com.cn/jsref/dom_obj_navigator.asp
Screen 屏幕對象
Screen 對象包含有關客戶端顯示屏幕的信息。
- 屬性
width: 返回屏幕的寬度
height: 返回屏幕的高度 - 相關文檔 https://www.w3school.com.cn/jsref/dom_obj_screen.asp
Location 地址欄對象
Location 對象包含有關當前 URL 的信息。
- 創建(獲取)
- window.location
- location
- 方法
reload(): 重新加載當前文檔,刷新操作. - 屬性
href: 設置或返回完整的url. - Demo
<body> <input id="btn" type="button" value="跳轉"> <script type="text/javascript"> // 獲取input標籤 var btn = document.getElementById("btn"); // 設置事件 btn.onclick = function (){ location.href = "https://www.baidu.com"; } </script> </body> - 相關文檔 https://www.w3school.com.cn/jsref/dom_obj_location.asp
History 對象
History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。
- 創建(獲取)
- window.history
- history
- 方法
back()加載 history 列表中的前一個 URL。
forward()加載 history 列表中的下一個 URL。
go(參數)加載 history 列表中的某個具體頁面。參數：
正數：前進幾個歷史記錄
負數：後退幾個歷史記錄 - 屬性
length: 返回當前窗口歷史列表中的url數量.
Window 窗口對象
跳轉到目錄
Window 對象表示瀏覽器中打開的窗口。
- 方法
- 與彈出框有關的方法
alert(): 顯示帶有一段消息和一個確認按鈕的警告框.
confirm(): 顯示帶有一段消息,以及確認和取消兩個按鈕的對話框. 若點擊確定,該方法返回true, 點擊取消,返回false.
prompt(): 顯示可提示用戶輸入的對話框. 返回值爲用戶輸入的內容. - 與打開關閉有關的方法
close():關閉瀏覽器窗口. 誰調用的,就關閉哪個窗口
open(arg1, arg2, arg3, arg4): 打開一個新的瀏覽器窗口.
注意:這4個參數都是可選的, arg1 傳入url, arg3傳入窗口的特徵(設置寬高等)window.open("https://www.baidu.com","","width=100,height=100"); - 與定時器有關的方法
setTimeout(code,millisec): 在指定的毫秒數後調用函數或計算表達式。
clearTimeout(id_of_settimeout): 取消由 setTimeout() 方法設置的 timeout。傳入某個定時器的id用來取消指定的定時器.
setInterval(code,millisec): 按照指定的週期（以毫秒計）來調用函數或計算表達式。
clearInterval(id_of_settimeout): 取消由 setInterval() 設置的 timeout。
- 屬性
- 獲取其他BOM對象
History
location
Navigator
Screen - 獲取DOM對象
document
- 特點
Window對象不需要創建可以直接使用, window.方法名()
window引用可以省略. 方法名();
DOM
-
DOM:
Document Object Model文檔對象模型- 文檔: 超文本文檔(超文本標記文檔) html, xml
- 對象: 提供了屬性和方法.
- 模型: 使用屬性和方法操作超文本標記文檔
- 可以使用js裏面的dom裏面提供的對象,使用這些對象的屬性和方法,對標記型文檔進行操作.
- dom裏面已經將html裏面的
標籤,屬性,文本內容都封裝成了對象.
-
dom解析html文檔的過程
![在這裏插入圖片描述]()
根據html的層級結構,在內存中分配一個樹形結構, 需要把html中的每部分封裝爲對象.Document對象: 整個文檔Element對象: 標籤對象Attribute對象: 首先要獲取標籤對象Text對象: 首先要獲取標籤對象Comment對象: 註釋對象Node節點對象: 這個對象是上面這些對象的父對象, 如果在對象內找不到想要的方法, 此時可以在Node節點對象中去查找想要的方法.
Document 文檔對象
- 創建(獲取): 在html dom模型中可以使用window對象來獲取
- window.document
- document
- 方法
write()向頁面輸出變量/html代碼document.write("abc"); document.write("<hr>");-
獲取Element對象
getElementById()： 根據id屬性值獲取元素對象,id屬性值一般唯一
getElementsByTagName()：根據元素名稱獲取元素對象們。返回值是一個數組
getElementsByClassName():根據Class屬性值獲取元素對象們。返回值是一個數組
getElementsByName(): 根據name屬性值獲取元素對象們。返回值是一個數組 -
創建其他的DOM對象
createAttribute(name)
createComment()
createElement()
createTextNode()
-
Element 元素對象(標籤對象)
- 創建(獲取): 通過document來獲取和創建
- 方法(首先通過document來獲取元素,然後通過元素進行操作)
getAttribute(attributename): 獲取指定的屬性
setAttribute(attributename,attributevalue): 給元素添加屬性
removeAttribute(attributename): 移除指定名稱的屬性
注意:不能刪除value - 獲取標籤下面的子標籤
childNodes: 這個屬性兼容性很差
getElementsByTagName(標籤名): 兼容性好,獲取標籤下面子標籤的唯一有效方法.
Node 節點對象
-
特點
所有dom對象都可以被認爲是一個節點. -
屬性
nodeName:獲取節點的名稱
nodeType: 獲取節點的類型
nodeValue: 獲取節點的value值
因爲dom在解析html的時候, html裏面的標籤,屬性,文本都是一個節點,所以上面的三個屬性對其都是不同的值.- 標籤節點對應的nodeType爲1
- 屬性節點對應的nodeType爲2
- 文本節點對應的nodeType爲3
parentNode: 獲取父節點的屬性
childNodes: 得到所有子節點,兼容性差
firstChild: 獲取第一個子節點
lastChild: 獲取最後一個子節點
nextSibling: 返回一個給定節點的下一個兄弟節點
previousSibling: 返回一個給定節點的上一個兄弟節點<body> <ul id = "ulid"> <li id = li1>aaaaaa</li> <li id = li2>bbbbbb</li> <li id = li3>cccccc</li> <li id = li4>dddddd</li> </ul> <script> // 獲取li的父節點 var li1 = document.getElementById("li1"); var ul1 = li1.nextSibling; alert(ul1.id); // 獲取ul的第一個子節點 var ul1 = document.getElementById("ulid"); var li1 = ul1.lastChild; alert(li1.id); // 獲取li2的上一個節點和下一個節點 var li2 = document.getElementById("li2"); var li1 = li2.previousSibling; var li3 = li2.nextSibling; alert(li1.id); alert(li3.id); </script> </body>
CRUD_DOM樹
-
查找節點
getElementById():通過節點的id屬性,查找指定節點. -
添加節點
appendChild()：向節點的子節點列表的結尾添加新的子節點。 -
插入節點
insertBefore(newNode, oldNode): 向oldNode節點前插入一個新節點.通過父節點添加 -
刪除節點
removeChild()：刪除（並返回）當前節點的指定子節點。 -
替換節點
replaceChild()：用新節點替換一個子節點。通過父節點替換 -
複製節點
cloneNode(true): 複製節點 -
innerHTML屬性
作用:- 獲取文本內容
- 向標籤裏面設置內容(可以是html代碼)
-
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div#div1 {
width: 360px;
height: 150px;
border: 2px solid red;
}
div#div2 {
width: 360px;
height: 150px;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="div1">
<ul id="ul1">
<li id="li1">one</li>
<li id="li2">two</li>
<li id="li3">three</li>
<li id="li4">four</li>
</ul>
</div>
<div id="div2"></div>
<input id="input1" type="button" value="添加節點">
<input id="input2" type="button" value="插入節點">
<input id="input3" type="button" value="刪除節點">
<input id="input4" type="button" value="替換節點">
<input id="input5" type="button" value="複製節點">
<script type="text/javascript">
// 添加節點
/*
1.獲取到ul
2.獲取到div2
3.把ul添加到div2
*/
var input1 = document.getElementById("input1");
input1.onclick = function () {
var ul = document.getElementById("ul1");
var div = document.getElementById("div2");
div.appendChild(ul);
}
// 插入節點
/*
1.獲取到li3標籤
2.創建li
3.創建文本
4.把文本添加到li下面
5.獲取到ul
6.把li添加到ul下面
*/
var input2 = document.getElementById("input2");
input2.onclick = function () {
var li3 = document.getElementById("li3");
var li = document.createElement("li");
var text = document.createTextNode("朝陽紅");
li.appendChild(text);
var ul = document.getElementById("ul1");
ul.insertBefore(li, li3);
}
// 刪除節點
/*
1.獲取到li標籤
2.執行父節點ul標籤
3.執行刪除
*/
var input3 = document.getElementById("input3");
input3.onclick = function () {
var li3 = document.getElementById("li3");
var ul = document.getElementById("ul1");
ul.removeChild(li3);
}
// 替換節點
/*
1.獲取到li標籤
2.創建標籤li
3.創建文本
4.把文本添加到li下面
5.獲取父節點Ul標籤
6.執行替換
*/
var input4 = document.getElementById("input4");
input4.onclick = function () {
var li3 = document.getElementById("li3");
var li = document.createElement("li");
var text = document.createTextNode("HelloWorld");
li.appendChild(text);
var ul = document.getElementById("ul1");
ul.replaceChild(li, li3);
}
// 複製節點(把ul列表複製到另一個div中)
/*
1.獲取到ul
2.執行復制方法：cloneNode(true)
3.把複製後的內容放到div2中
獲取div2
appendChild方法
*/
var input5 = document.getElementById("input5");
input5.onclick = function () {
var ul = document.getElementById("ul1");
var ulClone = ul.cloneNode(true);
var div = document.getElementById("div2");
div.appendChild(ulClone);
}
</script>
</body>
</html>
控制樣式
- 通過DOM來控制標籤的樣式
- 使用
style屬性來設置 - 提前定義好類選擇器的樣式，通過元素的
className屬性來設置其class屬性值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.sun {
font-weight: bold;
font-size: 30px;
color: skyblue;
border: 2px dashed #000;
}
</style>
</head>
<body>
<div class="zy">桂朝陽</div>
<div class="sun">大太陽</div>
<script type="text/javascript">
// 獲取類名爲zy的標籤
var zy = window.document.getElementsByClassName("zy")[0];
// alert(zy.className);
// 方式一(自己添加)給類名爲zy的div添加樣式
// zy.style.border = "1px solid #ccc";
// zy.style.fontSize = "20px";
// 方式二(調用已經寫好的)
zy.className = "sun";
</script>
</body>
事件
事件監聽機制
- 概念:
某些組件被執行了某些操作後，觸發某些代碼的執行。- 事件：某些操作。如： 單擊，雙擊，鍵盤按下了，鼠標移動了
- 事件源：組件。如： 按鈕 文本輸入框…
- 監聽器：代碼。
- 註冊監聽：
將事件，事件源，監聽器結合在一起。 當事件源上發生了某個事件，則觸發執行某個監聽器代碼。
常見的事件
-
點擊事件：
onclick：單擊事件
ondblclick：雙擊事件 -
焦點事件
onblur：失去焦點
* 一般用於表單驗證
onfocus:元素獲得焦點。 -
加載事件：
onload：一張頁面或一幅圖像完成加載。 -
鼠標事件：
onmousedown 鼠標按鈕被按下。
* 定義方法時，定義一個形參，接受event對象。
* event對象的button屬性可以獲取鼠標按鈕鍵被點擊了。
onmouseup 鼠標按鍵被鬆開。
onmousemove 鼠標被移動。
onmouseover 鼠標移到某元素之上。
onmouseout 鼠標從某元素移開。 -
鍵盤事件：
onkeydown 某個鍵盤按鍵被按下。
onkeyup 某個鍵盤按鍵被鬆開。
onkeypress 某個鍵盤按鍵被按下並鬆開。 -
選擇和改變
onchange 域的內容被改變。
onselect 文本被選中。 -
表單事件：
onsubmit確認按鈕被點擊。
* 可以阻止表單的提交
* 方法返回false則表單被阻止提交。
onreset 重置按鈕被點擊。
