关于DOM子节点,父节点的问题?

在输出子节点内容中,无法实现我想要的结果,请帮忙看下哪儿有问题了。

<!doctype html>
<html lang="zh">
     <head>
        <meta charset="UTF-8">
        <meta name="Generator" content="EditPlus®">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title></title>
        <style type="text/css"></style>
        <script type="text/javascript"></script>
    </head>

    <body>
        <ul id='con'>
            <li id='china'>CHINA
                <ul>
                    <li id='sx'>陕西</li>
                    <li>北京</li>
                    <li>天津</li>
                    <li>广东</li>
                </ul>
            </li>
            <li>UK</li>
            <li>US
                <ul>
                    <li>new York</li>
                    <li>Washington</li>
                    <li>Chicago</li>
                    <li>Houston</li>
                </ul>
            </li>
        </ul>

        <script type='text/javascript'>
            var ele = document.getElementById('sx');//获取id为sx的元素
            var par = ele.parentNode.parentNode.parentNode.lastChild;//根剧ele元素访问其祖节点(向上三层),然后访问祖节点的最后一个子节点

            var child = par.childNodes;//获取最后一个子节点的全部子节点
            var ch;
            for(var i=0;i<child.length;i++){
                ch = child[i].childNodes;
                for(var j=0;j<ch.length;j++){
                    document.write(ch[j].nodeValue);
                }
            }
        </script>
    </body>
</html>

想要输出
new York
Washington
Chicago
Houston
这四项,请问如何实现?我的代码哪儿有问题了?

阅读 1.4k
1 个回答

1.parentNode.lastChild这有问题。可改为parentNode.lastElementChild
或者将

                </ul>
            </li>
        </ul>

改为

                </ul>
            </li></ul>

因为lastChild会获取到文本节点就是</li></ul>之间的空白换行。
2.var child = par.childNodes这个,child其实是

<li>US
    <ul>
        <li>new York</li>
        <li>Washington</li>
        <li>Chicago</li>
        <li>Houston</li>
    </ul>
</li>

子节点1:是US文本节点,子节点2是ul,子节点3是最后</ul></li>之间的空白换行。
然后改怎么改应该清楚了吧~~
可以在查一下节点的分类和lastChild等这些获取子节点的方法,所能获取的类型和范围。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏