前端開發之BOM和DOM
BOM
BOM：是指瀏覽器對象模型，它使JavaScript可以和瀏覽器進行交互。
1，navigator對象：瀏覽器對象，通過這個對象可以判定用戶所使用的瀏覽器，包含了瀏覽器相關信息。
navigator.appName // Web瀏覽器全稱 navigator.appVersion // Web瀏覽器廠商和版本的詳細字符串 navigator.userAgent // 客戶端絕大部分信息 navigator.platform // 瀏覽器運行所在的操作系統
2，screen對象：屏幕對象，可以獲取一些和屏幕相關的信息。
screen.availWidth // 可用的屏幕寬度screen.availHeight // 可用的屏幕高度
3，history對象：瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但我們無法查看具體的地址，可以簡單的用來前進或後退一個頁面。
history.forward() // 前進一頁 history.back() // 後退一頁
4，location對象：用於獲取瀏覽器的當前的網頁地址，還可以重定向新的地址。
location.href // 獲取URL location.href="URL" // 跳轉到指定頁面 location.reload() // 重新加載頁面
5，彈出框相關方法
1，alert方法：警告框，讓用戶看到某些信息。
alert("瀏覽此網頁註意個人信息保護！");
2，confirm方法：確認框，用於驗證一些用戶的選擇。
confirm("是否要下載此文件？")
3，prompt方法：提示框，用於接收用戶的輸入值。
prompt("請在輸入你的答案")
6，計時相關方法
1，setTimeout方法：設定多長時間後開始執行一段JavaScript代碼。
setTimeout("JavaScript代碼"，秒數) // 秒數的單位為毫秒
2，clearTimeout方法：取消計時設定。
var t=setTimeout("console.log(‘哈哈哈‘)",2000); clearTimeout(t);
3，setInterval方法：按設定的周期執行一段JavaScript代碼。
setInterval("JavaScript代碼",時間間隔) // 返回ID值
4，clearInterval方法：取消設定的setInterval()。
clearInterval(setInterval返回的ID值)
DOM
DOM：是指文檔對象模型，使用它可以訪問HTML文檔中的所有元素。
DOM樹：DOM規定HTML文檔中的每一個元素都是一種節點。
1，document對象：文檔節點，代表整個HTML文檔
2，element對象：標簽節點，代表文檔中的標簽
3，text對象：文本節點，代表標簽中的文本內容
4，attribute對象：屬性節點，代表標簽中的屬性
5，comment對象：註釋節點，代表文檔中的添加的註釋
通過這些對象我們就可以操作HTML文檔做出各種動態變化。
1，標簽查找
1，直接查找
document.getElementById("id值") // 根據ID獲取一個標簽
document.getElementsByClassName("類名") // 根據class屬性獲取
document.getElementsByTagName("標簽名") // 根據標簽名獲取標簽合集
2，間接查找
document.parentElement // 父節點標簽元素 document.children // 所有子標簽 document.firstElementChild // 第一個子標簽元素 document.lastElementChild // 最後一個子標簽元素 document.nextElementSibling // 下一個兄弟標簽元素 document.previousElementSibling // 上一個兄弟標簽元素
2，節點操作
1，創建節點：createElement(標簽名)
document.createElement("div");
2，添加節點：
// 添加一個子節點 某節點.appendChild(標簽名) // 在某節點內的一個節點之前添加一個節點 某節點.insertBefore(標簽名，一個節點)
3，刪除節點：
// 刪除某節點下的一個子節點 某節點.removeChild(要刪除的節點)
4，替換節點：
// 替換某節點下的一個子節點 某節點.replaceChild(新節點, 要替換的子節點);
5，節點的文本：
// 獲取節點的文本值 某節點.innerHTML // 獲取節點的所有的標簽以及文本值 某節點.innerText // 只獲取節點的文本值 // 設置節點的文本值 某節點.innerHTML = 新的標簽和文本值 某節點.innerText = 新的文本值
6，節點的屬性：
// 設置節點的屬性和值 某節點.setAttribute("屬性名"，"屬性值") // 獲取節點的屬性值 某節點.setAttribute("屬性名") // 刪除節點的屬性 某節點.removeAttribute("屬性名") // 標簽的自帶屬性還可以通過 .屬性名 來獲取和設置 節點.自帶屬性名 節點.自帶屬性名=屬性值
7，獲取節點返回值：
// 適用的標簽有：input select textarea 節點.value
8，節點的類的操作：
className // 獲取所有樣式類名(字符串) classList.remove() // 刪除指定類 classList.add() // 添加類 classList.contains() // 類存在返回true，否則返回false classList.toggle() //類存在就刪除，否則添加
JavaScript操作CSS的屬性
1，對於沒有中橫線的CSS屬性一般直接使用style.屬性名即可。如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2，對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫即可。如
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
事件
當用戶觸發某一條件時，瀏覽器會運行一些JavaScript代碼來改變HTML文件的一些屬性，從而完成某一件事情，這個條件就是事件。
JavaScript中常用的事件：
onclick 當用戶點擊某個對象時調用的事件句柄。
ondblclick 當用戶雙擊某個對象時調用的事件句柄。
onfocus 元素獲得焦點。
onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange 域的內容被改變。 應用場景：通常用於表單元素,當元素內容被改變時觸發.（select聯動）
onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress 某個鍵盤按鍵被按下並松開。
onkeyup 某個鍵盤按鍵被松開。
onload 一張頁面或一幅圖像完成加載。
onmousedown 鼠標按鈕被按下。
onmousemove 鼠標被移動。
onmouseout 鼠標從某元素移開。
onmouseover 鼠標移到某元素之上。
onselect 在文本框中的文本被選中時發生。
onsubmit 確認按鈕被點擊，使用的對象是form。
事件要想被觸發就要事先將其綁定到對應的標簽上，JavaScript綁定事件的方式有：
1，在標簽內添加事件屬性
<div id="d1" onclick="changeColor(this);">點我</div> // this表示觸發事件的當前元素 <script> function changeColor(ths) { ths.style.backgroundColor="green"; } </script>
2，在body標簽的最後的script標簽裏添加事件
<div id="d2">點我</div> <script> var divEle2 = document.getElementById("d2"); divEle2.onclick=function () { this.innerText="真點啊"; } </script>
前端開發之BOM和DOM