使用JavaScript读取自定义HTML元素在IE中不起作用

Question

我的HTML页面中有一些自定义元素.为了对它做一些修改,我写了一个JavaScript.

它有一些自定义元素.这些元素是有意添加的.

样本来源:

<div>       
        <br />
     <a name="IDATLQHE"></a>
    <h2 class="subhead" xmlns="">
    <dev>
        <dd>
            <span>abcd</span>
        </dd>

        <rr>
            <span>
                    <a title="google" href="http://google.com">google.com</a>
            </span>
       </rr>                    
    </dev>
    </h2>       
</div>

需要的输出:

我想用<a>元素的内容替换元素中<rr> 元素的内容<dd>.(元素<rr>,<dd>并且<dev>是自定义元素.)

JavaScript编写:

<script type="text/javascript">
 var devs = document.getElementsByTagName('dev');
for(var i = 0, len = devs.length; i < len; i++)
{
    var dev = devs[i],
        h2 = dev.getElementsByTagName('rr'),
        h3 = dev.getElementsByTagName('dd');
    if(h2.length === 1)
    {
        var aa= h2[0],
        aaa=aa.getElementsByTagName('a');
        if(h2.length === 1 && h3.length === 1)
        {
            aaa[0].innerHTML = h3[0].innerHTML;
            h3[0].innerHTML=null;
        }
    }
}
</script>

这个脚本在Firefox中工作正常,但在IE中却没有.

编辑:

添加HTML元素并添加不同的类属性后.

<div>       
            <br />
         <a name="IDATLQHE"></a>
        <h2 class="subhead" xmlns="">
         <div class="dummy">
             <div class="dummyy">
                <span>abcd</span>
            </div>

            <div class="dummyyy">
                <span>
                        <a title="google" href="http://google.com">google.com</a>
                </span>
          </div>                
        </div>
        </h2>       
    </div>

修改过的Java脚本:

  <script type="text/javascript">
    var divs = document.getElementsByClassName('dummy');
    for(var i = 0, len = divs.length; i < len; i++)
    {
        var div = divs[i],
        h2 = div.getElementsByClassName('dummyyy'),
        h3 = div.getElementsByClassName('dummyy');
        if(h2.length === 1)
        {
            var aa= h2[0],
            aaa=aa.getElementsByTagName('a');
            if(h2.length === 1 && h3.length === 1)
            {
                aaa[0].innerHTML = h3[0].innerHTML;
                h3[0].innerHTML=null;
            }
        }
    }

我仍然面临同样的问题.它不适用于IE(版本8).

任何人都可以建议进行更改以使其在IE和Firefox中都能正常工作吗？

Answer 1

当我昨晚玩电脑游戏时，我想到了可以解决你的问题的想法。当我自己尝试时，我得到了这样的理论：无效的 html 标签不会被创建为 html 对象，因此您无法使用 DOM 中的函数访问这些标签。因此，我将自定义标签（包括 dd 标签，尽管它是有效的 html 标签）更改为div标签，并添加了一个虚拟 css 类作为标识符。我所做的下一个更改是添加函数getElementsByClass()方法。因为document.getElementsByClassName()IE8 及更早版本不存在，所以我记得我找到了一个具有相同功能的函数 - 请注意调用该函数的不同之处 -那里。这些变化的结果如下：

   <script type="text/javascript">
    function test() 
    {
        var devs = getElementsByClass('dev');
        for(var i = 0, len = devs.length; i < len; i++)
        {
            var h2 = getElementsByClass('rr', devs[i]);
            var h3 = getElementsByClass('dd', devs[i]);
            if(h2.length === 1)
            {
                aaa=h2[0].getElementsByTagName('a');
                if(h2.length === 1 && h3.length === 1)
                {
                    aaa[0].innerHTML = h3[0].innerHTML;
                    h3[0].innerHTML = "";
                }
            }
        }
    }

    function getElementsByClass( searchClass, domNode, tagName) { 
        if (domNode == null) domNode = document;
        if (tagName == null) tagName = '*';
        var el = new Array();
        var tags = domNode.getElementsByTagName(tagName);
        var tcl = " "+searchClass+" ";
        for(i=0,j=0; i<tags.length; i++) { 
            var test = " " + tags[i].className + " ";
            if (test.indexOf(tcl) != -1) 
                el[j++] = tags[i];
        } 
        return el;
    }
    </script>

而且似乎确实有效......