1. 程式人生 > >HTML DOM簡單總結

HTML DOM簡單總結

get 使用 onclick class 進行 簡單 訪問 ntb 文本

1.什麽是DOM?

(1)DOM是一種標準,或者說是一種接口。

(2)定義了所有 HTML,XML 元素的對象和屬性,以及訪問它們的方法,因此,通過這種標準(接口)可以準確的訪問HTML,XML 文檔,從而改變更新文檔的內容、結構和樣式。

(3) DOM的全稱是 Document Object Model(文檔對象模型)。

(4)可通過 JavaScript (以及其他編程語言)對 DOM 進行訪問,以下通過js訪問。

2.什麽是HTML DOM?

了解了什麽是DOM,那麽就知道什麽是HTML DOM,HTML DOM是HTML 的標準編程接口,定義了所有 HTML 元素的對象和屬性,以及訪問它們的方法。

3.在HTML DOM的標準中HTML的結構是什麽?

HTML DOM將整個文檔看成是一個文檔節點,每個 HTML 元素是元素節點,HTML 元素內的文本是文本節點,每個 HTML 屬性是屬性節點,註釋是註釋節點,因此節點中是可以包含節點的,而節點有可以看成是對象(與java,c++面向對象編程的對象一樣),因此HTML DOM便是提供了方法可以去訪問這些對象。

4.如何通過HTML DOM去獲得HTML中的節點(對象)?

HTML DOM的document對象(每個載入瀏覽器的 HTML 文檔都會成為 Document 對象,Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問)提供了三種方法:

(1)通過id獲得,使用document.getElementById() 方法,返回文檔中一個節點(對象)

(2)通過標簽名獲得,使用 document.getElementsByTagName() 方法,返回文檔中所有相同標簽名的節點(對象)數組,可通過索引獲得,如arr[0],便是獲得第一個節點(對象)

(3)通過class名獲得,使用 document.getElementsByClassName() 方法,返回文檔中所有相同class名的節點(對象)數組,可通過索引獲得,如arr[0],便是獲得第一個節點(對象)

5.如何通過HTML DOM修改節點(對象)的屬性?

和普通的對象一樣,通過上面三種方法取得節點(對象)後,在通過“.”去取得節點(對象)的屬性通過“=”賦值便可更改原節點(對象)的屬性值,如:

<html>
<body>

<p id="intro">Hello World!</p>

<script>
function swit()
{ var txt=document.getElementById("intro");//"."獲得id為intro的節點
txt.innerHTML="你好!!";//"="更改此節點的innerHTML屬性
} </script>

<p id="intro" onclick()="swit()">hello!!</p>
</body> </html>

上面的列子中更改了<p>標簽的innerHTML屬性,而p中還有許多的屬性(具體請去網上找,我經常在w3school網站裏去查,感覺很全),若想更改p的樣式請這樣獲取屬性:txt.style.color="red",如果屬性是這樣的z-index,這樣更改:txt.style.zIndex=10,基本上將“-”後面單詞首字母改成大寫就行了,如果是onclick這樣的event(事件)屬性這樣的值是一個函數名時請這樣更改:txt.onclick=function(){方法體或者是函數調用}。

此方法適用於基本上所有的標簽節點的屬性更改。

5.HTML DOM對象

HTML DOM有四種對象document,element,attribute,event。

(1)document對象

每個載入瀏覽器的 HTML 文檔都會成為 Document 對象,Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。【註:Document 對象是 Window 對象的一部分,可通過 window.document 屬性對其進行訪問。】

(2)element對象

在 HTML DOM 中,Element 對象表示 HTML 元素,Element 對象可以擁有類型為元素節點、文本節點、註釋節點的子節點,即有document三種方法獲取的對 象不管是有<p>,<a>,<div>等標簽獲得的對象都是element對象,因此element對象和<p>,<a>,<div>等標簽獲得的對象就像繼承一樣,element的屬性和方法, <p>,<a>,<div>等標簽獲得的對象,可以調用,如innerHTML屬性是element屬性,而p,a,div都有。

(3)attribute對象

在 HTML DOM 中,Attr 對象表示 HTML 屬性,可以通過獲取對象的屬性來調用attribute對象的屬性和方法,列如,

function fun()

{

              var txt=document.getElementsByTagName("button").attributes[0].name;
}
.....
<button onclick="fun()">點擊</button>

上列調用了attribute對象的name屬性,返回了第一個屬性的名字,因此txt就是"onclick";


(4)event對象
           瀏覽器、文檔(document)窗口中的發生的特定的交互瞬間;而JavaScript和HTML之間的交互行為就是通過事件來觸發的,如點擊事件,劃過事件。




作者有話說:以上只是我的觀點和我覺得對的觀點,上面基本上都是讀w3school後相關教程所理解,詳情及更加詳細網址分享:http://www.w3school.com.cn/htmldom/index.asp
最後分享一張圖片


技術分享圖片


HTML DOM簡單總結