整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
HTML DOM 允許 JavaScript 改變 HTML 元素的內(nèi)容。
改變 HTML 輸出流
JavaScript 能夠創(chuàng)建動(dòng)態(tài)的 HTML 內(nèi)容：
今天的日期是： Thu Aug 25 2016 09:23:24 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
在 JavaScript 中，document.write() 可用于直接向 HTML 輸出流寫(xiě)內(nèi)容。
實(shí)例
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
| 絕對(duì)不要在文檔加載完成之后使用 document.write()。這會(huì)覆蓋該文檔。 |
改變 HTML 內(nèi)容
修改 HTML 內(nèi)容的最簡(jiǎn)單的方法時(shí)使用 innerHTML 屬性。
如需改變 HTML 元素的內(nèi)容，請(qǐng)使用這個(gè)語(yǔ)法：
document.getElementById(id).innerHTML=新的 HTML
本例改變了 <p>元素的內(nèi)容：
實(shí)例
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>
本例改變了 <h1> 元素的內(nèi)容：
實(shí)例
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新標(biāo)題";
</script>
</body>
</html>
實(shí)例講解：
上面的 HTML 文檔含有 id="header" 的 <h1> 元素
我們使用 HTML DOM 來(lái)獲得 id="header" 的元素
JavaScript 更改此元素的內(nèi)容 (innerHTML)
改變 HTML 屬性
如需改變 HTML 元素的屬性，請(qǐng)使用這個(gè)語(yǔ)法：
document.getElementById(id).attribute=新屬性值
本例改變了 <img> 元素的 src 屬性：
實(shí)例
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
實(shí)例講解：
上面的 HTML 文檔含有 id="image" 的 <img> 元素
我們使用 HTML DOM 來(lái)獲得 id="image" 的元素
JavaScript 更改此元素的屬性（把 "smiley.gif" 改為 "landscape.jpg"）
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
天遇到個(gè)來(lái)咨詢利用原生的JS代碼來(lái)修改HTML代碼的的童鞋，耐心的給這個(gè)童鞋做了解答后，然后整理了一下測(cè)試代碼，寫(xiě)成文章記錄一下，方便以后有同需求的站長(zhǎng)們。
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對(duì)象的 outerHTML 屬性，可以輕松的解決這個(gè)問(wèn)題
outerHTML：設(shè)置或獲取對(duì)象及其內(nèi)容的 HTML 形式
例：JS獲取元表本身的HTML代碼
代碼：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="" method="post" class="form">
<input id="mm" type="text" value="飛鳥(niǎo)慕魚(yú)博客" >
<input id="mochu" type="text" onclick="act(this.value)" value="http://www.feiniaomy.com" />
<input id="mc" type="text" >
</form>
<script>
var html = document.getElementById('mochu').outerHTML;
console.log(html);
</script>
</body>
</html>
打印結(jié)果：
例：js修改指定元素的本身的HTML代碼
通上面的例子，可以知道 outerHTML 屬性可以獲取到元素本身的HTML代碼，既然可以獲取也能設(shè)置或修改元素本身的代碼
代碼：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="" method="post" class="form">
<input id="mm" type="text" value="飛鳥(niǎo)慕魚(yú)博客" >
<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>
運(yùn)行結(jié)果如圖所示
以下是與 outerHTML 功能相似的屬性，下一篇文章會(huì)詳細(xì)說(shuō)明一下他們的作用與區(qū)別
innerHTML:設(shè)置或獲取對(duì)象起始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容。
innerText:設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的文本
outerHTML:設(shè)置或獲取對(duì)象及其內(nèi)容的 HTML 形式
outerText:設(shè)置或獲取對(duì)象的文本
當(dāng)web開(kāi)發(fā)還是一項(xiàng)新技術(shù)的時(shí)候，無(wú)論定義網(wǎng)頁(yè)內(nèi)容還是定義網(wǎng)頁(yè)樣式，都是使用的HTML語(yǔ)言，HTML的內(nèi)容和樣式?jīng)]有區(qū)分開(kāi)，如古老的HTML樣式：
<H3 COLOR=RED><CENTER>樣式</CENTER></H3>
其中color表示顏色，center讓文字居中，不是目前規(guī)范的書(shū)寫(xiě)形式，而且舊的HTML標(biāo)簽都是大寫(xiě)的，web開(kāi)發(fā)人員還需要來(lái)回切換大小寫(xiě)，所以很多人認(rèn)識(shí)到了這種開(kāi)發(fā)方式并不理想。
Web開(kāi)發(fā)人員想開(kāi)發(fā)一種新的語(yǔ)言，把表示樣式的代碼從HTML中分離出來(lái)，并且創(chuàng)建一種規(guī)則來(lái)定義HTML標(biāo)簽要顯示成什么樣子，這門(mén)語(yǔ)言叫做CSS，CSS是用來(lái)描述HTML標(biāo)簽應(yīng)該如何顯示的一個(gè)代碼。如：
<h3>樣式</h3>
用CSS可以讓h3標(biāo)簽顯示成綠色，讓h3字體在大一點(diǎn)，讓h3有一個(gè)下劃線，可以統(tǒng)一字體的顯示樣式等。
CSS樣式
CSS的全稱叫做 Cascading Style Sheets 級(jí)聯(lián)樣式表，CSS的工作方式依賴于"選擇器"可以選擇HTML標(biāo)簽，并且修改這些標(biāo)簽的樣子。
選擇器的類型有：
1、類型選擇器：不帶尖括號(hào)的標(biāo)簽名，最簡(jiǎn)單的選擇器
類型選擇器
定義了一個(gè)P標(biāo)簽，如果想在CSS中選擇這個(gè)標(biāo)簽，首先寫(xiě)上字母P，然后選擇要定的屬性如text-decoration，并設(shè)置這個(gè)屬性的屬性值為underline下劃線，在瀏覽器中這個(gè)段落就會(huì)顯示下劃線。
類型選擇器
使用選擇器的時(shí)候我們必須要遵守選擇器的特殊語(yǔ)法規(guī)則：
選擇器名字后面是一個(gè)開(kāi)始的大括號(hào)，屬性和屬性值中間是冒號(hào)，屬性值后面是分號(hào)，這里面任何一部分都不能丟掉，否則CSS無(wú)法正常工作，并且要注意標(biāo)點(diǎn)符號(hào)全部是英文半角的，最后在所有的屬性列表后面是一個(gè)結(jié)束的大括號(hào)，大括號(hào)的作用就是可以在里面寫(xiě)很多屬性，如圖：
類型選擇器
顯示結(jié)果為帶下劃線的紅色字體段落：
類型選擇器
在CSS中使用標(biāo)簽名選擇標(biāo)簽的時(shí)候，類型選擇器會(huì)作用在所有同名標(biāo)簽中。所以這里只定義額一CSS樣式，它會(huì)作用在所有的P標(biāo)簽中。
2、派生選擇器
可以讓CSS標(biāo)簽作用在很小的范圍內(nèi)，如下圖，只讓CSS作用在li標(biāo)簽中，所以選擇ul標(biāo)簽中的li標(biāo)簽即可。
派生選擇器
3、偽類選擇器
1）在原有選擇器的基礎(chǔ)上添加一個(gè)限定條件，當(dāng)某種情況發(fā)生時(shí)在選擇這個(gè)標(biāo)簽。如下圖，首先定義個(gè)a的類型選擇器，讓頁(yè)面中所有的超鏈接下劃線都不顯示，然后通過(guò)派生選擇器控制鼠標(biāo)的動(dòng)作，當(dāng)鼠標(biāo)移上去的時(shí)候，超鏈接文字顯示下劃線并顯示為深藍(lán)色。
偽類選擇器
偽類選擇器
這條規(guī)則只有當(dāng)鼠標(biāo)放到超鏈接上停留的時(shí)候才會(huì)被應(yīng)用，因此當(dāng)某種情況發(fā)生時(shí)候偽類選擇器才會(huì)被應(yīng)用在某個(gè)標(biāo)簽上。
a的偽類選擇器一共有四種：
:link 未被訪問(wèn)的鏈接的樣式；和a標(biāo)簽相同時(shí)，并且同時(shí)存在的時(shí)候會(huì)覆蓋a標(biāo)簽
:hover 鼠標(biāo)移動(dòng)到超鏈接上的時(shí)候
:active 選擇器用于活動(dòng)鏈接，被選定的超鏈接。
:visited 已被訪問(wèn)的超鏈接，
注釋：在 CSS 定義中，:hover 必須位于 :link 和 :visited 之后（如果存在的話），這樣樣式才能生效。
2）使用偽類選擇器縮小選擇范圍
:first-child 縮小標(biāo)簽的選擇范圍，如圖：
如果一個(gè)標(biāo)簽后面還接了一個(gè)子標(biāo)簽，在子標(biāo)簽后面冒號(hào)：first-child，說(shuō)明這里只選擇了子標(biāo)簽中的第一個(gè)標(biāo)簽，可以看到瀏覽器中有序列表中的第一個(gè)li子元素"北京"顏色為紫色。
偽類選擇器
偽類選擇器
CSS樣式
在head標(biāo)簽中添加style子標(biāo)簽，在style標(biāo)簽里寫(xiě)一個(gè)屬性type="text/css"，這樣瀏覽器就知道當(dāng)頁(yè)面顯示出來(lái)的時(shí)候，需要把style中的CSS代碼應(yīng)用到HTML中，因此可以在style標(biāo)簽中創(chuàng)建CSS規(guī)則。
css樣式
每天進(jìn)步一點(diǎn)點(diǎn)，跟著教頭學(xué)開(kāi)發(fā)。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
