JavaScript DOM修改(文本和樣式)

OM節(jié)點(diǎn)獲取

var oLi = document.getElementsByTagName("li");
var oLi = document.getElementById("cssLi");
var oLi = document.getElementsByName("myInput");

操作屬性：

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>

操作內(nèi)容

修改 HTML 內(nèi)容的最簡單的方法時(shí)使用 innerHTML 屬性和innerText（IE支持） outerText outerHTML

區(qū)別描述如下：

innerHTML 設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的 HTML

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

innerText 設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的文本

outerText 設(shè)置(包括標(biāo)簽)或獲取(不包括標(biāo)簽)對(duì)象的文本

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í)例二：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>innerHTML、outerHTML、innerText、outerHTML之間的區(qū)別</title>
<script language="JavaScript" type="text/javascript">
　　//.innerHTML
　　function innerHTMLDemo()
　　{
　　　id1.innerHTML="<i><u>設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的 HTML.</u></i>";
　　}
　　//.innerText
　　function innerTextDemo()
　　{
　　　id2.innerText="<i><u>設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的文本.</u></i>";
　　}
　　//.outerHTML
　　function outerHTMLDemo()
　　{
　　　id3.outerHTML="<font size=9pt color=red><i><u>設(shè)置或獲取對(duì)象及其內(nèi)容的 HTML 形式.</u></i></font>";
　　}
　　//.outerText
　　function outerTextDemo()
　　{
　　　id4.outerText="<br></br><i><u>設(shè)置(包括標(biāo)簽)或獲取(不包括標(biāo)簽)對(duì)象的文本.</u></i>";
　　}
　　</script>
　　</head>
　　<body>
　　<ul>
　　<li id="id1" onclick="innerHTMLDemo()">innerHTML效果.</li>
　　<li id="id2" onclick="innerTextDemo()">innerText效果.</li>
　　<li id="id3" onclick="outerHTMLDemo()">outerHTML效果.</li>
　　<li id="id4" onclick="outerTextDemo()">outerText效果.</li>
　　</ul>
　　</body>
　　</html>

簡單的說innerHTML和outerHTML、innerText與outerText的不同之處在于：

　　1)、innerHTML與outerHTML在設(shè)置對(duì)象的內(nèi)容時(shí)包含的HTML會(huì)被解析，而innerText與outerText則不會(huì)。

　　2)、在設(shè)置時(shí)，innerHTML與innerText僅設(shè)置標(biāo)簽內(nèi)的文本，而outerHTML與outerText設(shè)置包括標(biāo)簽在內(nèi)外的文本(多個(gè)標(biāo)簽)。

特別說明：

　　innerHTML是符合W3C標(biāo)準(zhǔn)的屬性，而innerText只適用于IE瀏覽器，因此，盡可能地去使用innerHTML，而少用innerText，

　　如果要輸出不含HTML標(biāo)簽的內(nèi)容，可以使用innerHTML取得包含HTML標(biāo)簽的內(nèi)容后，再用正則表達(dá)式去除HTML標(biāo)簽，

　　下面是一個(gè)簡單的符合W3C標(biāo)準(zhǔn)的示例：

<a href="javascript：alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">無HTML,符合W3C標(biāo)準(zhǔn)</a>

操作樣式

如需改變 HTML 元素的樣式，請(qǐng)使用這個(gè)語法：

document.getElementById(id).style.property=new style

CSS樣式的個(gè)別屬性采用馱峰式寫法(如：backgroundColor), 且不帶橫線。

document.body.style.backgroundColor="red";

如：

<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
document.getElementById(id).className="類名"；
document.getElementById(id).className="類名1 類名2"；
document.getElementById(id).className+=" 類名3"；//注意要留有空格

<!DOCTYPE HTML>
<html>
<head>
<title>追加CSS類別</title>
<style type="text/css">
.myUL1{
color:#0000FF;
font-family:Arial;
font-weight:bold;
}
.myUL2{
text-decoration:underline;
}
</style>
<script language="javascript">
function check(){
var oMy = document.getElementsByTagName("ul")[0];
oMy.className += " myUL2"; //追加CSS類,注意要留有空格
}
</script>
</head>
<body>
<ul onclick="check()" class="myUL1">
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
</ul>
</body>
</html>

注意：追加CSS類,注意要留有空格;

ul標(biāo)記已經(jīng)設(shè)定了.myUL1類的樣式的情況下,oMy.className = "myUL1 myUL2"不等同于oMy.className += " myUL2",

oMy.className = "myUL1 myUL2"表現(xiàn)形式與oMy.className = "myUL2"一樣; 因此應(yīng)當(dāng)采用oMy.className += " myUl2";

改變 HTML 樣式

通過 HTML DOM，您能夠訪問 HTML 元素的樣式對(duì)象。

下面的例子改變一個(gè)段落的 HTML 樣式：

如需向 HTML DOM 添加新元素，您首先必須創(chuàng)建該元素（元素節(jié)點(diǎn)），然后把它追加到已有的元素上。

<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>

注意:經(jīng)過測(cè)試證明,para.appendChild(node);調(diào)換至最后一行,運(yùn)行正常

最可行的方法:添加節(jié)點(diǎn)的順序,由內(nèi)到外(個(gè)人習(xí)慣);

眾號(hào)【傳智播客博學(xué)谷】回復(fù)關(guān)鍵詞：前端 PS Java(100G) Python(80G) 大數(shù)據(jù) 區(qū)塊鏈測(cè)試 PPT JS(40g+300教程) HTML 簡歷領(lǐng)取相關(guān)學(xué)習(xí)資料！

一、HTML

1、<image>標(biāo)簽上title屬性與alt屬性的區(qū)別是什么？

alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個(gè)英文字符或者用戶必須保證替換文字盡可能的短。

這包括那些使用本來就不支持圖像顯示或者圖像顯示被關(guān)閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。

title屬性為設(shè)置該屬性的元素提供建議性的信息。使用title屬性提供非本質(zhì)的額外信息。參考《alt和title屬性的區(qū)別及應(yīng)用》

2、分別寫出以下幾個(gè)HTML標(biāo)簽：文字加粗、下標(biāo)、居中、字體

加粗：<b>、<strong>

下標(biāo)：<sub>

居中：<center>

字體：<font>、<basefont>、參考《HTML標(biāo)簽列表》

3、請(qǐng)寫出至少5個(gè)html5新增的標(biāo)簽，并說明其語義和應(yīng)用場(chǎng)景

section：定義文檔中的一個(gè)章節(jié)

nav：定義只包含導(dǎo)航鏈接的章節(jié)

header：定義頁面或章節(jié)的頭部。它經(jīng)常包含 logo、頁面標(biāo)題和導(dǎo)航性的目錄。

footer：定義頁面或章節(jié)的尾部。它經(jīng)常包含版權(quán)信息、法律信息鏈接和反饋建議用的地址。

aside：定義和頁面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容——如果被刪除，剩下的內(nèi)容仍然很合理。

參考《HTML5 標(biāo)簽列表》

4、請(qǐng)說說你對(duì)標(biāo)簽語義化的理解？

a. 去掉或者丟失樣式的時(shí)候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)

b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重；

c. 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來渲染網(wǎng)頁；

d. 便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化更具可讀性，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。

5、Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?

聲明位于文檔中的最前面，處于標(biāo)簽之前。告知瀏覽器以何種模式來渲染文檔。

嚴(yán)格模式的排版和 JS 運(yùn)作模式是，以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。

在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。

DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)。

6、你知道多少種Doctype文檔類型？

標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的 HTML 文檔。

HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。

XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁，

Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁。

7、HTML與XHTML——二者有什么區(qū)別

a. XHTML 元素必須被正確地嵌套。

b. XHTML 元素必須被關(guān)閉。

c. 標(biāo)簽名必須用小寫字母。

d. XHTML 文檔必須擁有根元素。

參考《XHTML 與 HTML 之間的差異》

8、html5有哪些新特性、移除了那些元素？

a. HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。

b. 拖拽釋放(Drag and drop) API

c. 語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）

d. 音頻、視頻API(audio,video)

e. 畫布(Canvas) API

f. 地理(Geolocation) API

g. 本地離線存儲(chǔ) localStorage 長期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失

h. sessionStorage 的數(shù)據(jù)在頁面會(huì)話結(jié)束時(shí)會(huì)被清除

i. 表單控件，calendar、date、time、email、url、search

j. 新的技術(shù)webworker, websocket等

移除的元素：

a. 純表現(xiàn)的元素：basefont，big，center, s，strike，tt，u；

b. 對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；

9、iframe的優(yōu)缺點(diǎn)？

優(yōu)點(diǎn)：

a. 解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問題

b. iframe無刷新文件上傳

c. iframe跨域通信

缺點(diǎn)：

a. iframe會(huì)阻塞主頁面的Onload事件

b. 無法被一些搜索引擎索引到

c. 頁面會(huì)增加服務(wù)器的http請(qǐng)求

d. 會(huì)產(chǎn)生很多頁面，不容易管理。

參考《iframe的一些記錄》

10、Quirks模式是什么？它和Standards模式有什么區(qū)別？

在寫程序時(shí)我們也會(huì)經(jīng)常遇到這樣的問題，如何保證原來的接口不變，又提供更強(qiáng)大的功能，尤其是新功能不兼容舊功能時(shí)。IE6以前的頁面大家都不會(huì)去寫DTD，所以IE6就假定如果寫了DTD，就意味著這個(gè)頁面將采用對(duì)CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區(qū)別：總體會(huì)有布局、樣式解析和腳本執(zhí)行三個(gè)方面的區(qū)別。

a. 盒模型：在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個(gè)元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

b. 設(shè)置行內(nèi)元素的高寬：在Standards模式下，給等行內(nèi)元素設(shè)置wdith和height都不會(huì)生效，而在quirks模式下，則會(huì)生效。

c. 設(shè)置百分比的高度：在standards模式下，一個(gè)元素的高度是由其包含的內(nèi)容來決定的，如果父元素沒有設(shè)置百分比的高度，子元素設(shè)置一個(gè)百分比的高度是無效的用

d. 設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會(huì)失效。

11、請(qǐng)闡述table的缺點(diǎn)

a. 太深的嵌套，比如table>tr>td>h3，會(huì)導(dǎo)致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。

b. 靈活性差，比如要將tr設(shè)置border等屬性，是不行的，得通過td

c. 代碼臃腫，當(dāng)在table中套用table的時(shí)候，閱讀代碼會(huì)顯得異常混亂

d. 混亂的colspan與rowspan，用來布局時(shí)，頻繁使用他們會(huì)造成整個(gè)文檔順序混亂。

e. 不夠語義

參考《為什么說table表格布局不好？》

12、簡述一下src與href的區(qū)別

src用于替換當(dāng)前元素；href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。

src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置

href是Hypertext Reference的縮寫，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接

公眾號(hào)【傳智播客博學(xué)谷】回復(fù)關(guān)鍵詞：前端 PS Java Python 大數(shù)據(jù) 區(qū)塊鏈測(cè)試 PPT JS HTML 簡歷領(lǐng)取相關(guān)學(xué)習(xí)資料！

們知道，在seo中，標(biāo)簽起著重要的作用，適當(dāng)?shù)氖褂脴?biāo)簽，可以讓你的網(wǎng)站錦上添花。我們今天來談?wù)剆eoer常用的3個(gè)標(biāo)簽——B strong H.

先看一下B strong H標(biāo)簽的用法？

B標(biāo)簽的用法，在html中，B標(biāo)簽的作用時(shí)加粗，標(biāo)準(zhǔn)用法為<b></b>.

H標(biāo)簽的用法，在html中，H標(biāo)簽共有6個(gè)，h1,h2,h3,h4,h5,h6..它們的作用是標(biāo)注標(biāo)題。一般主標(biāo)題用H1。且每個(gè)頁面中，H1標(biāo)簽只可以出現(xiàn)一次。標(biāo)準(zhǔn)用法為<h1></h1>......<h6></h6>.

strong標(biāo)簽的用法，在html中，strong的作用是邏輯語義加強(qiáng)。標(biāo)準(zhǔn)寫法為<strong></strong>.

在seo中 B strong H標(biāo)簽用哪個(gè)好？

上面我們說了B strong H標(biāo)簽的用法極其作用。那么在網(wǎng)頁優(yōu)化中，用哪個(gè)標(biāo)簽好呢？從上文不難發(fā)現(xiàn)，H1似乎給的權(quán)重比較大。strong是通過加粗來體現(xiàn)語義加強(qiáng)的。相對(duì)似乎B標(biāo)簽不那么重要。那么我把強(qiáng)調(diào)的部分都用H標(biāo)簽可好。

不得不說，你這樣做就反了忌諱。如果你都用h標(biāo)簽，那么蜘蛛會(huì)蒙掉的。哪個(gè)才重要呢？

所以，在使用標(biāo)簽時(shí)，H1權(quán)重>strong>B.但是不可以為了權(quán)重而盲目使用，那樣會(huì)造成標(biāo)簽泛濫，說不定不的網(wǎng)站會(huì)因此受到一定的懲罰。在使用標(biāo)簽時(shí)，也要結(jié)合實(shí)際，注重用戶體驗(yàn)。做到用戶重視的，就是蜘蛛重視的。

在線咨詢

上一篇：JavaScript中裝載XML文檔
下一篇：分享web前端8款最主流的HTML5開發(fā)工具

您的項(xiàng)目需求

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

整合營銷服務(wù)商

JavaScript DOM修改(文本和樣式)

您的項(xiàng)目需求