女dom是什麽屬 女dom是什麽意思

很多朋友想了解關於dom的一些資料信息，下麵是(揚升資訊www.balincan8.com)小編整理的與dom相關的內容分享給大家，一起來看看吧。很多朋友想了解關於html代碼的一些資料信息，下麵是(揚升資訊www.balincan8.com)小編整理的與html代碼相關的內容分享給大家，一起來看看吧。

DOM是Document Object Model的縮寫，即“文檔對象模型”的縮寫。

DOM由W3C（World Wide Web Consortium，萬維網聯盟）製定，定義了訪問XML文檔和HTML文檔的標準，我們這裏隻講解HTML DOM。

1、DOM的數據結構表示

DOM是HTML文檔的對象模型。

一個HTML文檔中的所有元素，通過DOM，可以表示成一個個的對象，並且這些對象之間的關係可以用樹形數據結構來表示。

例如，下麵是某個HTML文檔的數據結構：

在DOM的概念裏，整個HTML文檔是一個Document對象，HTML中的元素是Document對象的成員對象。

2、DOM的作用

DOM的本質作用，是提供了對HTML文檔的編程接口。

DOM為前端開發者提供了如下的編程接口：

（1）對頁麵的事件進行響應；

（2）查詢HTML元素；

（3）修改HTML元素、屬、CSS樣式；

（4）刪除HTML元素；

（5）添加HTML元素。

正是因為DOM的存在，才使得JavaScript如虎添翼。

3、通過DOM可以改變HTML元素樣式

下麵的HTML文檔dom001.html，通過DOM實現對HTML元素樣式的改變：

!DOCTYPE htmlhtml head titledom001/title meta charset="utf-8" / script function changeStyle(){ paragraph = document.getElementById("paragraph"); paragraph.style.color = "red&#34 paragraph.style.fontSize = "28px&#34 } /script /head body p id="paragraph"我愛中國/p button onclick="changeStyle();"修改樣式/button /body/html

dom001.html被瀏覽器打開後，效果如下：

當點擊“修改樣式”按鈕後，頁麵變為：

4、通過DOM可以在網頁加載時動態顯示信息

下麵的HTML文檔dom002.html，實現每次加載文件時，都顯示當前的時間：

!DOCTYPE htmlhtml head titledom002/title meta charset="utf-8" / /head body script document.write("h1"); document.write("當前時間是："); document.write(Date()); document.write("/h1"); /script /body/html

dom002.html被瀏覽器打開後，效果如下：

過一會兒，再次打開dom002.html，顯示效果如下：

注意：例子中的這種JavaScript代碼一般隻能在網頁加載的時候執行，因為網頁加載完成後再執行上麵的代碼，將會衝掉整個HTML文檔。

5、通過DOM可以改變元素的值

下麵的HTML文檔dom003.html，實現改變元素值的功能：

!DOCTYPE htmlhtml head titledom003/title meta charset="utf-8" / script function changeContent(){ theBoard = document.getElementById("theBoard"); theBoard.innerHTML = "a href='頭條的網址' target='_blank'這是今日頭條的鏈接/a&#34 } /script /head body div id="theBoard"這是普通文本/div divbutton onclick="changeContent()"改變/button/div /body/html

dom003.html被瀏覽器打開後，效果如下：

點擊“改變”按鈕，效果如下：

再次點擊新生成的“這是今日頭條的鏈接”，可以發現，通過DOM生成的超級鏈接，可以被正常使用。

6、通過DOM可以改變元素屬的值

下麵的HTML文檔dom004.html，實現改變元素屬值的功能：

!DOCTYPE htmlhtml head titledom004/title meta charset="utf-8" / script function changeImg(){ theImg = document.getElementById("theImg"); if (theImg.src.match("dom004_1.jpg")){ theImg.src="dom004_2.jpg&#34 }else{ theImg.src="dom004_1.jpg&#34 } } /script /head body img id="theImg" src="dom004_1.jpg" onclick="changeImg();"/ /body/html

dom004.html被瀏覽器打開後，效果如下：

點擊圖片，圖片變為黑白版：

再次點擊黑白版的圖片，又會變為彩色版的圖片。

7、通過DOM可以為元素分配事件

我們對HTML文檔dom004.html進行修改，得到HTML文檔dom005.html文件：

!DOCTYPE htmlhtml head titledom005/title meta charset="utf-8" / script function onMouseOverImg(){ theImg = document.getElementById("theImg"); theImg.src="dom004_1.jpg&#34 } function onMouseOutImg(){ theImg = document.getElementById("theImg"); theImg.src="dom004_2.jpg&#34 } function buttonClicked(){ theImg = document.getElementById("theImg"); theImg.onmouseover = onMouseOverImg; theImg.onmouseout = onMouseOutImg; } /script /head body img id="theImg" src="dom004_2.jpg""/br button onclick="buttonClicked();"分配事件/button /body/html

dom005.html被瀏覽器打開後，效果如下：

此時，我們的鼠標在圖片上移來移去，圖片沒有任何變化。但是，當我們點擊“分配事件”按鈕後，當鼠標在圖片上時，圖片為彩色的，鼠標離開圖片時，圖片為黑白色的。

8、通過DOM可以向HTML文檔中添加元素

下麵的HTML文檔dom006.html，實現向HTML添加元素的功能：

!DOCTYPE htmlhtml head titledom006/title meta charset="utf-8" / script function buttonClicked(){ timeList = document.getElementById("timeList"); listItem = document.createElement("li"); listItem.innerHTML = Date(); timeList.appendChild(listItem); } /script /head body h1時間列表/h1 ul id="timeList" /ul button onclick="buttonClicked();"添加當前時間/button /body/html

dom006.html被瀏覽器打開後，效果如下：

點擊“添加當前時間”按鈕，會將點擊時的時間顯示在界麵上。這是點擊過幾次後的界麵顯示：

9、通過DOM可以從HTML中刪除元素

下麵的HTML文檔dom007.html，實現從HTML刪除元素的功能：

!DOCTYPE htmlhtml head titledom007/title meta charset="utf-8" / script function buttonClicked(){ theItem = document.getElementById("item2"); theItem.parentNode.removeChild(theItem); } /script /head body h1條目1/h1 h1 id="item2"條目2/h1 h1條目3/h1 h1條目4/h1 button onclick="buttonClicked();"刪除條目2/button /body/html

dom007.html被瀏覽器打開後，效果如下：

點擊“刪除條目2”按鈕後，效果如下：

本文到此結束，希望對大家有所幫助呢。