1. 程式人生 > >前端開發之BOM和DOM

前端開發之BOM和DOM

obj clear comm form useragent bom 替換 ntop attribute

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