html - JavaScript 的 nextSibling 在非 IE 输出不了,怎么解决?或者用什么替代?

Question

带★那句,问题出在那里..

<p id="one">
    <p name="two">
        <p name="aaa">
            1111
        </p>
        <p id="two" name="bbb">
            2222
        </p>

        <p name="ccc">
            3333
        </p>

    </p>
</p>

<script>
        var obj=document.getElementById('two');
        console.log("***"+obj.nextSibling.name); //★★★★★这个在非IE怎么总是输出不了?
        console.log("***"+obj.childNodes[0].nodeValue); //2222
</script>

只要给我改好就行了,我会结合自己慢慢查,要是说理论我能会,我就不问了;
就像 一个老虎 ,你听别人介绍,你也不懂什么是老虎,弄一只老虎让你一看就知道了!

Answer 1

要用nextElementSibling，以及getAttribute方法：

var obj = document.getElementById('two');
if (obj.nextElementSibling) {
    console.log("***" + obj.nextElementSibling.getAttribute("name")); //★★★★★这个在非IE怎么总是输出不了?
} else {
    console.log("***" + obj.nextSibling.name);
}
console.log("***" + obj.childNodes[0].nodeValue); //2222

补充一下，我用的是Chrome浏览器，是不能使用.name获取name属性的：

<p id="one" name="ssas">
</p>
<script>
var o = document.getElementById("one");
console.log(o.name); //undefined
console.log(o.getAttribute("name")); //sass
console.log(navigator.userAgent);
//Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36
</script>

好吧，最后更新一下，找到原因了：因为p、p等元素是没有name属性的，当你加上了name属性的时候，就相当于给他使用setAttribute("name", "blablabla...")，这个时候使用对象obj的属性name（obj.name）是访问不到的，只能使用getAttribute方法。

另外你可以测试一下input标签，当中添加name属性，用obj.name就可以访问。

<input type="text" id="one" name="ssas">
</input>
<script>
var o = document.getElementById("one");
console.log(o.name); //sass
</script>

Answer 2

提示和注释
注释：Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而 Mozilla 不会这样做。因此，在下面的例子中，我们会使用一个函数来检查首个子节点的节点类型。
元素节点的节点类型是 1，因此如果首个子节点不是一个元素节点，它就会移至下一个节点，然后继续检查此节点是否为元素节点。整个过程会一直持续到首个元素子节点被找到为止。通过这个方法，我们就可以在 Internet Explorer 和 Mozilla 得到正确的方法。
提示：如需更多有关 IE 与 Mozilla 浏览器之间 XML DOM 的差异的内容，请访问我们的 DOM 浏览器 章节。

摘自 ：http://www.w3school.com.cn/xmldom/prop_n...

Answer 3

    <script>
            var obj=document.getElementById('two');
            if(obj.nextElementSibling){
                console.log("***"+obj.nextElementSibling.name);
            }else{
                console.log("***"+obj.nextSibling.name);
            }
    </script>