先知BOM,再知DOM BOM <a href="#">BOM</a> DOM* <a href="#">DOM</a> javaScript中的DOM操作 jQuery中的DOM操作 java中的DOM操作 基於JavaScript的DOM操作 DOM:文檔對象模型,文檔可以是.xml .html ...
先知BOM,再知DOM
BOM <a href="#">BOM</a>
DOM* <a href="#">DOM</a>
- javaScript中的DOM操作
- jQuery中的DOM操作
- java中的DOM操作
- 基於JavaScript的DOM操作
DOM:文檔對象模型,文檔可以是.xml .html,那麼 xmlDOM 和 htmlDOM是否有關係?
XMLDOM(其實就是一組可以操作xml文檔的api說明)定義了訪問和處理 XML 文檔的標準方法 HTMLDOM文檔格式 符合XML語法標準,所以可以使用XML DOM API 在DOM模型中每個元素 都會被解析為一個節點Node,而常用的節點類型又分為
- 元素節點 Element
- 屬性節點 Attr
- 文本節點 Text
- 文檔節點 Document
htmlDOM 和 xmlDOM 文檔類型 htmlDOM xmlDOM 針對性不同 主要針對.html文檔 主要針對.xml文檔 技術支持 用JavaScript來開發html DOM比較合適 一般用Java 說明:
- HTML DOM是對XML DOM的擴展
- 進行 JavaScript DOM開發時可以同時使用 XML DOM和 HTML DOM
(Document對象)Node-(Element|Test|Attribute對象)Node-
每個載入瀏覽器的 HTML 文檔都會成為 Document 對象
•常用屬性
–all[] 提供對文檔中所有 HTML 元素的訪問 FF不支持
–forms[]返回對文檔中所有 Form 對象引用
–body 提供對 <body> 元素的直接訪問
• 常用方法 –getElementById():返回對擁有指定 id 的第一個對象的引用 –getElementsByName():返回帶有指定名稱的對象集合 –getElementsByTagName():返回帶有指定標簽名的對象集合 –write()向文檔寫 HTML 表達式 或 JavaScript 代碼
(Document對象)Node-(Element|Test|Attribute對象)Node-
常用屬性 •nodeName –如果是元素節點,nodeName返回這個元素的名稱 –如果是屬性節點,nodeName返回這個屬性的名稱 –如果是文本節點,nodeName返回一個內容為#text 的字元串 •nodeType –Node.ELEMENT_NODE --->-- 元素節點 –Node.ATTRIBUTE_NODE --->-- 屬性節點 –Node.TEXT_NODE --->-- 文本節點 •nodeValue –如果給定節點是一個屬性節點,返回值是這個屬性的值 –如果給定節點是一個文本節點,返回值是這個文本節點內容 –如果給定節點是一個元素節點,返回值是 null 常見操作:增刪改查 •DOM 獲取節點 •DOM 改變節點 •DOM 刪除節點 •DOM 替換節點 •DOM 創建節點 •DOM 添加節點 基於JavaScript的DOM操作,操作節點對象時,事件的處理是很有必要的,如果為DOM操作提供事件處理,會很有樂趣 •滑鼠移動事件 :mousemove | mouseout | mouseover •滑鼠點擊事件 :click | dblclick | mousedown | mouseup •載入與卸載事件 :load | unload •聚焦與離焦事件 : focus | blur •鍵盤事件 : keydown | keyup | keypress •提交與重置事件 : submit | reset •選擇與改變事件 : select | change
- 基於jQuery的DOM操作
選擇器(如果要用jQuery實現DOM的操作,那麼必須依賴於選擇器)
- 基本選擇器
- 層次選擇器
- 過濾選擇器
- 基本過濾選擇器
- 內容過濾選擇器
- 屬性過濾選擇器
- 子元素過濾選擇器
- 表單對象屬性過濾選擇器
- 表單選擇器
操作DOM