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

问题描述

问 题

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

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

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

    </div>
</div>

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

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

解决方案

要用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属性的：

<div id="one" name="ssas">
</div>
<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>

好吧，最后更新一下，找到原因了：因为div、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>

这篇关于html - JavaScript 的 nextSibling 在非 IE 输出不了,怎么解决?或者用什么替代?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！