整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
HTML DOM 節(jié)點
在 HTML DOM (Document Object Model) 中 , 每一個元素都是 節(jié)點:
文檔是一個文檔。
所有的HTML元素都是元素節(jié)點。
所有 HTML 屬性都是屬性節(jié)點。
文本插入到 HTML 元素是文本節(jié)點。are text nodes。
注釋是注釋節(jié)點。
Document 對象
當瀏覽器載入 HTML 文檔, 它就會成為 document 對象。
document 對象是HTML文檔的根節(jié)點與所有其他節(jié)點（元素節(jié)點，文本節(jié)點，屬性節(jié)點, 注釋節(jié)點）。
Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。
提示：Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。
瀏覽器支持
所有主要瀏覽器都支持 Document 對象。
Document 對象屬性和方法
HTML文檔中可以使用以上屬性和方法:
| 屬性 / 方法 | 描述 |
|---|---|
| document.activeElement | 返回當前獲取焦點元素 |
| document.addEventListener() | 向文檔添加句柄 |
| document.adoptNode(node) | 從另外一個文檔返回 adapded 節(jié)點到當前文檔。 |
| document.anchors | 返回對文檔中所有 Anchor 對象的引用。 |
| document.applets | 返回對文檔中所有 Applet 對象的引用。 |
| document.baseURI | 返回文檔的絕對基礎 URI |
| document.body | 返回文檔的body元素 |
| document.close() | 關閉用 document.open() 方法打開的輸出流，并顯示選定的數(shù)據(jù)。 |
| document.cookie | 設置或返回與當前文檔有關的所有 cookie。 |
| document.createAttribute() | 創(chuàng)建一個屬性節(jié)點 |
| document.createComment() | createComment() 方法可創(chuàng)建注釋節(jié)點。 |
| document.createDocumentFragment() | 創(chuàng)建空的 DocumentFragment 對象，并返回此對象。 |
| document.createElement() | 創(chuàng)建元素節(jié)點。 |
| document.createTextNode() | 創(chuàng)建文本節(jié)點。 |
| document.doctype | 返回與文檔相關的文檔類型聲明 (DTD)。 |
| document.documentElement | 返回文檔的根節(jié)點 |
| document.documentMode | 返回用于通過瀏覽器渲染文檔的模式 |
| document.documentURI | 設置或返回文檔的位置 |
| document.domain | 返回當前文檔的域名。 |
| document.domConfig | 返回normalizeDocument()被調用時所使用的配置 |
| document.embeds | 返回文檔中所有嵌入的內(nèi)容（embed）集合 |
| document.forms | 返回對文檔中所有 Form 對象引用。 |
| document. getElementsByClassName() | 返回文檔中所有指定類名的元素集合，作為 NodeList 對象。 |
| document.getElementById() | 返回對擁有指定 id 的第一個對象的引用。 |
| document.getElementsByName() | 返回帶有指定名稱的對象集合。 |
| document.getElementsByTagName() | 返回帶有指定標簽名的對象集合。 |
| document.images | 返回對文檔中所有 Image 對象引用。 |
| document.implementation | 返回處理該文檔的 DOMImplementation 對象。 |
| document.importNode() | 把一個節(jié)點從另一個文檔復制到該文檔以便應用。 |
| document.inputEncoding | 返回用于文檔的編碼方式（在解析時）。 |
| document.lastModified | 返回文檔被最后修改的日期和時間。 |
| document.links | 返回對文檔中所有 Area 和 Link 對象引用。 |
| document.normalize() | 刪除空文本節(jié)點，并連接相鄰節(jié)點 |
| document.normalizeDocument() | 刪除空文本節(jié)點，并連接相鄰節(jié)點的 |
| document.open() | 打開一個流，以收集來自任何 document.write() 或 document.writeln() 方法的輸出。 |
| document.querySelector() | 返回文檔中匹配指定的CSS選擇器的第一元素 |
| document.querySelectorAll() | document.querySelectorAll() 是 HTML5中引入的新方法，返回文檔中匹配的CSS選擇器的所有元素節(jié)點列表 |
| document.readyState | 返回文檔狀態(tài) (載入中……) |
| document.referrer | 返回載入當前文檔的文檔的 URL。 |
| document.removeEventListener() | 移除文檔中的事件句柄(由 addEventListener() 方法添加) |
| document.renameNode() | 重命名元素或者屬性節(jié)點。 |
| document.scripts | 返回頁面中所有腳本的集合。 |
| document.strictErrorChecking | 設置或返回是否強制進行錯誤檢查。 |
| document.title | 返回當前文檔的標題。 |
| document.URL | 返回文檔完整的URL |
| document.write() | 向文檔寫 HTML 表達式 或 JavaScript 代碼。 |
| document.writeln() | 等同于 write() 方法，不同的是在每個表達式之后寫一個換行符。 |
警告 !!!
在 W3C DOM核心，文檔對象 繼承節(jié)點對象的所有屬性和方法。
很多屬性和方法在文檔中是沒有意義的。
HTML 文檔對象可以避免使用這些節(jié)點對象和屬性：
| 屬性 / 方法 | 避免的原因 |
|---|---|
| document.attributes | 文檔沒有該屬性 |
| document.hasAttributes() | 文檔沒有該屬性 |
| document.nextSibling | 文檔沒有下一節(jié)點 |
| document.nodeName | 這個通常是 #document |
| document.nodeType | 這個通常是 9(DOCUMENT_NODE) |
| document.nodeValue | 文檔沒有一個節(jié)點值 |
| document.ownerDocument | 文檔沒有主文檔 |
| document.ownerElement | 文檔沒有自己的節(jié)點 |
| document.parentNode | 文檔沒有父節(jié)點 |
| document.previousSibling | 文檔沒有兄弟節(jié)點 |
| document.textContent | 文檔沒有文本節(jié)點 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
用JavaScript訪問和操作的HTML DOM對象的例子。
Document 對象
使用 document.write() 輸出文本
使用 document.write() 輸出 HTML
返回文檔中錨的數(shù)目
返回文檔中第一個錨的 innerHTML
返回文檔中表單的數(shù)目
返回文檔中第一個表單的名字
返回文檔中的圖像數(shù)
返回文檔中第一個圖像的ID
返回文檔中的鏈接數(shù)
返回文檔中的第一個鏈接的ID
返回文檔中的所有cookies的名稱/值對
返回加載的文檔的服務器域名
返回文檔的最后一次修改時間
返回加載的當前文檔的URL
返回文檔的標題
返回文檔的完整的URL
打開輸出流，向流中輸入文本
write() 和 writeln()的不同
用指定的ID彈出一個元素的innerHTML
用指定的Name彈出元素的數(shù)量
用指定的tagname彈出元素的數(shù)量
Anchor 對象
返回和設置鏈接的charset屬性
返回和設置鏈接的href屬性
返回和設置鏈接的hreflang屬性
返回一個錨的名字
返回當前的文件和鏈接的文檔之間的關系
改變鏈接的target屬性
返回一個鏈接的type屬性的值
Area 對象
返回圖像映射某個區(qū)域的替代文字
返回圖像映射某個區(qū)域的坐標
返回一個區(qū)域的href屬性的錨部分
返回的主機名：圖像映射的某個區(qū)域的端口
返回圖像映射的某個區(qū)域的hostname
返回圖像映射的某個區(qū)域的port
返回圖像映射的某個區(qū)域的href
返回圖像映射的某個區(qū)域的pathname
返回圖像映射的某個區(qū)域的protocol
返回一個區(qū)域的href屬性的querystring部分
返回圖像映射的某個區(qū)域的shape
返回圖像映射的某個區(qū)域的target的值
Base 對象
返回頁面上所有相對URL的基URL
返回頁面上所有相對鏈接的基鏈接
Button 對象
當點擊完button不可用
返回一個button的name
返回一個button的type
返回一個button的value
返回一個button所屬表的ID
Form 對象
返回一個表單中所有元素的value
返回一個表單acceptCharset屬性的值
返回一個表單action屬性的值
返回表單中的enctype屬性的值
返回一個表單中元素的數(shù)量
返回發(fā)送表單數(shù)據(jù)的方法
返回一個表單的name
返回一個表單target屬性的值
重置表單
提交表單
Frame/IFrame 對象
對iframe排版
改變一個包含在iframe中的文檔的背景顏色
返回一個iframe中的frameborder屬性的值
刪除iframe的frameborder
改變iframe的高度和寬度
返回一個iframe中的longdesc屬性的值
返回一個iframe中的marginheight屬性的值
返回一個iframe中的marginwidth屬性的值
返回一個iframe中的name屬性的值
返回和設置一個iframe中的scrolling屬性的值
改變一個iframe的src
Image 對象
對image排版
返回image的替代文本
給image加上border
改變image的高度和寬度
設置image的hspace和vspace屬性
返回image的longdesc屬性的值
創(chuàng)建一個鏈接指向一個低分辨率的image
返回image的name
改變image的src
返回一個客戶端圖像映射的usemap的值
Event 對象
哪個鼠標鍵被點擊了？
被按下的鍵盤鍵的keycode？
鼠標的坐標？
鼠標相對于屏幕的坐標？
shift鍵被按下了嗎？
哪個元素被按下了？
哪個事件發(fā)生了？
Option 和 Select 對象
禁用和啟用下拉列表
獲得有下拉列表的表單的ID
獲得下拉列表的選項數(shù)量
將下拉列表變成多行列表
在下拉列表中選擇多個選項
彈出下拉列表中所有選項
彈出下拉列表中被選中的選項的索引
改變下拉列表中被選中的選項的文本
刪除下拉列表中的選項
Table, TableHeader, TableRow, TableData 對象
改變表格邊框的寬度
改變表格的cellpadding和cellspacing
指定表格的frame
為表格指定規(guī)則
一個行的innerHTML
一個單元格的innerHTML
為表格創(chuàng)建一個標題
刪除表格中的行
添加表格中的行
添加表格行中的單元格
單元格內(nèi)容水平對齊
單元格內(nèi)容垂直對齊
對單個單元格的內(nèi)容水平對齊
對單個單元格的內(nèi)容垂直對齊
改變單元格的內(nèi)容
改變單元格橫跨的列數(shù)(colspan屬性)
TML DOM（文檔對象模型）是一種基于文檔的編程接口，它是 HTML 和 XML 文檔的編程接口。它可以讓開發(fā)人員通過 JavaScript 或其他腳本語言來訪問和操作 HTML 和 XML 文檔的內(nèi)容、結構和樣式。
HTML DOM 將整個 HTML 或 XML 文檔表示為一個樹狀結構，其中每個元素（如標簽、文本、屬性）都是一個節(jié)點。通過 HTML DOM，開發(fā)人員可以通過節(jié)點名稱、節(jié)點類型、節(jié)點屬性等方式來訪問和操作 HTML 或 XML 文檔中的節(jié)點。例如，開發(fā)人員可以使用 HTML DOM 來修改或刪除元素、添加或刪除屬性、創(chuàng)建新的節(jié)點、獲取或設置元素的樣式等。
HTML DOM 還提供了許多事件（如單擊、雙擊、鼠標移動等）和方法（如 getElementById、getElementsByTagName 等），可以幫助開發(fā)人員更加方便地操作和控制 HTML 或 XML 文檔。同時，HTML DOM 還提供了跨瀏覽器的支持，可以在不同的瀏覽器和操作系統(tǒng)上使用相同的代碼。
總的來說，HTML DOM 提供了一種方便、靈活和強大的方式來訪問和操作 HTML 或 XML 文檔的內(nèi)容、結構和樣式，是 Web 開發(fā)中必不可少的一部分。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
