关于IE里的nextSibling

最新推荐文章于 2021-06-14 22:11:55 发布

weixin_34008805

最新推荐文章于 2021-06-14 22:11:55 发布

阅读量125

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/oliword/p/4554934.html

本文介绍了一种在JavaScript中使用nextSibling属性时遇到的问题及解决方案。点击特定元素时，期望获取到下一个同级元素，但实际获取的是文本节点。通过遍历解决了此问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <script>
        var shq = {}
        shq.cmenu = function (e) {
            var e = window.event ? window.event.srcElement : e.target;
            if (/a/i.test(e.tagName)) {
                alert(e.parentNode.nextSibling.nodeType); // 3  text
                e.parentNode.nextSibling.innerHTML = e.innerHTML;

                e.blur();
            }
        }
    </script>
    <div id="div1" onclick="shq.cmenu(event)">
        <a href="#">特色</a>
    </div>
    <div id="div2"></div>

系统环境:win8,ie11

问题：nextSibling取得当前节点同一级别的下一个节点，没有成功。

过程描述：当点击【特色】时，div2的innerHtml没有变成【特色】
调试时发现e.parentNode.nextSibling不是下一个div而是#text，nodetype等于3.

个人得出的结论：不知道对不对，现在结果是这样。

div1.nextSibling.nextSibling才是div2。

当然这种做法不恰当，所以改成下面这样。

    <script>
        var shq = {}
        var nNode = {}
        shq.cmenu = function (e) {
            var e = window.event ? window.event.srcElement : e.target;
            if (/a/i.test(e.tagName)) {
                //alert(e.parentNode.nextSibling.nodeType); // 3  text
                nNode=e.parentNode.nextSibling;
                while(nNode.nodeType!=1){
                    nNode=nNode.nextSibling;
                }
                nNode.innerHTML = e.innerHTML;

                e.blur();
            }
        }
    </script>
    <div id="div1" onclick="shq.cmenu(event)">
        <a href="#">特色</a>
    </div>
    <div id="div2"></div>