JavaScript中的反向遍歷解析

為反向遍歷

for (var i=array.length; i--; ) {
     // process array[i]
}

優(yōu)點(diǎn)總結(jié)

您不需要聲明一個(gè)臨時(shí)len變量，也不需要在每次迭代時(shí)都比較array.length。
以相反的順序從DOM中刪除鄰近節(jié)點(diǎn)通常更高效。
如果在循環(huán)時(shí)修改數(shù)組，那么前向循環(huán)將跳過發(fā)生錯(cuò)誤的項(xiàng)目。雖然在傳統(tǒng)的for循環(huán)中，您可以更新 i 以指向需要處理的下一個(gè)項(xiàng)目-1，但是簡單地反轉(zhuǎn)迭代方向更優(yōu)雅、易懂。
在修改或刪除嵌套的DOM元素時(shí)，反向處理可以避免錯(cuò)誤。例如，考慮在處理父節(jié)點(diǎn)的子節(jié)點(diǎn)之前修改其內(nèi)部HTML。到子節(jié)點(diǎn)時(shí)，它將與DOM分離，在編寫父節(jié)點(diǎn)的innerHTML時(shí)已被新創(chuàng)建的子節(jié)點(diǎn)替換。

劣勢總結(jié)

如果構(gòu)建新的數(shù)組，或者在屏幕上打印內(nèi)容，則效率低下。
在父節(jié)點(diǎn)中重復(fù)在第一個(gè)位置插入子節(jié)點(diǎn)，則因?yàn)楣?jié)點(diǎn)要保持順序，會導(dǎo)致效率低下。
反向遍歷不符合一般人常規(guī)思維。

如何工作的

for (var i=0; i < array.length; i++) { ... }   // 正向遍歷

for (var i=array.length; i--; )    { ... }   // 反向遍歷

您會注意到，這i--是中間子句，最后一個(gè)子句是空的，這意味著這i--也用作繼續(xù)的條件，它會在每次迭代之前執(zhí)行并檢查。

它從array.length開始而不越界？

因?yàn)閕--運(yùn)行在每次迭代之前，在第一次迭代中，我們實(shí)際上需要訪問i，array.length - 1從而避免了數(shù)組越界問題。

為什么它不停止在索引0之前進(jìn)行迭代？

當(dāng)條件i--評估為假值時(shí)（即當(dāng)產(chǎn)生0時(shí)），循環(huán)將停止迭代。與--i不同，i--運(yùn)算符會遞減，i會在遞減之前產(chǎn)生值。

 var i=5; [i, i--, i];
[5, 5, 4]

因此，在最后一次迭代中，i以前是1，i--表達(dá)式將其更改為0，但實(shí)際上產(chǎn)生了1，因此條件通過了。在下一次迭代中，i--將i更改為-1，但產(chǎn)生0（假），從而導(dǎo)致執(zhí)行立即退出循環(huán)。

在傳統(tǒng)的for循環(huán)中，i++并且++i可以互換。但是在相反的for循環(huán)中，因?yàn)槲覀兊臏p量也是我們的條件表達(dá)式，所以i--如果要處理索引0處的項(xiàng)，則必須采用i--。

istory API

HTML5 History API無疑是現(xiàn)代網(wǎng)站的發(fā)展方向，因?yàn)樗瓿闪耸诸^的任務(wù)，同時(shí)還提供了額外的功能。您可以根據(jù)需求使用history.pushState()或history.replaceState()在瀏覽器中修改URL：

// 當(dāng)前 URL: https://my-website.com/page_a

// 修改后的URL
const nextURL='https://my-website.com/page_b';	
const nextTitle='My new page title';
const nextState={ additionalInformation: 'Updated the URL with JS' };

// 這將在瀏覽器的歷史記錄中創(chuàng)建一個(gè)新條目，而無需重新加載
window.history.pushState(nextState, nextTitle, nextURL);

// 這將替換瀏覽器歷史記錄中的當(dāng)前條目，而無需重新加載
window.history.replaceState(nextState, nextTitle, nextURL);

兩個(gè)方法的參數(shù)相同，允許您傳遞自定義的可序列化狀態(tài)對象作為第一個(gè)參數(shù)、自定義標(biāo)題（盡管大多數(shù)瀏覽器會忽略此參數(shù)）以及要在瀏覽器歷史記錄中添加/替換的URL。請記住，History API只允許相同的源URL，因此您無法導(dǎo)航到完全不同的網(wǎng)站。

Location API

舊的Location API不是該作業(yè)的最佳方案，因?yàn)樗鼤?strong>重新加載頁面，但是它仍然允許您修改當(dāng)前URL，并且在使用舊瀏覽器時(shí)可能會很有用。您可以使用window.location.href、location.assign()或location.replace()修改URL：

// 當(dāng)前 URL: https://my-website.com/page_a

// 修改后的URL
const nextURL='https://my-website.com/page_b';

// 這將在瀏覽器的歷史記錄中創(chuàng)建一個(gè)新條目，然后重新加載
window.location.href=nextURL;

// 這將替換瀏覽器歷史記錄中的當(dāng)前條目，然后重新加載
window.location.assign(nextURL);

// 這將替換瀏覽器歷史記錄中的當(dāng)前條目，然后重新加載
window.location.replace(nextURL);

如上所述，這三個(gè)選項(xiàng)都將導(dǎo)致頁面重新加載，這可能是不希望的。此外，與使用History API不同，您只能設(shè)置URL，而不需要任何附加參數(shù)。最后，Location API不會限制您使用相同的源URL，但使用不同的源URL，這可能會導(dǎo)致安全問題。

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è)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的 HTML

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

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

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

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è)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的 HTML.</u></i>";
　　}
　　//.innerText
　　function innerTextDemo()
　　{
　　　id2.innerText="<i><u>設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的文本.</u></i>";
　　}
　　//.outerHTML
　　function outerHTMLDemo()
　　{
　　　id3.outerHTML="<font size=9pt color=red><i><u>設(shè)置或獲取對象及其內(nèi)容的 HTML 形式.</u></i></font>";
　　}
　　//.outerText
　　function outerTextDemo()
　　{
　　　id4.outerText="<br></br><i><u>設(shè)置(包括標(biāo)簽)或獲取(不包括標(biāo)簽)對象的文本.</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è)置對象的內(nèi)容時(shí)包含的HTML會被解析，而innerText與outerText則不會。

　　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 元素的樣式，請使用這個(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 元素的樣式對象。

下面的例子改變一個(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)過測試證明,para.appendChild(node);調(diào)換至最后一行,運(yùn)行正常

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

在線咨詢

上一篇：JavaScript奇淫技巧：20行代碼，實(shí)現(xiàn)屏幕錄
下一篇：H5 頁面制作神器小白神器

您的項(xiàng)目需求

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

整合營銷服務(wù)商