目錄
- 一、BOM瀏覽器物件模型
- window物件
- window的子物件
- 彈出框
- 計時相關*
- 二、DOM檔案物件模型
- 選擇器
- 節點操作
- 文本操作
- 屬性操作
- 值操作
- class的操作
- css操作
- 事件
一、BOM瀏覽器物件模型
覽器物件模型（BOM） Broswer object model（整合js和瀏覽器）
window物件
所有瀏覽器都支持 window 物件，它表示瀏覽器視窗，
所有 JavaScript 全域物件、函式以及變數均自動成為 window 物件的成員，
全域變數是 window 物件的屬性，全域函式是 window 物件的方法，
一些常用的Window方法：
- window.innerHeight - 瀏覽器視窗的內部高度
- window.innerWidth - 瀏覽器視窗的內部寬度
- window.open() - 打開新視窗
- window.close() - 關閉當前視窗 (只能關閉用 js 的window.open()打開的頁面)
window的子物件
navigator物件：瀏覽器物件，通過這個物件可以判定用戶所使用的瀏覽器，包含了瀏覽器相關資訊，
navigator.appName; // Web瀏覽器全稱
navigator.appVersion; // Web瀏覽器廠商和版本的詳細字串
navigator.userAgent; // 客戶端絕大部分資訊
navigator.platform; // 瀏覽器運行所在的作業系統
screen物件：螢屏物件，不常用，
- screen.availWidth - 可用的螢屏寬度
- screen.availHeight - 可用的螢屏高度
history物件：瀏覽歷史物件，包含了用戶對當前頁面的瀏覽歷史，但我們無法查看具體的地址，可以簡單的用來前進或后退一個頁面，
history.forward(); // 前進一頁，其實也是window的屬性，window.history.forward()
history.back(); // 后退一頁
location物件：window.location 物件用于獲得當前頁面的地址 (URL)，并把瀏覽器重定向到新的頁面，
location.href; // 獲取當前url
location.href="https://www.cnblogs.com/XiaoYang-sir/archive/2021/06/04/URL"; // 跳轉到指定頁面
location.reload(); //重新加載頁面,就是重繪一下頁面
彈出框
可以在 JavaScript 中創建三種訊息框：警告框、確認框、提示框，
警告框：警告框經常用于確保用戶可以得到某些資訊，
alert("警告！！？");
確認框：當確認框出現后，用戶需要點擊確定或者取消按鈕才能繼續進行操作，
點擊確認，那么回傳值為 true，點擊取消，那么回傳值為 false，
confirm("請確認？");
提示框：如果用戶點擊確認，那么回傳值為輸入的值，如果用戶點擊取消，那么回傳值為默認值，就是第二個引數，如果沒有默認值那么回傳null，
prompt("請在下方輸入","你的答案");
計時相關*
通過使用 JavaScript，我們可以在一定時間間隔之后來執行代碼，而不是在函式被呼叫后立即執行，我們稱之為計時事件，
setTimeout( )：一段時間后做一些事情
setTimeout('confirm("你好");',3000); // 3秒之后執行前面的js代碼
setTimeout(confirm('xxx'),3000); // 如果寫的不是字串,會直接執行
setTimeout(function(){confirm('xxx')},3000); // 最好寫成函式
var a = setTimeout(function(){console.log('xxx')},3000); // a是瀏覽器來記錄計時器的一個亂數字
clearTimeout(a); // 清除計時器,通過這個數字可以清除
setInterval：計時器,每隔一段時間做某些事情
var a = setInterval(function(){console.log('xxx')},3000); // 每隔 3 秒列印一次xxx
clearInterval(a); // 清除計時器
二、DOM檔案物件模型
檔案物件模型（DOM） Document object model (整合js，css，html)
DOM（Document Object Model）是一套對檔案的內容進行抽象和概念化的方法，
當網頁被加載時，瀏覽器會創建頁面的檔案物件模型
HTML DOM 模型被構造為物件的樹，
JavaScript 可以通過DOM創建動態的 HTML：
- JavaScript 能夠改變頁面中的所有 HTML 元素
- JavaScript 能夠改變頁面中的所有 HTML 屬性
- JavaScript 能夠改變頁面中的所有 CSS 樣式
- JavaScript 能夠對頁面中的所有事件做出反應（滑鼠點擊事件，滑鼠移動事件等）
選擇器
和css一樣，你想操作某個標簽需要先找到它
直接查找
document.getElementById // 根據ID獲取一個標簽
document.getElementsByClassName // 根據class屬性獲取（可以獲取多個元素，所以回傳的是一個陣列）
document.getElementsByTagName // 根據標簽名獲取標簽合集
// 示例：
var a = document.getElementById('d1'); // 獲取id屬性值為d1的標簽 拿到的直接是標簽物件
var a = document.getElementsByClassName('c1'); // 獲取class值為c1的所有標簽 拿到的是陣列
var a = document.getElementsByTagName('div'); // 獲取所有div標簽 拿到的是陣列
<div id="d1">
Holle
</div>
<div id="d2">
Word
</div>
間接查找
var a = document.getElementById('d1');
a.parentElement; // 獲取a這個標簽的父級標簽
children 所有子標簽
firstElementChild 第一個子標簽元素
lastElementChild 最后一個子標簽元素
nextElementSibling 下一個兄弟標簽元素
previousElementSibling 上一個兄弟標簽元素
節點操作
創建節點（創建標簽）
var a = document.createElement('標簽名稱');
// 示例,創建a標簽
var a = document.createElement('a');
添加節點
// 添加節點,添加到了最后
var a = document.createElement('a'); // 創建a標簽
var dd = document.getElementById('dd'); // 找到 id=dd 的標簽
dd.appendChild(a); // 將創建的a標簽添加到dd這個div標簽里面的最后.
// 在某個節點前面添加節點
父級標簽.insertBefore(新標簽,某個兒子標簽)
// 示例:
var dd = document.getElementById('dd'); // 找到父級標簽
var a = document.createElement('a'); // 創建一個新的a標簽
var d2 = dd.children[1]; // 找到父級標簽下的某個兒子標簽
dd.insertBefore(a,d2); // 將a標簽插入到上面這個兒子標簽的前面.
洗掉節點
var dd = document.getElementById('dd'); // 父節點
dd.removeChild(d2); // 父級標簽中洗掉子標簽
替換節點
var dd = document.getElementById('dd'); // 找到父級標簽
var a = document.createElement('a'); // 創建a標簽
a.innerText = '百度'; // 給 a 標簽添加文本內容
var d1 = dd.children[0]; // 找到要被替換的子標簽
dd.replaceChild(a,d1); // 替換
文本操作
var d1 = document.getElementById('d1'); // 找到標簽
d1.innerText; // 查看標簽 d1 中的文本內容
// 設定文本內容
d1.innerText = "<a href=''>百度</a>";
d1.innerHTML = "<a href=''>百度</a>"; // 能夠識別標簽
屬性操作
var d1 = document.getElementById('d1'); // 找到d1標簽
d1.setAttribute('class','cc'); // 修改class屬性
divEle.removeAttribute("class") // 洗掉屬性
// 自帶的屬性還可以直接.屬性名來獲取和設定，如果是你自定義的屬性，是不能通過.來獲取屬性值的
imgEle.src
imgEle.src="https://www.cnblogs.com/XiaoYang-sir/archive/2021/06/04/..."
值操作
var inp = document.getElementById('username');
inp.value; // 查看值
inp.value = 'https://www.cnblogs.com/XiaoYang-sir/archive/2021/06/04/xiaoyang'; // 設定值
// 示例：選擇框
<select name="city" id="city">
<option value="https://www.cnblogs.com/XiaoYang-sir/archive/2021/06/04/1">四川</option>
<option value="https://www.cnblogs.com/XiaoYang-sir/archive/2021/06/04/2">上海</option>
<option value="https://www.cnblogs.com/XiaoYang-sir/archive/2021/06/04/3">北京</option>
</select>
var inp = document.getElementById('city');
inp.value; // 查看值
inp.value = 'https://www.cnblogs.com/XiaoYang-sir/archive/2021/06/04/1'; // 設定值
class的操作
var d = document.getElementById('dd'); // 找到標簽
d.classList; // 獲得這個標簽的class屬性的所有的值
d.classList.add('xx2'); // 添加class值
d.classList.remove('xx2'); // 洗掉class值
d.classList.contains('xx2'); // 判斷是否有某個class值,有回傳true,沒有回傳false
d.classList.toggle('xx2'); // 有就洗掉,沒有就增加
css操作
var d = document.getElementById('dd'); // 找到標簽
// 有橫杠的css屬性,寫法要去掉橫杠,并且橫杠后面的單詞首字母大寫
d.style.backgroundColor = 'deeppink';
d.style.height = '1000px'
事件
當用戶點擊某個 HTML 元素時啟動一段 JavaScript，下面是一個屬性串列，這些屬性可插入 HTML 標簽來定義事件動作，
onclick 當用戶點擊某個物件時呼叫的事件句柄，
ondblclick 當用戶雙擊某個物件時呼叫的事件句柄，
onfocus 元素獲得焦點， // 練習：輸入框
onblur 元素失去焦點， 應用場景：用于表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange 域的內容被改變， 應用場景：通常用于表單元素,當元素內容被改變時觸發.（select聯動）
onkeydown 某個鍵盤按鍵被按下， 應用場景: 當用戶在最后一個輸入框按下回車按鍵時,表單提交.
onkeypress 某個鍵盤按鍵被按下并松開，
onkeyup 某個鍵盤按鍵被松開，
onload 一張頁面或一幅影像完成加載，
onmousedown 滑鼠按鈕被按下，
onmousemove 滑鼠被移動，
onmouseout 滑鼠從某元素移開，
onmouseover 滑鼠移到某元素之上，
onselect 在文本框中的文本被選中時發生，
onsubmit 確認按鈕被點擊，使用的物件是form，
系結事件的方式有兩種：
方式1:
<div id="d1" onclick="func();"></div> /* 當點擊div標簽就呼叫func方法 */
<script>
function func() {
var d = document.getElementById('d1'); // 找到id=d1的標簽
d.style.backgroundColor = 'yellow'; // 并修改css背景顏色為黃色
}
</script>
方式2：
<div id="d1" ></div>
<script>
var d = document.getElementById('d1'); // 找到id=d1的標簽
d.onclick = function () { // 當此標簽觸發點擊呼叫匿名函式
d.style.backgroundColor = 'yellow'; // 函式修改css背景顏色為黃色
}
</script>
**事件里面的 this: **表示當前標簽物件
方法一：
<div id="d1" onclick="func(this);"></div> /* 觸發點擊div標簽就呼叫func方法 */
<script>
function func(t){
t.style.backgroundColor = 'yellow'; // 不用查找要修改的標簽，t 指帶當前標簽
}
</script>
方法二：
<div id="d1"></div>
<script>
var d = document.getElementById('d1'); // 找到標簽
d.onclick = function (){ // 觸發點擊呼叫匿名函式
this.style.backgroundColor = 'yellow'; // 表示當前標簽修改css背景顏色
}
</script>
onblur 和 onfocus 事件
<div id="d1"></div>
<input type="text" id="username">
<script>
// onfocus 獲取游標時觸發的事件
var inp = document.getElementById('username'); // 獲取input標簽
var d1 = document.getElementById('d1'); // 獲取div標簽
inp.onfocus = function (){ // input標簽觸發onfocus事件，呼叫匿名函式
d1.style.backgroundColor = 'yellow'; // 對div標簽的css背景顏色進行改變
}
// onblur 失去游標時觸發的事件
inp.onblur = function (){
d1.style.backgroundColor = 'red';
}
</script>
onchange 事件，域內容發生變化時觸發
<select name="city" id="city">
<option value="https://www.cnblogs.com/XiaoYang-sir/archive/2021/06/04/1">上海</option>
<option value="https://www.cnblogs.com/XiaoYang-sir/archive/2021/06/04/2">北京</option>
<option value="https://www.cnblogs.com/XiaoYang-sir/archive/2021/06/04/3">四川</option>
</select>
<script>
var city = document.getElementById('city');
city.onchange = function (){
console.log(this.options[this.selectedIndex].innerText) // 列印所選中的內容
// this.options ——>指select標簽下的素有option標簽
// this.selectedIndex——>指被選中的標簽在所有標簽中的索引值
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/285947.html
標籤：其他
上一篇：WEB安全防護相關回應頭（下）
下一篇：JQuery總結