JavaScript HTML DOM-改變 HTML

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

改變 HTML 輸出流

JavaScript 能夠創(chuàng)建動態(tài)的 HTML 內(nèi)容：

今天的日期是： Thu Aug 25 2016 09:23:24 GMT+0800 (中國標準時間)

在 JavaScript 中，document.write() 可用于直接向 HTML 輸出流寫內(nèi)容。

實例

<!DOCTYPE html>

<html>

<body>

document.write(Date());

</script>

</body>

</html>

	絕對不要在文檔加載完成之后使用 document.write()。這會覆蓋該文檔。

改變 HTML 內(nèi)容

修改 HTML 內(nèi)容的最簡單的方法時使用 innerHTML 屬性。

如需改變 HTML 元素的內(nèi)容，請使用這個語法：

document.getElementById(id).innerHTML=新的 HTML

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

實例

<html>

<body>

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

document.getElementById("p1").innerHTML="新文本!";

</script>

</body>

</html>

本例改變了 <h1> 元素的內(nèi)容：

實例

<!DOCTYPE html>

<html>

<body>

<h1 id="header">Old Header</h1>

var element=document.getElementById("header");

element.innerHTML="新標題";

</script>

</body>

</html>

實例講解：

上面的 HTML 文檔含有 id="header" 的 <h1> 元素
我們使用 HTML DOM 來獲得 id="header" 的元素
JavaScript 更改此元素的內(nèi)容 (innerHTML)

改變 HTML 屬性

如需改變 HTML 元素的屬性，請使用這個語法：

document.getElementById(id).attribute=新屬性值

本例改變了 <img> 元素的 src 屬性：

實例

<!DOCTYPE html>

<html>

<body>

document.getElementById("image").src="landscape.jpg";

</script>

</body>

</html>

實例講解：

上面的 HTML 文檔含有 id="image" 的 <img> 元素
我們使用 HTML DOM 來獲得 id="image" 的元素
JavaScript 更改此元素的屬性（把 "smiley.gif" 改為 "landscape.jpg"）

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

天遇到個來咨詢利用原生的JS代碼來修改HTML代碼的的童鞋，耐心的給這個童鞋做了解答后，然后整理了一下測試代碼，寫成文章記錄一下，方便以后有同需求的站長們。

目標需求

HTML原始代碼

<form action="" method="post" class="form">
 <input id="mm" type="text" >
 <input id="mochu" type="text" onclick="act(this.value)" />
 <input id="mc" type="text" >
</form>

目標要求：

利用JS代碼將以上HTML代中的 id 為 mochu 的 input 中的 cnclick 屬性去掉

<input id="mochu" type="text" onclick="act(this.value)" />

換成

<input id="mochu" type="text" />

解決方案

利用 JS中dom對象的 outerHTML 屬性，可以輕松的解決這個問題

outerHTML：設置或獲取對象及其內(nèi)容的 HTML 形式

例：JS獲取元表本身的HTML代碼

代碼：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</form>

var html = document.getElementById('mochu').outerHTML;

console.log(html);

</script>

</body>

</html>

打印結果：

例：js修改指定元素的本身的HTML代碼

通上面的例子，可以知道 outerHTML 屬性可以獲取到元素本身的HTML代碼，既然可以獲取也能設置或修改元素本身的代碼

代碼：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="" method="post" class="form">
 <input id="mm" type="text" value="飛鳥慕魚博客" >
 <input id="mochu" type="text" onclick="act(this.value)"/>
 <input id="mc" type="text" >
</form>
<script>
 var html = document.getElementById('mochu').outerHTML = '<input id="mochu" type="text" value="http://www.feiniaomy.com" />';
</script>
</body>
</html>

運行結果如圖所示

補充說明

以下是與 outerHTML 功能相似的屬性，下一篇文章會詳細說明一下他們的作用與區(qū)別

innerHTML:設置或獲取對象起始標簽和結束標簽之間的內(nèi)容。

innerText:設置或獲取位于對象起始和結束標簽內(nèi)的文本

outerHTML:設置或獲取對象及其內(nèi)容的 HTML 形式

outerText:設置或獲取對象的文本

、CSS的起源

當web開發(fā)還是一項新技術的時候，無論定義網(wǎng)頁內(nèi)容還是定義網(wǎng)頁樣式，都是使用的HTML語言，HTML的內(nèi)容和樣式?jīng)]有區(qū)分開，如古老的HTML樣式：

<H3 COLOR=RED><CENTER>樣式</CENTER></H3>

其中color表示顏色，center讓文字居中，不是目前規(guī)范的書寫形式，而且舊的HTML標簽都是大寫的，web開發(fā)人員還需要來回切換大小寫，所以很多人認識到了這種開發(fā)方式并不理想。

Web開發(fā)人員想開發(fā)一種新的語言，把表示樣式的代碼從HTML中分離出來，并且創(chuàng)建一種規(guī)則來定義HTML標簽要顯示成什么樣子，這門語言叫做CSS，CSS是用來描述HTML標簽應該如何顯示的一個代碼。如：

<h3>樣式</h3>

用CSS可以讓h3標簽顯示成綠色，讓h3字體在大一點，讓h3有一個下劃線，可以統(tǒng)一字體的顯示樣式等。

CSS樣式

二、CSS的工作方式

CSS的全稱叫做 Cascading Style Sheets 級聯(lián)樣式表，CSS的工作方式依賴于"選擇器"可以選擇HTML標簽，并且修改這些標簽的樣子。

選擇器的類型有：

1、類型選擇器：不帶尖括號的標簽名，最簡單的選擇器

類型選擇器

定義了一個P標簽，如果想在CSS中選擇這個標簽，首先寫上字母P，然后選擇要定的屬性如text-decoration，并設置這個屬性的屬性值為underline下劃線，在瀏覽器中這個段落就會顯示下劃線。

類型選擇器

使用選擇器的時候我們必須要遵守選擇器的特殊語法規(guī)則：

選擇器名字后面是一個開始的大括號，屬性和屬性值中間是冒號，屬性值后面是分號，這里面任何一部分都不能丟掉，否則CSS無法正常工作，并且要注意標點符號全部是英文半角的，最后在所有的屬性列表后面是一個結束的大括號，大括號的作用就是可以在里面寫很多屬性，如圖：

類型選擇器

顯示結果為帶下劃線的紅色字體段落：

類型選擇器

在CSS中使用標簽名選擇標簽的時候，類型選擇器會作用在所有同名標簽中。所以這里只定義額一CSS樣式，它會作用在所有的P標簽中。

2、派生選擇器

可以讓CSS標簽作用在很小的范圍內(nèi)，如下圖，只讓CSS作用在li標簽中，所以選擇ul標簽中的li標簽即可。

派生選擇器

3、偽類選擇器

1）在原有選擇器的基礎上添加一個限定條件，當某種情況發(fā)生時在選擇這個標簽。如下圖，首先定義個a的類型選擇器，讓頁面中所有的超鏈接下劃線都不顯示，然后通過派生選擇器控制鼠標的動作，當鼠標移上去的時候，超鏈接文字顯示下劃線并顯示為深藍色。

偽類選擇器

這條規(guī)則只有當鼠標放到超鏈接上停留的時候才會被應用，因此當某種情況發(fā)生時候偽類選擇器才會被應用在某個標簽上。

a的偽類選擇器一共有四種：

:link 未被訪問的鏈接的樣式；和a標簽相同時，并且同時存在的時候會覆蓋a標簽

:hover 鼠標移動到超鏈接上的時候

:active 選擇器用于活動鏈接，被選定的超鏈接。

:visited 已被訪問的超鏈接，

注釋：在 CSS 定義中，:hover 必須位于 :link 和 :visited 之后（如果存在的話），這樣樣式才能生效。

2）使用偽類選擇器縮小選擇范圍

:first-child 縮小標簽的選擇范圍，如圖：

如果一個標簽后面還接了一個子標簽，在子標簽后面冒號：first-child，說明這里只選擇了子標簽中的第一個標簽，可以看到瀏覽器中有序列表中的第一個li子元素"北京"顏色為紫色。

偽類選擇器

CSS樣式

三、CSS樣式表放在什么地方

在head標簽中添加style子標簽，在style標簽里寫一個屬性type="text/css"，這樣瀏覽器就知道當頁面顯示出來的時候，需要把style中的CSS代碼應用到HTML中，因此可以在style標簽中創(chuàng)建CSS規(guī)則。

css樣式

每天進步一點點，跟著教頭學開發(fā)。

在線咨詢

上一篇：CSS 教程
下一篇：HTML5教程從入門到精通，隨堂筆記（一）HTML5框架結構

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

JavaScript HTML DOM-改變 HTML

目標需求

目標要求：

解決方案

補充說明

、CSS的起源

二、CSS的工作方式

三、CSS樣式表放在什么地方

您的項目需求