前端三劍客-06js_BOM_DOM

BOM

window對象

經常使用方法:

window.innerHeight - 瀏覽器窗口的內部高度
window.innerWidth - 瀏覽器窗口的內部寬度
window.open() - 打開新窗口
window.close() - 關閉當前窗口

new Date();
// 等價於
new window.Date();

navigator對象

• 瀏覽器對象，經過這個對象能夠斷定用戶所使用的瀏覽器，包含了瀏覽器相關信息。

navigator.appName　　// Web瀏覽器全稱
navigator.appVersion　　// Web瀏覽器廠商和版本的詳細字符串
navigator.userAgent　　// 客戶端絕大部分信息
navigator.platform　　　// 瀏覽器運行所在的操做系統

screen對象

• 屏幕對象

screen.availWidth - 可用的屏幕寬度
screen.availHeight - 可用的屏幕高度

history對象

• 瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史

history.forward()  // 前進一頁
history.back()  // 後退一頁

location對象

• 對象用於得到當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。

location.href  獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload() 從新加載頁面

彈出框

警告框:    alert("你看到了嗎？");    
確認框:    confirm("你肯定嗎？")
提示框:    prompt("請在下方輸入","你的答案")

計時事件

setTimeout()

• 會返回某個值,第二個參數指示從當前起多少毫秒後執行第一個參數

var t=setTimeout("JS語句",毫秒)

clearTimeout()

clearTimeout(t)     結束t的執行

setInterval()

• setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。

setInterval("JS語句",時間間隔)

clearInterval()

• clearInterval() 方法可取消由 setInterval() 設置的 timeout

clearInterval(setinterval返回的ID值)

DOM

DOM（Document Object Model）是一套對文檔的內容進行抽象和概念化的方法。

HTML DOM 樹

DOM標準規定節點

• 文檔節點(document對象)：表明整個文檔
• 元素節點(element 對象)：表明一個元素（標籤）
• 文本節點(text對象)：表明元素（標籤）中的文本
• 屬性節點(attribute對象)：表明一個屬性，元素（標籤）纔有屬性
• 註釋是註釋節點(comment對象)　

查找標籤

• 直接查找

  • document.getElementById 根據ID獲取一個標籤
  • document.getElementsByClassName 根據class屬性獲取
  • document.getElementsByTagName 根據標籤名獲取標籤合集

• 間接查找

  • parentElement 父節點標籤元素
  • children 全部子標籤
  • firstElementChild 第一個子標籤元素
  • lastElementChild 最後一個子標籤元素
  • nextElementSibling 下一個兄弟標籤元素
  • previousElementSibling 上一個兄弟標籤元素

節點操做

建立節點

1. var divEle = document.createElement("div");

添加節點

1. 追加一個子節點（做爲最後的子節點)
   • somenode.appendChild(newnode)；
2. 把增長的節點放到某個節點的前邊。
   • somenode.insertBefore(newnode,某個節點);

刪除節點

1. 得到要刪除的元素，經過父元素調用該方法刪除。
   • somenode.removeChild(要刪除的節點)

替換節點

1. 替換對應的節點
   • somenode.replaceChild(newnode, 某個節點);

屬性節點

1. 獲取文本

   • var divEle = document.getElementById("d1")
     divEle.innerText
     divEle.innerHTML

2. 設置文本節點的值

   • var divEle = document.getElementById("d1")
     divEle.innerText="1"
     divEle.innerHTML="<p>2</p>"

attribute操做

var divEle = document.getElementById("d1");

1. 設置: divEle.setAttribute("age","18")
   
2. 獲取: divEle.getAttribute("age")
   
3. 刪除: divEle.removeAttribute("age")

獲取值操做

elementNode.value

適用於標籤:

• .input
  
• .select
• .textarea

class的操做

1. 獲取全部樣式類名(字符串)
   • className
2. 刪除指定類
   • classList.remove(cls)
3. 添加類
   • classList.add(cls)
4. 存在返回true，不然返回false
   • classList.contains(cls)
5. 存在就刪除，不然添加
   • classList.toggle(cls)

指定css操做

格式: obj.style.屬性名 = ""

obj.style.backgroundColor="red"

事件

• 經常使用事件

  • onclick 點擊某個對象時調用
  • ondblclick 雙擊某個對象時調用
  • onfocus 元素得到焦點。
    
  • onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.
  • onchange 域的內容被改變。 應用場景：一般用於表單元素,當元素內容被改變時觸發.（select聯動）
  • onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
  • onkeypress 某個鍵盤按鍵被按下並鬆開。
  • onkeyup 某個鍵盤按鍵被鬆開。
  • onload 一張頁面或一幅圖像完成加載。
  • onmousedown 鼠標按鈕被按下。
  • onmousemove 鼠標被移動。
  • onmouseout 鼠標從某元素移開。
  • onmouseover 鼠標移到某元素之上。
  • onselect 在文本框中的文本被選中時發生。
  • onsubmit 確認按鈕被點擊，使用的對象是form。

綁定方式

1. 主動綁定

   • 點我

1. 被動綁定

   • 點我

window.onload

• window.onload事件在文件加載過程結束的時候觸發。