javascript - 关于DOM子节点，父节点的问题？-PHP中文网问答

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

<!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)

大家讲道理2017-04-11 09:46:04 1楼

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

                </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等这些获取子节点的方法，所能获取的类型和范围。

赞 +0

添加回复