前端開發之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