技術標籤：WEB複習期末考試domhtmljsjavascriptvue

文章目錄

• • 1：XHTML
  • 2：XML
  • 3：DOM樹
  • 4：DOM0 2的事件流

1：XHTML

• 可擴充套件超文字標記語言
• 是基於XML可擴充套件標記語言的HTML
• 比HTML更加的嚴格，更加的規範

2：XML

• 可擴充套件標記語言
• 是一種結構化的，標記語言
• 可以作為資料傳輸一種格式（在ajax中）現在資料傳輸多用json
• 也可以作為一個配置檔案的格式

3：DOM樹

• 文件物件模型
• 用物件的方式表示了html所有的元素，以及獲取他們的方法
• 可以控制所有html的元素
• HTMLdocument就是根節點
  • 除此之外，還有屬性節點，元素節點，註釋節點，entity節點
• 以HTMLdocument為根節點，其他節點為子節點的一棵樹的資料結構表示的DOM樹

4：DOM0 2的事件流

• 事件模型 捕獲和冒泡

  • 捕獲：從Window 到目標元素
  • 冒泡：從當前元素到Window

• 事件流

  • 點選滑鼠：左鍵怎麼傳到頁面上的，怎麼響應
  • 事件冒泡（主流）
  • 事件捕獲

• DOM事件流

  • 事件捕獲節點
  • 處於目標階段
  • 事件冒泡階段

• DOM 0

  • 直接通過 onclick實現

    <input id="mybutton" type="button" value="click me" οnclick="alert ("Hello world") ">
     
    

    document.getElementById("mybutton").onclick=function(){
        alert("Hello");
    }
    

  • 執行之後的結果是輸出 Hello，而不是Hello world

  • 說明後面的事件會覆蓋前面的事件

  • DOM 0具有很好的跨瀏覽器的優勢

  • 會以最快的速度繫結

    • 可能導致頁面未完全加載出來
    • 事件無法正常的進行

  • 刪除的時候，將onclick設定為null

• DOM 2

  • 使用addEventListener 和removeEventListener
  • 具有 時間捕獲，處於目標，事件冒泡三個階段
  • 刪除的時候，直接使用removeEventListener

複習 1：什麼是DOM樹

什麼是事件流

什麼是時間處理模型

DOM0 DOM2的區別和異同

繫結速度很快 瀏覽器的相容性很強 DOM直接用conclick 後面的時間會覆蓋前面的事件

DOM2 可以繫結多個事件，不會被覆蓋 同時它具有事件捕獲 處於目標 和時間冒泡 三個階段 addeventlistener 和 removeEvenlistener刪除的時候直接用remove就可以了

DOM 文件物件模型，定義了html所有元素，以及獲取他們的方式。其中以HTMLdocument為根節點，其他的節點為子節點構成的一個樹的資料結構就稱為DOM樹。其中除了文件節點，還有元素節點，屬性節點，entity節點，主註釋節點

XML 可擴充套件標記語言

XHTML