getElementsByTagName查找节点的问题


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>找错</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">
</style>
</head>
    <body>
        <div id="banner">
            <p>p1</p>
            <p>p2
                <span>
                    <p>我是span下面的P1</p>
                    <p>我是span下面的P2</p>
                </span>
            </p>
            <span>span</span>
            <div>div子</div>
        </div>
        <div>
            第3个
        </div>
        <script type="text/javascript">
            function t1(){
                var find_id_banner = document.getElementById('banner');
                var find_tag_p = find_id_banner.getElementsByTagName('p');
                var find_tag_span = find_tag_p[1].getElementsByTagName('span');
                var find_tag_span_p = find_tag_span[0].getElementsByTagName('p');
                alert(find_tag_span_p.length);
            }
        </script>        <p>
            <input type="button" value="查找" onclick="t1();" />
        </p>    </body>
</html>
这上面是代码，为什么火狐，chrome，IE10浏览器alert出来的find_tag_span_p.length的长度是0？但IE6返回的是2，这是浏览器的不兼容吗？如果不兼容的话，我该用什么办法来查找span下面的p节点？JavaScript

解决方案 »

  1.   

    按规范 p与div不一样，P元素是不能包含块级元素（包括P自身）的。
    所以你直接查看find_tag_p[1].innerHTML　只能看到
    p2
                    <span>
                        </span> 
    span下面的p　火狐，chrome，IE10等现代点的浏览器自动修正了去掉了内部的p，ie6这种远古浏览器则不会修正这个不规范的地方。
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
    <head>
    <title>找错</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    <style type="text/css">
    </style>
    </head>
        <body>
            <div id="banner">
                <div>p1</div>
                <div>p2
                    <div>
                        <div>我是span下面的P1</div>
                        <div>我是span下面的P2</div>
                    </div>
                </div>
                <span>span</span>
                <div>div子</div>
            </div>
            <div>
                第3个
            </div>
            <script type="text/javascript">
                function t1(){
                    var find_id_banner = document.getElementById('banner');
                    var find_tag_p = find_id_banner.getElementsByTagName('div');
                    var find_tag_span = find_tag_p[1].getElementsByTagName('div');
                    var find_tag_span_p = find_tag_span[0].getElementsByTagName('div');
                    alert(find_tag_span_p.length);
                }
            </script>
     
            <p>
                <input type="button" value="查找" onclick="t1();" />
            </p>
     
        </body>
    </html>
    可能是因为你在span下加p导致的吧 貌似块级元素 行级元素什么的  你看看 
      

  3.   

    我觉得应该是标准问题，因为p不能套入span这种标签里[行内标签不能套块标签]。
    你应该先写出适合w3c验证的html结构先。