JavaScript中的反向遍歷解析

為反向遍歷

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

優點總結

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

劣勢總結

如果構建新的數組，或者在屏幕上打印內容，則效率低下。
在父節點中重復在第一個位置插入子節點，則因為節點要保持順序，會導致效率低下。
反向遍歷不符合一般人常規思維。

如何工作的

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

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

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

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

因為i--運行在每次迭代之前，在第一次迭代中，我們實際上需要訪問i，array.length - 1從而避免了數組越界問題。

為什么它不停止在索引0之前進行迭代？

當條件i--評估為假值時（即當產生0時），循環將停止迭代。與--i不同，i--運算符會遞減，i會在遞減之前產生值。

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

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

在傳統的for循環中，i++并且++i可以互換。但是在相反的for循環中，因為我們的減量也是我們的條件表達式，所以i--如果要處理索引0處的項，則必須采用i--。

istory API

HTML5 History API無疑是現代網站的發展方向，因為它完成了手頭的任務，同時還提供了額外的功能。您可以根據需求使用history.pushState()或history.replaceState()在瀏覽器中修改URL：

// 當前 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' };

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

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

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

Location API

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

// 當前 URL: https://my-website.com/page_a

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

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

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

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

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

OM節點獲取

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

操作屬性：

document.getElementById(id).attribute=new value

實例

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

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

操作內容

修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性和innerText（IE支持） outerText outerHTML

區別描述如下：

innerHTML 設置或獲取位于對象起始和結束標簽內的 HTML

outerHTML 設置或獲取對象及其內容的 HTML 形式

innerText 設置或獲取位于對象起始和結束標簽內的文本

outerText 設置(包括標簽)或獲取(不包括標簽)對象的文本

document.getElementById(id).innerHTML=new HTML

實例一

本例改變了 <p> 元素的內容：

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

實例二：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>innerHTML、outerHTML、innerText、outerHTML之間的區別</title>
<script language="JavaScript" type="text/javascript">
　　//.innerHTML
　　function innerHTMLDemo()
　　{
　　　id1.innerHTML="<i><u>設置或獲取位于對象起始和結束標簽內的 HTML.</u></i>";
　　}
　　//.innerText
　　function innerTextDemo()
　　{
　　　id2.innerText="<i><u>設置或獲取位于對象起始和結束標簽內的文本.</u></i>";
　　}
　　//.outerHTML
　　function outerHTMLDemo()
　　{
　　　id3.outerHTML="<font size=9pt color=red><i><u>設置或獲取對象及其內容的 HTML 形式.</u></i></font>";
　　}
　　//.outerText
　　function outerTextDemo()
　　{
　　　id4.outerText="<br></br><i><u>設置(包括標簽)或獲取(不包括標簽)對象的文本.</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在設置對象的內容時包含的HTML會被解析，而innerText與outerText則不會。

　　2)、在設置時，innerHTML與innerText僅設置標簽內的文本，而outerHTML與outerText設置包括標簽在內外的文本(多個標簽)。

特別說明：

　　innerHTML是符合W3C標準的屬性，而innerText只適用于IE瀏覽器，因此，盡可能地去使用innerHTML，而少用innerText，

　　如果要輸出不含HTML標簽的內容，可以使用innerHTML取得包含HTML標簽的內容后，再用正則表達式去除HTML標簽，

　　下面是一個簡單的符合W3C標準的示例：

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

操作樣式

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

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

CSS樣式的個別屬性采用馱峰式寫法(如：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標記已經設定了.myUL1類的樣式的情況下,oMy.className="myUL1 myUL2"不等同于oMy.className +=" myUL2",

oMy.className="myUL1 myUL2"表現形式與oMy.className="myUL2"一樣; 因此應當采用oMy.className +=" myUl2";

改變 HTML 樣式

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

下面的例子改變一個段落的 HTML 樣式：

如需向 HTML DOM 添加新元素，您首先必須創建該元素（元素節點），然后把它追加到已有的元素上。

<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>

注意:經過測試證明,para.appendChild(node);調換至最后一行,運行正常

最可行的方法:添加節點的順序,由內到外(個人習慣);

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商