警告
請(qǐng)使用 document.write() 僅僅向文檔輸出寫內(nèi)容。
如果在文檔已完成加載后執(zhí)行 document.write，整個(gè) HTML 頁面將被覆蓋：

一、DOM 簡(jiǎn)介

通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。

HTML DOM （文檔對(duì)象模型）
當(dāng)網(wǎng)頁被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁面的文檔對(duì)象模型（Document Object Model）。
HTML DOM 模型被構(gòu)造為對(duì)象的樹。
HTML DOM 樹

DOM HTML 樹

通過可編程的對(duì)象模型，JavaScript 獲得了足夠的能力來創(chuàng)建動(dòng)態(tài)的 HTML。

JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠?qū)撁嬷械乃惺录龀龇磻?yīng)

查找 HTML 元素
通常，通過 JavaScript，您需要操作 HTML 元素。
為了做到這件事情，您必須首先找到該元素。有三種方法來做這件事：

通過 id 找到 HTML 元素
查找 id="intro" 元素：
var x=document.getElementById("intro");
通過標(biāo)簽名找到 HTML 元素
查找 id="main" 的元素，然后查找 "main" 中的所有<p> 元素：
var x=document.getElementById("main"); var y=x.getElementsByTagName("p");
通過類名找到 HTML 元素
提示：通過類名查找 HTML 元素在 IE 5,6,7,8 中無效。

二、DOM HTML

HTML DOM 允許 JavaScript 改變 HTML 元素的內(nèi)容。

改變 HTML 輸出流
JavaScript 能夠創(chuàng)建動(dòng)態(tài)的 HTML 內(nèi)容：
今天的日期是： Mon Dec 12 2016 18:11:28 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
在 JavaScript 中，document.write() 可用于直接向 HTML 輸出流寫內(nèi)容。
實(shí)例
```
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
```

親自試一試
提示：絕不要使用在文檔加載之后使用 document.write()。這會(huì)覆蓋該文檔。

改變 HTML 內(nèi)容
修改 HTML 內(nèi)容的最簡(jiǎn)單的方法時(shí)使用 innerHTML 屬性。
如需改變 HTML 元素的內(nèi)容，請(qǐng)使用這個(gè)語法：
```
document.getElementById(*id*).innerHTML=*new HTML*
```

實(shí)例
本例改變了 <p>元素的內(nèi)容：

  <html>
  <body>
  <p id="p1">Hello World!</p>
  <script>
  document.getElementById("p1").innerHTML="New text!";
  </script>
  </body>
  </html>

親自試一試
實(shí)例
本例改變了 <h1>元素的內(nèi)容：

  <!DOCTYPE html>
  <html>
  <body>
  <h1 id="header">Old Header</h1>
  <script>
  var element=document.getElementById("header");
  element.innerHTML="New Header";
  </script>
  </body>
  </html>

親自試一試
例子解釋：
1.上面的 HTML 文檔含有id="header" 的 <h1>元素
2.我們使用 HTML DOM 來獲得id="header"的元素
3.JavaScript 更改此元素的內(nèi)容 (innerHTML)

改變 HTML 屬性
如需改變 HTML 元素的屬性，請(qǐng)使用這個(gè)語法：
```
document.getElementById(*id*).attribute=*new value*
```

實(shí)例
本例改變了<img> 元素的 src 屬性：

  <!DOCTYPE html>
  <html>
  <body>
  <img id="image" src="smiley.gif">
  <script>document.getElementById("image").src="landscape.jpg";
  </script>
  </body>
  </html>

親自試一試
例子解釋：
1.上面的 HTML 文檔含有 id="image"的 <img>元素
2.我們使用 HTML DOM 來獲得id="image" 的元素
3.JavaScript 更改此元素的屬性（把 "smiley.gif" 改為 "landscape.jpg"）

三、DOM CSS

HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。

改變 HTML 樣式
如需改變 HTML 元素的樣式，請(qǐng)使用這個(gè)語法：
```
document.getElementById(*id*).style.property=*new style*
```

例子 1
下面的例子會(huì)改變 <p>元素的樣式：

  <p id="p2">Hello World!</p>
  <script>
  document.getElementById("p2").style.color="blue";
  </script>

親自試一試
例子 2
本例改變了 id="id1"的 HTML 元素的樣式，當(dāng)用戶點(diǎn)擊按鈕時(shí)：

  <h1 id="id1">My Heading 1</h1>
  <button type="button" onclick="document.getElementById('id1').style.color='red'">點(diǎn)擊這里</button>

親自試一試

更多實(shí)例
Visibility
如何使元素不可見。您希望元素顯示或消失嗎？

HTML DOM Style 對(duì)象參考手冊(cè)
如需完整的 HTML DOM Style 對(duì)象屬性，請(qǐng)參閱HTML DOM Style 對(duì)象參考手冊(cè)。

Style 對(duì)象
Style 對(duì)象代表一個(gè)單獨(dú)的樣式聲明。可從應(yīng)用樣式的文檔或元素訪問 Style 對(duì)象。
使用 Style 對(duì)象屬性的語法：

  document.getElementById("id").style.property="值"

Style 對(duì)象的屬性：
背景
 邊框和邊距
 布局
 列表
 雜項(xiàng)
定位
 打印
 滾動(dòng)條
 表格
 文本
 規(guī)范

三、DOM 事件

HTML DOM 使 JavaScript 有能力對(duì) HTML 事件做出反應(yīng)。
** 對(duì)事件做出反應(yīng)**
我們可以在事件發(fā)生時(shí)執(zhí)行 JavaScript，比如當(dāng)用戶在 HTML 元素上點(diǎn)擊時(shí)。
如需在用戶點(diǎn)擊某個(gè)元素時(shí)執(zhí)行代碼，請(qǐng)向一個(gè) HTML 事件屬性添加 JavaScript 代碼：onclick=JavaScript
HTML 事件的例子：

當(dāng)用戶點(diǎn)擊鼠標(biāo)時(shí) onclick
當(dāng)網(wǎng)頁已加載時(shí) onload
當(dāng)圖像已加載時(shí) onload
當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí) onmouseover
當(dāng)輸入字段被改變時(shí) onchange
當(dāng)提交 HTML 表單時(shí) onsubmit
當(dāng)用戶觸發(fā)按鍵時(shí) onkeydown

例子 1
在本例中，當(dāng)用戶在 <h1>元素上點(diǎn)擊時(shí)，會(huì)改變其內(nèi)容：

<h1onclick="this.innerHTML='謝謝!'">請(qǐng)點(diǎn)擊該文本</h1>

親自試一試
例子 2
本例從事件處理器調(diào)用一個(gè)函數(shù)：

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id){
  id.innerHTML="謝謝!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">請(qǐng)點(diǎn)擊該文本</h1>
</body>
</html>

親自試一試

HTML 事件屬性
如需向 HTML 元素分配事件，您可以使用事件屬性。
實(shí)例
向 button 元素分配 onclick 事件：

<button onclick="displayDate()">點(diǎn)擊這里</button>

親自試一試
在上面的例子中，名為 displayDate 的函數(shù)將在按鈕被點(diǎn)擊時(shí)執(zhí)行。

使用 HTML DOM 來分配事件
HTML DOM 允許您通過使用 JavaScript 來向 HTML 元素分配事件：
實(shí)例
向 button 元素分配 onclick 事件：

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

親自試一試
在上面的例子中，名為 displayDate 的函數(shù)被分配給 id=myButn" 的 HTML 元素。
當(dāng)按鈕被點(diǎn)擊時(shí)，會(huì)執(zhí)行該函數(shù)。

onload 和 onunload 事件
onload 和 onunload 事件會(huì)在用戶進(jìn)入或離開頁面時(shí)被觸發(fā)。
onload 事件可用于檢測(cè)訪問者的瀏覽器類型和瀏覽器版本，并基于這些信息來加載網(wǎng)頁的正確版本。
onload 和 onunload 事件可用于處理 cookie。
實(shí)例

<body onload="checkCookies()">

親自試一試

onchange 事件
onchange 事件常結(jié)合對(duì)輸入字段的驗(yàn)證來使用。
下面是一個(gè)如何使用 onchange 的例子。當(dāng)用戶改變輸入字段的內(nèi)容時(shí)，會(huì)調(diào)用 upperCase() 函數(shù)。
實(shí)例

<input type="text" id="fname" onchange="upperCase()">

親自試一試

onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用戶的鼠標(biāo)移至 HTML 元素上方或移出元素時(shí)觸發(fā)函數(shù)。
實(shí)例
一個(gè)簡(jiǎn)單的 onmouseover-onmouseout 實(shí)例：

<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">
把鼠標(biāo)移到上面
</div>

<script>
function mOver(obj)
{
obj.innerHTML="謝謝"
}

function mOut(obj)
{
obj.innerHTML="把鼠標(biāo)移到上面"
}
</script>

</body>

親自試一試

onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 構(gòu)成了鼠標(biāo)點(diǎn)擊事件的所有部分。首先當(dāng)點(diǎn)擊鼠標(biāo)按鈕時(shí)，會(huì)觸發(fā) onmousedown 事件，當(dāng)釋放鼠標(biāo)按鈕時(shí)，會(huì)觸發(fā) onmouseup 事件，最后，當(dāng)完成鼠標(biāo)點(diǎn)擊時(shí)，會(huì)觸發(fā) onclick 事件。
實(shí)例
一個(gè)簡(jiǎn)單的 onmousedown-onmouseup 實(shí)例：

<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">
請(qǐng)點(diǎn)擊這里
</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="請(qǐng)釋放鼠標(biāo)按鈕"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="請(qǐng)按下鼠標(biāo)按鈕"
}
</script>

</body>

親自試一試

更多實(shí)例
onmousedown 和 onmouseup
當(dāng)用戶按下鼠標(biāo)按鈕時(shí)，更換一幅圖像。
onload
當(dāng)頁面完成加載時(shí)，顯示一個(gè)提示框。
onfocus
當(dāng)輸入字段獲得焦點(diǎn)時(shí)，改變其背景色。
鼠標(biāo)事件
當(dāng)指針移動(dòng)到元素上方時(shí)，改變其顏色；當(dāng)指針移出文本后，會(huì)再次改變其顏色。

HTML DOM Event 對(duì)象參考手冊(cè)
如需所有 HTML DOM 事件的完整列表，請(qǐng)參閱 W3School 提供的 HTML DOM Event 對(duì)象參考手冊(cè)。

四、DOM 節(jié)點(diǎn)

添加和刪除節(jié)點(diǎn)（HTML 元素）。

創(chuàng)建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必須首先創(chuàng)建該元素（元素節(jié)點(diǎn)），然后向一個(gè)已存在的元素追加該元素。
實(shí)例

<div id="div1">
<p id="p1">這是一個(gè)段落</p>
<p id="p2">這是另一個(gè)段落</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("這是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

親自試一試
例子解釋：

這段代碼創(chuàng)建新的 <p>元素：
```
var para=document.createElement("p");
```

如需向<p>元素添加文本，您必須首先創(chuàng)建文本節(jié)點(diǎn)。這段代碼創(chuàng)建了一個(gè)文本節(jié)點(diǎn)：

  var node=document.createTextNode("這是新段落。");

然后您必須向 <p> 元素追加這個(gè)文本節(jié)點(diǎn)：

  para.appendChild(node);

最后您必須向一個(gè)已有的元素追加這個(gè)新元素。
這段代碼找到一個(gè)已有的元素：
var element=document.getElementById("div1");
這段代碼向這個(gè)已有的元素追加新元素：

  element.appendChild(para);

刪除已有的 HTML 元素
如需刪除 HTML 元素，您必須首先獲得該元素的父元素：
實(shí)例

<div id="div1">
<p id="p1">這是一個(gè)段落。</p>
<p id="p2">這是另一個(gè)段落。</p>
</div>

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

親自試一試
例子解釋：

這個(gè) HTML 文檔含有擁有兩個(gè)子節(jié)點(diǎn)（兩個(gè) <p>元素）的 <div> 元素：

<div id="div1">
<p id="p1">這是一個(gè)段落。</p>
<p id="p2">這是另一個(gè)段落。</p>
</div>

找到 id="div1" 的元素：

  var parent=document.getElementById("div1");

找到 id="p1" 的<p>元素：

  var child=document.getElementById("p1");

從父元素中刪除子元素：

  parent.removeChild(child);

提示：如果能夠在不引用父元素的情況下刪除某個(gè)元素，就太好了。
不過很遺憾。DOM 需要清楚您需要?jiǎng)h除的元素，以及它的父元素。
這是常用的解決方案：找到您希望刪除的子元素，然后使用其 parentNode 屬性來找到父元素：

  var child=document.getElementById("p1");
  child.parentNode.removeChild(child);

HTML DOM 教程
在我們的 JavaScript 教程的 HTML DOM 部分，您已經(jīng)學(xué)到了：

如何改變 HTML 元素的內(nèi)容 (innerHTML)
如何改變 HTML 元素的樣式 (CSS)
如何對(duì) HTML DOM 事件作出反應(yīng)
如何添加或刪除 HTML 元素

如果您希望學(xué)到更多有關(guān)使用 JavaScript 訪問 HTML DOM 的知識(shí)，請(qǐng)?jiān)L問w3c完整的 HTML DOM 教程。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

JavaScript HTML DOM（簡(jiǎn)介）

JavaScript HTML DOM（簡(jiǎn)介）

一、DOM 簡(jiǎn)介

二、DOM HTML

三、DOM CSS

三、DOM 事件

四、DOM 節(jié)點(diǎn)

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

JavaScript HTML DOM（簡(jiǎn)介）

一、DOM 簡(jiǎn)介

二、DOM HTML

三、DOM CSS

三、DOM 事件

四、DOM 節(jié)點(diǎn)

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频