win對象、DOM及事件

1. 什麼是DOM

DOM 事件被髮送用於通知代碼相關的事情已經發生了。

每一個事件都是繼承自Event 類的對象，能夠包括自定義的成員屬性及函數用於獲取事件發生時相關的更多信息。

事件能夠表示從基本用戶交互到渲染模型中發生的事件的自動通知的全部內容。

參考：https://developer.mozilla.org...

2. Event Listener Breakpoints 事件偵聽器斷點

Animation	動畫
Canvas	畫布
Clipboard	剪貼板
Control	控制
DOM Mutation	DOM突變
Device	設備
Drag / drop	拖放
Geolocation	地理位置
Keyboard	鍵盤
Load	加載
Media	媒體
Mouse	鼠標
Notification	通知
Parse	解析
Picture-in-Picture	字母畫面
Pointer	指針
Script	腳本
Timer	計時器
Touch	觸摸
WebAudio	web音頻
Window	窗口
Worker	工人
XHR	XMLHttpRequest對象

3. DOM操縱html輸出流

（1）改變html輸出流
  （2）尋找元素
        經過id尋找元素
        經過標籤名尋找元素
  （3）改變html內容   
        使用屬性:innerHTML
  （4）改變html屬性
        使用屬性：attribute

4. DOM EventListener

（1）addEventListener
           方法用於向指定元素添加時間句柄
  （2）removeEventListener
           移除添加的事件句柄
        附：可添加多個句柄，句柄之間不會覆蓋
        mouseover、mouseout事件

5. 事件流

（1）事件流
           描述的是在頁面中接受事件的順序
  （2）事件冒泡(false)
           由最具體（最內層）的元素接收，而後逐級向上傳播至不具體的節點（甚至文檔）
  （3）事件捕獲(true)
           最不具體的節點先接收事件，而最具體的節點應該是最後接收事件

6. 事件處理

（1）html事件處理
           直接添加在html結構中
           缺點：可能須要修改多處
  （2）DOM　０級事件處理
           把一個函數賦值給另外一個事件處理程序屬性,
           例：`var btn1 = document.getElementById("wer").onclick = function()`
           注意：後面的函數會覆蓋以前的函數
  （3）DOM　２級事件處理
           addEventListener("事件名"，"事件處理函數"，"布爾值");
           true：事件捕獲
           false：事件冒泡
           removeEventListener();
                 同０級事件處理相比它不會覆蓋以前的事件
  （4）IE事件處理程序
           attachEvent
           detachEvent
           附：針對IE版本<=8的版本，同addEventListener、removeEventListener相似
                 click改成onclick便可

7. 事件對象

（1）事件對象
            在觸發DOM事件時都會產生一個事件對象
    （2）事件對象event
            1）type：獲取事件類型
            2）target：獲取事件目標
            3）stopPropagation()：阻止事件冒泡
            4）preventDefault()：阻止事件默認行爲

注：本身操做時出了不少問題，暫未解決，我認爲這部分知識可能發生了更新

8. JS 對象

JS中全部事物都是對象（內置對象：字符串、數組、函數......）
    每一個對象都帶有屬性和方法，可自定義對象
    建立方法：
            （1）new操做符 (對象的構造函數同函數同樣，而後new就行)
            （2）直接賦值（像構造函數同樣）
            （3）函數建立（函數名即對象名）

    String對象
            方法：  
            （1）indexOf() 查找字符串
            （2）match() 內容匹配
            （3）replace() 替換內容（2個參數）
            （4）大小寫轉換 toUpperCase() toLocaleLowerCase()
            （5）字符串轉數組split(",")，參數表示轉換的根據
    DATE日期對象
            （1）得到方法new Date()
            （2）getFullYear()、getMonth()等等
             注：getMonth或其餘某些函數從0開始計數，因此須要+1

    Array數組對象
            （1）建立
            （2）訪問
            （3）經常使用方法   
                    a) concat()數組合並
                    b) sort()排序——升序、降序（奇葩方法）
                    c) push()末尾追加元素
                    d) reverse()數據元素翻轉
    
    Math對象
            經常使用方法
            （1）Math.round(3.8) 四捨五入
            （2）Math.random()*8 從0到1*8隨機生成，可以使用parseInt(Math.random()*10)轉換爲int型
            （3）min & max
            （4）abs()絕對值

9. DOM 對象控制HTML

（1）getElementsByTagName、getElementsByName同名標籤會一塊兒得到，存在對象裏
    （2）getAttribute獲取當前元素的某個屬性
    （3）setAttribute("","") 設置某個屬性(新屬性or已有的屬性)
    （4）var a=document.getElementsByTagName("ul")[0].childNodes;存在NodeList，類數組（不是一個數組）
    （5）獲取父節點 document.write(document.getElementById("divsp").parentNode.nodeName);
    （6）建立元素節點 document.createElement("button");
    （7）appendChild往末尾追加節點
    （8）insertBefore插入節點
    （9）div.removeChild(div.childNodes[1]);刪除節點
    （10）offsetHeight、scrollHeight獲取頁面尺寸

10. 注意事項

1. 不要在文檔加載完成以後使用document.write，這會覆蓋以前的文本

11. window對象

BOM（Browser Object Model）核心，指當前瀏覽器對象窗口
  全部JS全局對象、函數、變量均爲window對象成員
  例如全局變量位window屬性、全局函數爲window方法，甚至document也是其屬性之一

12. window尺寸

參考文章：https://juejin.im/post/5e9e9d...

window.innerWidth 瀏覽器窗口內部高度(不包含滾動條，意思是滾動條實際上是算在窗口裏面的)  
  window.innerHeight(經本人親自檢驗，的確是瀏覽器內部窗口高度，也就是顯示網頁內容的地方)

13. window方法

window.open(); 打開新窗口（通常會被瀏覽器攔截）
  window.close(); 關閉當前窗口

14. 計時器

(1)setInterval有固定的時間延遲循環調用函數
        對應clearInterval(nIntervId);要取消的定時器的 ID。是由 setInterval() 返回的。
        值得一提的是，所用的ID池setInterval()和setTimeout()共享，
        這意味着你能夠在技術上使用clearInterval()和clearTimeout()互換。
        可是，爲清楚起見，應避免這樣作。
  （2）setTimeout在定時器到期後執行一個函數或指定的一段代碼
        對應scope.clearTimeout(timeoutID)
        您要取消的超時的標識符。此ID是經過對的相應調用返回的setTimeout()。
        值得一提的是ID的池使用setTimeout()和setInterval()共享，
        這意味着你能夠在技術上使用clearTimeout()和clearInterval()互換。
        可是，爲清楚起見，應避免這樣作。

15. History對象

window.history對象包含瀏覽器的歷史（url）的集合
     方法：
        （1）history.back();
        （2）history.forward();
        （3）history.go();

16. Location對象

用於獲取當前頁面的地址（URL），並把瀏覽器從新定向到新的頁面。
     屬性：
        （1）location.hostname返回web主機域名
        （2）location.pathname返回檔期那文件的路徑和文件名
        （3）location.port返回web主機端口
        （4）location.protocol返回所使用的web協議（http或https）
        （5）location.href返回當前頁面的url
        （6）location.assign()加載新的文檔

17. screen對象

window.screen對象包含有關用戶屏幕的信息
     屬性：
        （1）screen.availHeight可用屏幕高度
        （2）screen.availWidth可用屏幕寬度
        （3）screen.Height屏幕高度
        （4）screen.Width屏幕寬度

18. 認識面向對象

概念：
     （1）一切事物皆對象
     （2）對象具備封裝性和繼承特性
     （3）信息隱藏
  建立：
     （1）直接命名賦值
     （2）函數構造器

19. 深刻了解面向對象

JS中不存在類（es6已經引入，實爲原型繼承的語法糖）的概念，但能夠使用function模擬類
     注意原型鏈prototype的使用，以及類套類+（當即執行函數）閉包實現封裝
     prototype 屬性使您有能力向對象添加屬性和方法
     封裝以後能夠使用window賦值向外部提供一個引用的接口
     無論方法仍是屬性直接賦值就能夠 例：`window.person = person;`