Netscape和IE为表显示不同数量的子节点？ [英] Netscape and IE show different number of child nodes for table?
问题描述
有人可以向我解释一下吗？它让我疯了。
保存并在IE或Opera中运行，然后在Mozilla或Netscape 6+中运行。
在IE / Opera中，我得到预期的4个警报。
在Mozilla / Netscape中，我得到* 9 *。
在示例表中，有4行，每行4列tbody。
我希望桌子上有4个子节点，每个子节点有4个孩子。我得到了
Mozilla / Netscape中的4加5 [对象文本]警报。在IE和Opera中我只获得了4美元。请注意，尝试提醒innerHTML会显示Text对象的
null。
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.0 Transitional // EN"
" http：//www.w3.org/TR/REC-html40/loose.dtd">
< html>
< head>
< title>新文档< / title>
< script type =" text / javascript">
function checkIt（）
{
if（！document.getElementById）
{
alert（抱歉，您的浏览器不支持此功能。）;
返回;
}
var T = document.getElementById（" tb"）;
for（var i = 0; i< T.childNodes.length; i ++）
{
alert（T.childNodes [i]）;
}
返回;
}
< / script>
< ; / head>
< body>
< table id =" t1"边界=" 1 QUOT; CELLPADDING = QUOT; 5英寸cellspacing =" 0">
< tbody id =" tb">
< tr>
< td> ;< p> R1 C1< / p>< / td>
< td>< p> R1 C2< / p>< / td>
< td>< p> R1 C3< / p>< / td>
< td>< p> R1 C4< / p>< / td>
< / tr>
< tr>
< td>< p> R2 C1< / p>< / td>
< td>< p> R2 C2< / p>< / td>
< td>< p> R2 C3< / p>< / td>
< td>< p> R2 C4< / p>< / td>
< / tr>
< tr>
< td>< p> R3 C1< / p>< / td>
< td>< p> R3 C2< ; / p>< / td>
< td>< p> R3 C3< / p>< / td>
< td>< p> R3 C4< / p>< / td>
< / tr>
< tr>
< td> < p> R4 C1< / p>< / td>
< td>< p> ; R4 C2< / p>< / td>
< td>< p> R4 C3< / p>< / td>
< td> ;< p> R4 C4< / p>< / td>
< / tr>
< / tbody>
< / table>
< form id =" f1" name =" f1">
< input type =" button"名称= QUOT; B1" value ="试一试 onClick =" checkIt（）">
< / form>
< / body>
< ; / html>
-
-
~kaeli~
很多钱被污染了 - 它污染了你，它污染了我的。
http：// www。 ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net / kaelisSpace
Can anyone explain this to me? It''s driving me insane.
Save this and run it in IE or Opera and then in Mozilla or Netscape 6+.
In IE/Opera, I get the expected 4 alerts.
In Mozilla/Netscape, I get *9*.
In the example table, there are 4 rows with 4 columns each in the tbody.
I''d expect 4 child nodes for the table body with 4 children each. I get
those 4 plus 5 [object Text] alerts in Mozilla/Netscape. I get only
those 4 in IE and Opera. Note that trying to alert the innerHTML shows
null for the Text objects.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
function checkIt()
{
if (! document.getElementById)
{
alert("Sorry, your browser doesn''t support this.");
return;
}
var T = document.getElementById("tb");
for (var i=0; i<T.childNodes.length; i++)
{
alert(T.childNodes[i]);
}
return;
}
</script>
</head>
<body>
<table id="t1" border="1" cellpadding="5" cellspacing="0">
<tbody id="tb">
<tr>
<td><p>R1 C1</p></td>
<td><p>R1 C2</p></td>
<td><p>R1 C3</p></td>
<td><p>R1 C4</p></td>
</tr>
<tr>
<td><p>R2 C1</p></td>
<td><p>R2 C2</p></td>
<td><p>R2 C3</p></td>
<td><p>R2 C4</p></td>
</tr>
<tr>
<td><p>R3 C1</p></td>
<td><p>R3 C2</p></td>
<td><p>R3 C3</p></td>
<td><p>R3 C4</p></td>
</tr>
<tr>
<td><p>R4 C1</p></td>
<td><p>R4 C2</p></td>
<td><p>R4 C3</p></td>
<td><p>R4 C4</p></td>
</tr>
</tbody>
</table>
<form id="f1" name="f1">
<input type="button" name="b1" value="Try It" onClick="checkIt()">
</form>
</body>
</html>
--
--
~kaeli~
A lot of money is tainted - It taint yours and it taint mine.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
推荐答案
kaeli写道：
kaeli wrote:
任何人都可以向我解释一下吗？这让我疯了。
让我们试着让你免于精神错乱。您的测试已经显示
您与浏览器的不同之处。
在IE / Opera中，我收到了预期的4个警报。
在Mozilla中/ Netscape，我得到* 9 *。
在示例表中，tbody中有4行，每行有4列。
我希望表体有4个子节点，每个子节点有4个子节点。我在Mozilla / Netscape中获得了那些4加5 [对象文本]警报。我只获得了IE和Opera中的那4个。请注意，尝试警告innerHTML会显示Text对象的null。
如果您的标记如下，那么< tbody id =" tb">
这是< tbody>的第一个孩子元素你有一个带有
空白区域的文本节点，其中有一个换行符，Opera和Mozilla / Netscape模型在
DOM< tr>
< td> ;< p> R1 C1< / p>< / td>
< td>< p> R1 C2< / p>< / td>
< td>< p> ; R1 C3< / p>< / td>
< td>< p> R1 C4< / p>< / td>
< / tr>
Can anyone explain this to me? It''s driving me insane.
Let''s try to save you from insanity then. Your test is already showing
you the difference the browsers have.
In IE/Opera, I get the expected 4 alerts.
In Mozilla/Netscape, I get *9*.
In the example table, there are 4 rows with 4 columns each in the tbody.
I''d expect 4 child nodes for the table body with 4 children each. I get
those 4 plus 5 [object Text] alerts in Mozilla/Netscape. I get only
those 4 in IE and Opera. Note that trying to alert the innerHTML shows
null for the Text objects.
If you have your markup as below then <tbody id="tb"> here the first child of the <tbody> element you have a text node with
white space with a line break which Opera and Mozilla/Netscape model in
the DOM <tr>
<td><p>R1 C1</p></td>
<td><p>R1 C2</p></td>
<td><p>R1 C3</p></td>
<td><p>R1 C4</p></td>
</tr>
这是带有空格的下一个子文本节点，换行符。
IE忽略大多数作者插入的空白文本节点
的标记更具可读性，例如你写过
< tbody>
< tr>
而不是
< tbody>< ; tr>
如果您在标签Mozilla，Opera
和IE之间写了所有标记而没有空格，那么它们会为子节点提供相同的结果。
示例没有显示你想要做什么，如果你正在寻找一个
元素考虑使用getElementsByTagName并循环结果
而不是像getElementsByTagName一样循环遍历childNodes你需要在浏览器中获得与空白文本相同的结果
节点处理。
如果你真的对子节点感兴趣那么你需要测试
nodeType来决定如何处理节点，元素节点得到1
和3为文本节点。
-
Martin Honnen
http://JavaScript.FAQTs.com/
Here is the next child text node with white space, a line break.
IE ignores those white space text nodes which most authors insert to
have their markup more readable e.g. you have written
<tbody>
<tr>
and not
<tbody><tr>
If you wrote all markup without white space between tags Mozilla, Opera
and IE would give you the same result for the child nodes.
The example doesn''t show what you want to do, if you are looking for an
element consider using getElementsByTagName and loop through the result
instead of looping through childNodes as with getElementsByTagName you
get the same result in the browser independent of the white space text
node handling.
If you are really interested in the child nodes then you need to test
nodeType to decide what to do with a node, you get 1 for element nodes
and 3 for text nodes.
--
Martin Honnen
http://JavaScript.FAQTs.com/
在文章< 40 ******** @ olaf.komtel.net>中， ma ******* @ yahoo.de 开悟
us with ...
In article <40********@olaf.komtel.net>, ma*******@yahoo.de enlightened
us with...
如果你写的话标签之间没有空格的所有标记Mozilla，Opera
和IE会为你的子节点提供相同的结果。
哦，神圣的母亲。
这是谁的好主意？！？！
现在我要么用
getElementsByTagName交换可读代码，我没有''我想使用（太笨重），或者制作
不可读的代码。
*叹气*
我猜它'' s getElementsByTagName。我沉迷于白色空间。
谢谢！
我不会想到这一点。不是一百万年。
这个例子没有显示你想做什么，
If you wrote all markup without white space between tags Mozilla, Opera
and IE would give you the same result for the child nodes.
Oh, holy mother of God.
Whose bright idea was that?!?!
Now I either have to exchange readable code with the
getElementsByTagName, which I didn''t want to use (too clunky), or make
unreadable code.
*sighs*
I guess it''s getElementsByTagName. I''m addicted to white space.
Thanks!
I wouldn''t have ever thought of that. Not in a million years.
The example doesn''t show what you want to do,
我知道。完整的代码将替换（指定的）表格单元格，只需使用childNodes就可以更好地使用b $ b。完整的代码不是很容易看到这个问题，虽然它不是很大或什么的。
*抱怨*
这会将一行不错的代码更改为多行，以找到要更换的正确单元格。
*叹息*
哦，好吧。
-
-
~kaeli~
每个日历的日期都有编号。
http：//www.ipwebdesign。 net / wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
I know. The full code will replace a (specified) table cell, which would
have been much prettier just using the childNodes. The full code isn''t
as easy to see the problem with as this, though it not huge or anything.
*grumbles*
That''s gonna change one nice line of code into multiple lines to find
the right cell to replace.
*sigh*
Oh, well.
--
--
~kaeli~
Every calendar''s days are numbered.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
kaeli< ti ****** @ NOSPAM.comcast.net>写道：
[IE省略所有空白文本节点]
kaeli <ti******@NOSPAM.comcast.net> writes:
[IE omits all-whitespace text nodes]
哦，上帝的圣母。
那是谁的好主意？！？ ！
微软。像往常一样。
现在我要么用
getElementsByTagName交换可读代码，我不想使用它（太笨重），或者制作
不可读的代码。
*叹气*
或使用：
var T = document.getElementById（" tb"）;
for（var i = 0; i< T.rows.length; i ++）{
alert（T.rows [i]）;
}
我猜它是getElementsByTagName。我沉迷于白色空间。
表元素和行组元素（thead，tbody和tfoot）
都有一个行元素。它们内部的表行的集合。并且它是符合W3C DOM标准的* b $ b *和*适用于IE，因此没有理由不使用它。
我知道。完整的代码将替换（指定的）表格单元格，只需使用childNodes就可以更加漂亮。完整的代码并不像这样容易看到问题，虽然它不是很大或任何东西。
Oh, holy mother of God.
Whose bright idea was that?!?!
Microsoft. As usual.
Now I either have to exchange readable code with the
getElementsByTagName, which I didn''t want to use (too clunky), or make
unreadable code.
*sighs*
Or use:
var T = document.getElementById("tb");
for (var i=0; i<T.rows.length; i++) {
alert(T.rows[i]);
}
I guess it''s getElementsByTagName. I''m addicted to white space.
Both table elements and row-group elements (thead, tbody and tfoot)
have a "rows" collection of the table rows inside them. And it''s
W3C DOM compliant *and* works in IE, so no reason not to use it.
I know. The full code will replace a (specified) table cell, which would
have been much prettier just using the childNodes. The full code isn''t
as easy to see the problem with as this, though it not huge or anything.
表行也有一个细胞"集合，所以你可以访问第i行和
列j为：
T.rows [i] .cells [j]
祝你好运
/ L
-
Lasse Reichstein Nielsen - lr * @ hotpop.com
DHTML死亡颜色：< URL：http：//www.infimum.dk/HTML/rasterTriangleDOM.html>
''信仰没有判断只会降低精神神圣。''
Table rows also have a "cells" collection, so you can access row i and
column j as:
T.rows[i].cells[j]
Good luck
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
''Faith without judgement merely degrades the spirit divine.''
这篇关于Netscape和IE为表显示不同数量的子节点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
