DOM之概述

DOM概述

• JS = ECMAScript(核心語法) + DOM(專門操作網頁的API) + BOM(專門操作瀏覽器窗口的API)
• DHTML : 所有實現網頁動態效果的統稱, 即HTML + CSS + JS
• DOM: 操作一切結構化文檔的通用API, 即用DOM可操作HTML, 也可操作XML
• 核心DOM: 可以操作所有文檔的通用API, 可實現增刪改查等所有功能, 但操作繁瑣
• HTML DOM: 基於核心DOM的API, 擴展的專門操作HTML的API, 簡單易用,　重點簡化了修改操作, 對個別複雜HTML元素擴展了簡化方法
• 注意: 開發中,　修改時可用HTML DOM, 並且優先使用HTML DOM, 查、增、刪時只能使用核心DOM

DOM Tree

• 網頁加載行爲
  
  • 網頁加載進內存時, 會先創建一個document對象, 指代當前網頁
  • 網頁中的所有內容: 元素、文本、屬性、註釋等都叫節點對象
  • document作爲DOM Tree的根節點, 所有節點對象都是document對象的子節點
• 節點對象的類型:
  
  • document對象: 文檔類型(Document)
  • 元素節點: 元素類型(Element)
  • 文本節點: 文本類型(Text)
  • 屬性節點: 屬性類型(Attr)
• Node類型: 是所有節點的父類型
  
  • 3個通用屬性:
    
    • nodeType: 獲得當前節點的類型, 返回的是一個數字, 用於區分不同的節點類型
      
      • ELEMENT_NODE: 1
      • ATTRIBUTE_NODE: 2
      • TEXT_NODE: 3
      • DOCUMENT_NODE: 9
    • nodeName: 獲得當前節點的名稱, 用於區分不同的元素節點
      
      • 元素節點, 返回全大寫字母標籤名
      • 文本節點, 返回text
      • 文檔節點, 返回document
    • nodeValue: 獲得當前節點的值, 對元素節點無效
      
      • 元素節點, 返回null
      • 文本節點, 返回文本內容
      • 屬性節點, 返回屬性值
• DOM Tree中的6種關係
  
  • 父子關係類: parentNode、childNodes、firstChild、lastChild
    
    • childNodes: NodeList集合——類數組對象
    • 動態集合: 不包含結果對象的完整屬性, 僅保存對象的引用, 每次使用, 都重複查詢
  • 兄弟關係類: previousSibling、nextSibing
  • 注意: 上述6種關係, 除parentNode外, 都會受看不見的空字符的干擾
• DOM Tree的遍歷
  
  • 節點樹: 包含所有節點對象的樹結構
  • 遍歷節點樹: 深度優先算法, 遞歸調用
  • 遍歷元素樹: 僅包含元素節點的樹結構, 僅是節點樹的子集, 存在兼容性問題
  • arguments.callee: 指代當前函數對象
    
    • 何時使用: 多用於在遞歸調用內部取代當前函數名

	節點樹	元素樹
父節點	parentNode	parentElementNode
所有子節點	childNodes	children
第一個子節點	firstChild	firstElementChild
最後一個子節點	lastChild	lastElementChild
前一個兄弟	previousSibling	previousElementSibling
後一個兄弟	nextSibling	nextElementSibling

• DOM Tree遍歷API: NodeIterator、TreeWalker —— 詳見博客另一篇文章“遍歷DOM(NodeIterator和TreeWalker的使用)”
  
  • 內部同樣使用深度優先算法
  • 步驟: 2步
    
    1. 創建迭代器對象: var iterator = document.creatNodeIterator(root, whatToShow, filter,entityReferenceExpansion);
       
       • 注意: 迭代器開始時, 站在第一個節點的前一個位置
       • 2個方法:
         
         • iterator.nextNode() 讓迭代器向下一個對象跳一步, 同時返回跳到的對象, 如果沒有下一個節點了, 則返回null
         • iterator.previousNode
    2. 利用循環推動迭代器反覆向下一個節點移動
  • NodeIterator和TreeWalker異同
    
    • 相同點: 創建和遍歷的方法完全一樣
    • 區別一: Iterator一開始站在開始節點之前的空位置, TreeWalker一開始就站在開始節點上
    • 區別二: 擴展了更靈活的跳轉方法 —— parentNode()、firstChild()、nextSibling()等

查找元素節點

• 按HTML屬性查找
  
  • 無兼容性問題的API
    
    • document.getElementById(“id值”)
    • parent.getElementsByTagName(“標籤名”);
    • parent.getElementsByName(“name屬性”);
  • IE8不兼容的API
    
    • parent.getElementsByClassName(“class名”)
  • 注意: getElementsXXX, 返回HTMLCollection —— 動態集合
• Selector API: 專門利用css選擇器查找任意元素的方法 —— jQuery的核心
  
  • parent.querySelector(“選擇器”); 只返回第一個匹配的元素
  • parent.querySelectorAll(“選擇器”); 返回所有符合選擇器的元素對象, 是包含完整對象屬性的集合 —— 非動態集合

獲取或修改元素的內容

• innerHTML: 獲得/設置元素開始標籤和結束標籤之間的HTML原文
  
  • 何時使用: 獲取或修改元素的HTML原文時
  • 固定套路:
    
    • 批量刪除父元素下所有子節點: elem.innerHTML=”“;
    • 批量替換父元素下所有節點: elem.innerHTML=”所有子元素標籤組成的HTML字符串”
• textContent: 獲得或設置元素開始標籤和結束標籤之間的轉化後的正文內容
  
  • IE8不兼容, 可替換爲innerText