ＩＥ与ＦＦＪＳ代码Ａｌｅｒｔ值不同，迷糊，高人进帮解答下。。。

xuexijava 2010-01-26 02:00:00

如下代码，有点长，但只看ＪＳ没多少，红色部标出部分很迷糊，ＩＥ和ＦＦ的差别，本人不太了解
高手给讲解下，为什么在ＦＦ下有７个是 undefined 。。。。。这七个是谁。。。。。。
本人太菜。。。。哪位高人给帮解答下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态菜单</title>
<style>
*{margin:0px; padding:0px; border:0px;}
body{ text-align:center}
#bar{ width:200px; font-family:Arial; text-align:left; margin:0px auto;}
#ullist{ margin:0; padding:0; list-style-type:none;}
#ullist li{ border-bottom:1px solid #ed9f9f;}
#ullist li a{ display:block; text-decoration:none; padding:5px 5px 5px 0.5em; border-left:12px solid #711515; border-right:1px solid #711515;}
#ullist li a:link,#ullist li a:visited{ background-color:#c11136; color:#ffffff;}
#ullist li a:hover{ background-color:#990020; color:#ffff00;}

/* 子菜单ＣＳＳ样式*/
#bar ul li ul{ list-style-type:none; margin:0px; padding:0px 0px 0px 0px;}
#bar ul li ul li{ border-top:1px solid #ed9f9f;}
#bar ul li ul li a{ display:block; padding:3px 3px 3px 0.5em; text-decoration:none; border-left:28px solid #a71f1f; border-right:1px solid #711515;}
#bar ul li ul li a:link,#bar ul li ul li a:visited{ background-color:#e85070; color:#FFFFFF;}
#bar ul li ul li a:hover{ background-color:#c2425d; color:#ffff00;}
#bar ul li ul.myHide{ display:none;}
#bar ul li ul.myShow{ display:block;}
</style>
<script type="text/javascript">
function changes(){
var oSecondDiv=this.parentNode.getElementsByTagName("ul")[0];
if(oSecondDiv.className=="myHide"){
oSecondDiv.className="myShow"
}else{
oSecondDiv.className="myHide"
}
}
window.onload=function(){
var oUl=document.getElementById("ullist");
var aLi=oUl.childNodes;
alert("aLi.length:"+aLi.length); // IE７下值为６，在ＦＦ下值为13？
var oA;
var i=0;
for(i;i<aLi.length;i++){
alert(aLi[i].innerHTML); //然后在这里Ａｌｅｒｔ下，在ＦＦ下有７个是 undefined
if(aLi[i].tagName =="LI" && aLi[i].getElementsByTagName("ul").length){
// alert(aLi[i].innerHTML);
oA=aLi[i].firstChild;
oA.onclick=changes;
}
}
}
</script>
</head>

<body>
<div id="bar">
<ul id="ullist">
<li><a href="#">主菜单１</a></li>
<li><a href="#">主菜单２</a>
<ul class="myHide">
<li><a href="#">子菜单１</a></li>
<li><a href="#">子菜单２</a></li>
</ul>
</li>
<li><a href="#">主菜单３</a>
<ul class="myHide">
<li><a href="#">子菜单１</a></li>
<li><a href="#">子菜单２</a></li>
</ul>
</li>
<li><a href="#">主菜单４</a>
<ul class="myHide">
<li><a href="#">子菜单１</a></li>
<li><a href="#">子菜单２</a></li>
</ul>
</li>
<li><a href="#">主菜单５</a>
<ul class="myHide">
<li><a href="#">子菜单１</a></li>
<li><a href="#">子菜单２</a></li>
</ul>
</li>
<li><a href="#">主菜单６</a></li>
</ul>
</div>
</body>
</html>

...全文

83 16 打赏收藏转发到动态举报

写回复

用AI写文章

16 条回复

切换为时间正序

请发表友善的回复…

发表回复

xuexijava 2010-01-26

打赏
举报

[Quote=引用 14 楼 net_lover 的回复:]
if(aLi[i].getElementsByTagName("ul").length) 不会报不是函数的。，前提是
if (aLi[i].nodeType == 1) {
if(aLi[i].getElementsByTagName("ul").length)
{
alert("x")
}
}
[/Quote]
太So 3Q。。。。
给分结贴。。。。。。。。。

孟子E章 2010-01-26

打赏
举报

你的代码可以这样改



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>动态菜单</title>

		<style>

* {

	margin: 0px;

	padding: 0px;

	border: 0px;

}



body {

	text-align: center

}



#bar {

	width: 200px;

	font-family: Arial;

	text-align: left;

	margin: 0px auto;

}



#ullist {

	margin: 0;

	padding: 0;

	list-style-type: none;

}



#ullist li {

	border-bottom: 1px solid #ed9f9f;

}



#ullist li a {

	display: block;

	text-decoration: none;

	padding: 5px 5px 5px 0.5em;

	border-left: 12px solid #711515;

	border-right: 1px solid #711515;

}



#ullist li a:link,#ullist li a:visited {

	background-color: #c11136;

	color: #ffffff;

}



#ullist li a:hover {

	background-color: #990020;

	color: #ffff00;

}



/* 子菜单ＣＳＳ样式*/

#bar ul li ul {

	list-style-type: none;

	margin: 0px;

	padding: 0px 0px 0px 0px;

}



#bar ul li ul li {

	border-top: 1px solid #ed9f9f;

}



#bar ul li ul li a {

	display: block;

	padding: 3px 3px 3px 0.5em;

	text-decoration: none;

	border-left: 28px solid #a71f1f;

	border-right: 1px solid #711515;

}



#bar ul li ul li a:link,#bar ul li ul li a:visited {

	background-color: #e85070;

	color: #FFFFFF;

}



#bar ul li ul li a:hover {

	background-color: #c2425d;

	color: #ffff00;

}



#bar ul li ul.myHide {

	display: none;

}



#bar ul li ul.myShow {

	display: block;

}

</style>

		<script type="text/javascript">

	function changes() {

		var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];

		if (oSecondDiv.className == "myHide") {

			oSecondDiv.className = "myShow"

		} else {

			oSecondDiv.className = "myHide"

		}

	}

	window.onload = function() {

		var oUl = document.getElementById("ullist");

		var aLi = oUl.childNodes;

		var oA;

		var i = 0;

		for (i; i < aLi.length; i++) {

			if (aLi[i].nodeType == 1) {

				if (aLi[i].tagName == "LI"

						&& aLi[i].getElementsByTagName("ul").length) {

					// alert(aLi[i].innerHTML);

					oA = aLi[i].getElementsByTagName("a")[0];

					if (oA)

						oA.onclick = changes;

				}

			}

		}

	}

</script>

	</head>



	<body>

		<div id="bar">

			<ul id="ullist">

				<li>

					<a href="#">主菜单１ </a>

				</li>

				<li>

					<a href="#">主菜单２ </a>

					<ul class="myHide">

						<li>

							<a href="#">子菜单１ </a>

						</li>

						<li>

							<a href="#">子菜单２ </a>

						</li>

					</ul>

				</li>

				<li>

					<a href="#">主菜单３ </a>

					<ul class="myHide">

						<li>

							<a href="#">子菜单１ </a>

						</li>

						<li>

							<a href="#">子菜单２ </a>

						</li>

					</ul>

				</li>

				<li>

					<a href="#">主菜单４ </a>

					<ul class="myHide">

						<li>

							<a href="#">子菜单１ </a>

						</li>

						<li>

							<a href="#">子菜单２ </a>

						</li>

					</ul>

				</li>

				<li>

					<a href="#">主菜单５ </a>

					<ul class="myHide">

						<li>

							<a href="#">子菜单１ </a>

						</li>

						<li>

							<a href="#">子菜单２ </a>

						</li>

					</ul>

				</li>

				<li>

					<a href="#">主菜单６ </a>

				</li>

			</ul>

		</div>

	</body>

</html>

孟子E章 2010-01-26

打赏
举报

if(aLi[i].getElementsByTagName("ul").length) 不会报不是函数的。，前提是
if (aLi[i].nodeType == 1) {
if(aLi[i].getElementsByTagName("ul").length)
{
alert("x")
}
}

孟子E章 2010-01-26

打赏
举报

js中，0代表boolean类型的false，非0代表true
if（）进行判断，要转换成boolean类型的
if(aLi[i].getElementsByTagName("ul").length)
是正确的

xuexijava 2010-01-26

打赏
举报

果然好使。。。。
哈哈
if(aLi[i].tagName =="LI" && aLi[i].getElementsByTagName("ul").length)
这句还有点不太明白
特别是后半句aLi[i].getElementsByTagName("ul").length
放在Ｉｆ中是不是说aLi[i].getElementsByTagName("ul").length的值为非０即为Ｔｒｕｅ？
但是单独拿出来
if(aLi[i].getElementsByTagName("ul").length){
alert(aLi[i].innerHTML);
}
报错：aLi[i].getElementsByTagName is not a function
....
就是有点不明白他的Ｉｆ语句if(aLi[i].tagName =="LI" && aLi[i].getElementsByTagName("ul").length){。。。。帮讲讲呗。。。。

孟子E章 2010-01-26

打赏
举报

ie不计算空白，其他浏览器计算空白的

ck11926375 2010-01-26

打赏
举报

在ＦＦ下有７个是 undefined，JS不兼容
参考：



    //兼容FF IE

    var getElementsByName = function(tag, name){

    var returns = document.getElementsByName(name);

    if(returns.length > 0) return returns;

    returns = new Array();

    var e = document.getElementsByTagName(tag);

    for(var i = 0; i < e.length; i++){

    if(e[i].getAttribute("name") == name){

    returns[returns.length] = e[i];

    }

    }

    return returns;

    }

孟子E章 2010-01-26

打赏
举报

你可以这样测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>动态菜单</title>

		<style>

* {

	margin: 0px;

	padding: 0px;

	border: 0px;

}



body {

	text-align: center

}



#bar {

	width: 200px;

	font-family: Arial;

	text-align: left;

	margin: 0px auto;

}



#ullist {

	margin: 0;

	padding: 0;

	list-style-type: none;

}



#ullist li {

	border-bottom: 1px solid #ed9f9f;

}



#ullist li a {

	display: block;

	text-decoration: none;

	padding: 5px 5px 5px 0.5em;

	border-left: 12px solid #711515;

	border-right: 1px solid #711515;

}



#ullist li a:link,#ullist li a:visited {

	background-color: #c11136;

	color: #ffffff;

}



#ullist li a:hover {

	background-color: #990020;

	color: #ffff00;

}



/* 子菜单ＣＳＳ样式*/

#bar ul li ul {

	list-style-type: none;

	margin: 0px;

	padding: 0px 0px 0px 0px;

}



#bar ul li ul li {

	border-top: 1px solid #ed9f9f;

}



#bar ul li ul li a {

	display: block;

	padding: 3px 3px 3px 0.5em;

	text-decoration: none;

	border-left: 28px solid #a71f1f;

	border-right: 1px solid #711515;

}



#bar ul li ul li a:link,#bar ul li ul li a:visited {

	background-color: #e85070;

	color: #FFFFFF;

}



#bar ul li ul li a:hover {

	background-color: #c2425d;

	color: #ffff00;

}



#bar ul li ul.myHide {

	display: none;

}



#bar ul li ul.myShow {

	display: block;

}

</style>

		<script type="text/javascript">

function changes() {

	var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];

	if (oSecondDiv.className == "myHide") {

		oSecondDiv.className = "myShow"

	} else {

		oSecondDiv.className = "myHide"

	}

}

window.onload = function() {

	var oUl = document.getElementById("ullist");

	var aLi = oUl.childNodes;

	alert("aLi.length:" + aLi.length); // IE７下值为６，在ＦＦ下值为13？

	var oA;

	var i = 0;

	for (i; i < aLi.length; i++) {



		if (aLi[i].nodeType == 1) {

			alert(aLi[i].innerHTML); //

		}

		if (aLi[i].nodeType == 3) {

			alert(aLi[i].nodeValue); //

		}

	

	if (aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length) {

		// alert(aLi[i].innerHTML);

		oA = aLi[i].firstChild;

		oA.onclick = changes;

	}

}}

</script>

	</head>



	<body>

		<div id="bar">

			<ul id="ullist">文字内容测试，这里如果是空白，也是节点啊

				<li>

					<a href="#">主菜单１ </a>

				</li>

				<li>

					<a href="#">主菜单２ </a>

					<ul class="myHide">

						<li>

							<a href="#">子菜单１ </a>

						</li>

						<li>

							<a href="#">子菜单２ </a>

						</li>

					</ul>

				</li>

				<li>

					<a href="#">主菜单３ </a>

					<ul class="myHide">

						<li>

							<a href="#">子菜单１ </a>

						</li>

						<li>

							<a href="#">子菜单２ </a>

						</li>

					</ul>

				</li>

				<li>

					<a href="#">主菜单４ </a>

					<ul class="myHide">

						<li>

							<a href="#">子菜单１ </a>

						</li>

						<li>

							<a href="#">子菜单２ </a>

						</li>

					</ul>

				</li>

				<li>

					<a href="#">主菜单５ </a>

					<ul class="myHide">

						<li>

							<a href="#">子菜单１ </a>

						</li>

						<li>

							<a href="#">子菜单２ </a>

						</li>

					</ul>

				</li>

				<li>

					<a href="#">主菜单６ </a>

				</li>

			</ul>

		</div>

	</body>

</html>

孟子E章 2010-01-26

打赏
举报

由于文本节点没有innerHTML属性，所以需要使用nodeValue获取内容

xuexijava 2010-01-26

打赏
举报

[Quote=引用 5 楼 net_lover 的回复:]
undefined 是谁？。。。。。 ??
空白节点
[/Quote]
再次３Ｑ
俺Ｔｅｓｔ下

孟子E章 2010-01-26

打赏
举报

for (i; i < aLi.length; i++) {

if (aLi[i].nodeType == 1) {
alert(aLi[i].innerHTML); //
}
if (aLi[i].nodeType == 3) {
alert(aLi[i].nodeValue); //
}
}

孟子E章 2010-01-26

打赏
举报

undefined 是谁？。。。。。 ??
空白节点

孟子E章 2010-01-26

打赏
举报

if (aLi[i].nodeType == 1) {
alert(aLi[i].innerHTML); //
}

xuexijava 2010-01-26

打赏
举报

[Quote=引用 1 楼 net_lover 的回复:]
ＦＦ下包括空格等文本节点。所以你需要特殊处理，或者HTML code<ulclass="myHide"><li><ahref="#">子菜单１</a></li><li><ahref="#">子菜单２</a></li></ul>

这样写
[/Quote]
先谢谢net_lover了。。。
还想问下，那七个 undefined 是谁？。。。。。
汗。。。。。。。
是不是这七个不太容易找出来。。。。
俺很菜，只是想多了解点。。。。。
这样问是不是太水哈哈。。。。。。。。。。。。。

孟子E章 2010-01-26

打赏
举报

for(i;i <aLi.length;i++){
alert(aLi[i].innerHTML);
这里你需要判断节点的类型nodeType。如果是HTML 的才有innerHTML

孟子E章 2010-01-26

打赏
举报

ＦＦ下包括空格等文本节点。所以你需要特殊处理，或者



<ul class="myHide"><li> <a href="#">子菜单１ </a></li><li><a href="#">子菜单２ </a></li></ul>

这样写

helloworld body标签里面的代码如上面， script 标签里面的内容如下： function onLoad(){ alert("hello"); } 这是一个js很简单的弹框，在IE下,这段带代码写在html里面能弹出框来，在jsp里面就弹不出框，但在其他浏览器下面都可以弹出来，恶心了我一下午。网上找了很多方法，不行，差点重装了

在用AutoIt调用javascript时，如果该方法调用了alert()，会马上弹出一个警告窗口，这时候，autoit进程停止执行,要等到你点击ok或者关闭按键，该窗口消失后，autoit脚本才会继续运行。那有没有办法，让脚本帮我们来关闭这个窗口呢？有一种思路就是新建一个autoit进程来监控是否有窗口弹出，代码如下：
#include <IE.au3> WinWaitActive("Microsoft Internet Explorer","") If WinActive

一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 前端面试秘籍,欢迎star! 在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题百度源代码如下 1.<!Doctypehtml> 2.<htmlxmlns=http://www.w3.org/...

1、简单的区分谷歌和IE，谷歌用 \n ,IE用 \r\n function alert_br(){ //谷歌浏览器用这个 if(!document.all){ alert(‘第一行\n第二行’); }else{ //IE系列用这个 alert(‘第一行\r\n第二行); } } alert_br(); 2、对所有型号的浏览器都...

JS中alert的使用 JS中利用alert实现弹窗的两种方法提示：以下是本篇文章正文内容，下面案例可供参考一、外部引用JS文件首先创建一个xxx.js文件写入如下代码 alert('这里写警示框弹出的内容'); 返回html界面在head或body内引用这行js代码写入如下代码 <script src="xxx.js"></script> 即可实现弹窗效果，如下图二、内部使用script标签样式在html中直接使用alert 代码如下（示例）： &.

Ajax

52,797

社区成员

25,305

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章