javascript重置(base层)(。。。。不完整)

1、nextSibling浏览器兼容问题

<ul>
        <li id="item1"></li>
        <li id="item2"></li>
        <li id="item3"></li>
</ul>
var item1=document.getElementById("item1");
alert(item1.nextSibling.id);
alert(item1.nextSibling.nodeType);
alert(document.getElementsByTagName("ul")[0].childNodes.length);

ie8,ie7弹出的内容依次是:item2,1,3

firefox,ie9+,chrome弹出的内容依次是:undefined,3,7 原因是:nodeType=3表示是文本节点,而不是1元素节点。firefox浏览器将包括空白、换行等文本信息也当做childNodes中的一员,而ie8会忽略它,只将DOM节点当做是childNodes的一员。

解决方案一:缩进HTML(不推荐)

<ul><li id="item1"></li><li id="item2"></li><li id="item3"></li></ul>

解决方案二:

    function getNextNode(node) {
        node = typeof node == "string" ? document.getElementById(node) : node;
        var nextNode = node.nextSibling;
        if (!nextNode) return null;
//        if(!document.all){      //不能区分出ie9,ie10
        if ($.support.leadingWhitespace) {
            while (true) {
                if (nextNode.nodeType == 1) {
                    break;
                }  //如果下一个节点是元素节点则返回
                else {
                    if (nextNode.nextSibling) {    //如果下下个节点存在
                        nextNode = nextNode.nextSibling;
                    } else {
                        break;
                    }
                }
            }
        }
        return nextNode;
    }
    var nextNode = getNextNode("item1");
    alert(nextNode.id);
    var nextNode2 = getNextNode("item2");
    alert(nextNode2.id);

 

posted @ 2015-03-12 16:31  psycho_z  阅读(241)  评论(0编辑  收藏  举报