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小时内与您取得联系。

整合营销服务商