整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
用JavaScript訪問和操作的HTML DOM對象的例子。
Document 對象
使用 document.write() 輸出文本
使用 document.write() 輸出 HTML
返回文檔中錨的數目
返回文檔中第一個錨的 innerHTML
返回文檔中表單的數目
返回文檔中第一個表單的名字
返回文檔中的圖像數
返回文檔中第一個圖像的ID
返回文檔中的鏈接數
返回文檔中的第一個鏈接的ID
返回文檔中的所有cookies的名稱/值對
返回加載的文檔的服務器域名
返回文檔的最后一次修改時間
返回加載的當前文檔的URL
返回文檔的標題
返回文檔的完整的URL
打開輸出流，向流中輸入文本
write() 和 writeln()的不同
用指定的ID彈出一個元素的innerHTML
用指定的Name彈出元素的數量
用指定的tagname彈出元素的數量
Anchor 對象
返回和設置鏈接的charset屬性
返回和設置鏈接的href屬性
返回和設置鏈接的hreflang屬性
返回一個錨的名字
返回當前的文件和鏈接的文檔之間的關系
改變鏈接的target屬性
返回一個鏈接的type屬性的值
Area 對象
返回圖像映射某個區域的替代文字
返回圖像映射某個區域的坐標
返回一個區域的href屬性的錨部分
返回的主機名：圖像映射的某個區域的端口
返回圖像映射的某個區域的hostname
返回圖像映射的某個區域的port
返回圖像映射的某個區域的href
返回圖像映射的某個區域的pathname
返回圖像映射的某個區域的protocol
返回一個區域的href屬性的querystring部分
返回圖像映射的某個區域的shape
返回圖像映射的某個區域的target的值
Base 對象
返回頁面上所有相對URL的基URL
返回頁面上所有相對鏈接的基鏈接
Button 對象
當點擊完button不可用
返回一個button的name
返回一個button的type
返回一個button的value
返回一個button所屬表的ID
Form 對象
返回一個表單中所有元素的value
返回一個表單acceptCharset屬性的值
返回一個表單action屬性的值
返回表單中的enctype屬性的值
返回一個表單中元素的數量
返回發送表單數據的方法
返回一個表單的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屬性的值
創建一個鏈接指向一個低分辨率的image
返回image的name
改變image的src
返回一個客戶端圖像映射的usemap的值
Event 對象
哪個鼠標鍵被點擊了？
被按下的鍵盤鍵的keycode？
鼠標的坐標？
鼠標相對于屏幕的坐標？
shift鍵被按下了嗎？
哪個元素被按下了？
哪個事件發生了？
Option 和 Select 對象
禁用和啟用下拉列表
獲得有下拉列表的表單的ID
獲得下拉列表的選項數量
將下拉列表變成多行列表
在下拉列表中選擇多個選項
彈出下拉列表中所有選項
彈出下拉列表中被選中的選項的索引
改變下拉列表中被選中的選項的文本
刪除下拉列表中的選項
Table, TableHeader, TableRow, TableData 對象
改變表格邊框的寬度
改變表格的cellpadding和cellspacing
指定表格的frame
為表格指定規則
一個行的innerHTML
一個單元格的innerHTML
為表格創建一個標題
刪除表格中的行
添加表格中的行
添加表格行中的單元格
單元格內容水平對齊
單元格內容垂直對齊
對單個單元格的內容水平對齊
對單個單元格的內容垂直對齊
改變單元格的內容
改變單元格橫跨的列數(colspan屬性)
Reset 對象
在 HTML 表單中 <input type="reset"> 標簽每出現一次，一個 Reset 對象就會被創建。
當重置按鈕被點擊，包含它的表單中所有輸入元素的值都重置為它們的默認值。默認值由 HTML value 屬性或 JavaScript 的 defaultValue 屬性指定。
重置按鈕在重置表單之前觸發 onclick 句柄，并且這個句柄可以通過返回 fasle 來取消。
您可以通過遍歷表單的 elements[] 數組來訪問某個重置按鈕，或者通過使用document.getElementById()。
Reset 對象屬性
W3C: W3C 標準。
| 屬性 | 描述 | W3C |
|---|---|---|
| disabled | 設置或返回重置按鈕是否應被禁用。 | Yes |
| form | 返回一個對包含此重置按鈕的表單對象的引用。 | Yes |
| name | 設置或返回重置按鈕的名稱。 | Yes |
| type | 返回重置按鈕的表單元素類型。 | Yes |
| value | 設置或返回重置按鈕上顯示的文本。 | Yes |
標準屬性和事件
Reset 對象同樣支持標準的 屬性 和 事件。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
HTML DOM 節點
在 HTML DOM (Document Object Model) 中, 每個東西都是 節點 :
文檔本身就是一個文檔對象
所有 HTML 元素都是元素節點
所有 HTML 屬性都是屬性節點
插入到 HTML 元素文本是文本節點
注釋是注釋節點
元素對象
在 HTML DOM 中, 元素對象代表著一個 HTML 元素。
元素對象 的 子節點可以是, 可以是元素節點，文本節點，注釋節點。
NodeList 對象 代表了節點列表，類似于 HTML元素的子節點集合。
元素可以有屬性。屬性屬于屬性節點（查看下一節）。
瀏覽器支持
所有主流瀏覽器都支持 元素對象 和 NodeList 對象。.
屬性和方法
以上屬性和方法可適用于所有 HTML 元素：
| 屬性 / 方法 | 描述 |
|---|---|
| element.accessKey | 設置或返回accesskey一個元素 |
| element.addEventListener() | 向指定元素添加事件句柄 |
| element.appendChild() | 為元素添加一個新的子元素 |
| element.attributes | 返回一個元素的屬性數組 |
| element.childNodes | 返回元素的一個子節點的數組 |
| element.classlist | 返回元素的類名，作為 DOMTokenList 對象。 |
| element.className | 設置或返回元素的class屬性 |
| element.clientHeight | 在頁面上返回內容的可視高度（不包括邊框，邊距或滾動條） |
| element.clientWidth | 在頁面上返回內容的可視寬度（不包括邊框，邊距或滾動條） |
| element.cloneNode() | 克隆某個元素 |
| element.compareDocumentPosition() | 比較兩個元素的文檔位置。 |
| element.contentEditable | 設置或返回元素的內容是否可編輯 |
| element.dir | 設置或返回一個元素中的文本方向 |
| element.firstChild | 返回元素的第一個子節點 |
| element.focus() | 設置文檔或元素獲取焦點 |
| element.getAttribute() | 返回指定元素的屬性值 |
| element.getAttributeNode() | 返回指定屬性節點 |
| element.getElementsByTagName() | 返回指定標簽名的所有子元素集合。 |
| element. getElementsByClassName() | 返回文檔中所有指定類名的元素集合，作為 NodeList 對象。 |
| element.getFeature() | 返回指定特征的執行APIs對象。 |
| element.getUserData() | 返回一個元素中關聯鍵值的對象。 |
| element.hasAttribute() | 如果元素中存在指定的屬性返回 true，否則返回false。 |
| element.hasAttributes() | 如果元素有任何屬性返回true，否則返回false。 |
| element.hasChildNodes() | 返回一個元素是否具有任何子元素 |
| element.hasfocus() | 返回布爾值，檢測文檔或元素是否獲取焦點 |
| element.id | 設置或者返回元素的 id。 |
| element.innerHTML | 設置或者返回元素的內容。 |
| element.insertBefore() | 現有的子元素之前插入一個新的子元素 |
| element.isContentEditable | 如果元素內容可編輯返回 true，否則返回false |
| element.isDefaultNamespace() | 如果指定了namespaceURI 返回 true，否則返回 false。 |
| element.isEqualNode() | 檢查兩個元素是否相等 |
| element.isSameNode() | 檢查兩個元素所有有相同節點。 |
| element.isSupported() | 如果在元素中支持指定特征返回 true。 |
| element.lang | 設置或者返回一個元素的語言。 |
| element.lastChild | 返回的最后一個子元素 |
| element.namespaceURI | 返回命名空間的 URI。 |
| element.nextSibling | 返回該元素緊跟的一個元素 |
| element.nodeName | 返回元素的標記名（大寫） |
| element.nodeType | 返回元素的節點類型 |
| element.nodeValue | 返回元素的節點值 |
| element.normalize() | 使得此成為一個"normal"的形式，其中只有結構（如元素，注釋，處理指令，CDATA節和實體引用）隔開Text節點，即元素（包括屬性）下面的所有文本節點，既沒有相鄰的文本節點也沒有空的文本節點 |
| element.offsetHeight | 返回，任何一個元素的高度包括邊框和填充，但不是邊距 |
| element.offsetWidth | 返回元素的寬度，包括邊框和填充，但不是邊距 |
| element.offsetLeft | 返回當前元素的相對水平偏移位置的偏移容器 |
| element.offsetParent | 返回元素的偏移容器 |
| element.offsetTop | 返回當前元素的相對垂直偏移位置的偏移容器 |
| element.ownerDocument | 返回元素的根元素（文檔對象） |
| element.parentNode | 返回元素的父節點 |
| element.previousSibling | 返回某個元素緊接之前元素 |
| element.querySelector() | 返回匹配指定 CSS 選擇器元素的第一個子元素 |
| document.querySelectorAll() | 返回匹配指定 CSS 選擇器元素的所有子元素節點列表 |
| element.removeAttribute() | 從元素中刪除指定的屬性 |
| element.removeAttributeNode() | 刪除指定屬性節點并返回移除后的節點。 |
| element.removeChild() | 刪除一個子元素 |
| element.removeEventListener() | 移除由 addEventListener() 方法添加的事件句柄 |
| element.replaceChild() | 替換一個子元素 |
| element.scrollHeight | 返回整個元素的高度（包括帶滾動條的隱蔽的地方） |
| element.scrollLeft | 返回當前視圖中的實際元素的左邊緣和左邊緣之間的距離 |
| element.scrollTop | 返回當前視圖中的實際元素的頂部邊緣和頂部邊緣之間的距離 |
| element.scrollWidth | 返回元素的整個寬度（包括帶滾動條的隱蔽的地方） |
| element.setAttribute() | 設置或者改變指定屬性并指定值。 |
| element.setAttributeNode() | 設置或者改變指定屬性節點。 |
| element.setIdAttribute() | |
| element.setIdAttributeNode() | |
| element.setUserData() | 在元素中為指定鍵值關聯對象。 |
| element.style | 設置或返回元素的樣式屬性 |
| element.tabIndex | 設置或返回元素的標簽順序。 |
| element.tagName | 作為一個字符串返回某個元素的標記名（大寫） |
| element.textContent | 設置或返回一個節點和它的文本內容 |
| element.title | 設置或返回元素的title屬性 |
| element.toString() | 一個元素轉換成字符串 |
| nodelist.item() | 返回某個元素基于文檔樹的索引 |
| nodelist.length | 返回節點列表的節點數目。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
