我的 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 中都能正常工作吗？

最佳答案

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

   <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>

而且看起来确实有效...

关于javascript - 使用 JavaScript 读取自定义 HTML 元素在 IE 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11518185/