6

我的 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 中都可以工作吗？

4

5 回答 5

2

当我昨晚玩电脑游戏时，我想出了可以解决你问题的想法。当我自己尝试时，我得到了这样的理论，即不会将无效的 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>

而且似乎确实有效...

于 2012-07-18T12:30:44.553 回答
1

我在 jsfiddle 上试过，这个版本在 FF 和 IE9 上给我同样的结果：http: //jsfiddle.net/qWP2t/1/

我不确定这是否是预期的行为，因为您没有明确指定 IE 中的脚本有什么问题。不过一般来说，我不会引入自定义元素，而是依赖 HTML（和 HTML5）指定的元素，并在需要时使用类名来添加更多语义。

于 2012-07-17T08:03:59.703 回答
1

用 HTML 元素替换<rr>和<dev>（可能用类属性）。

自定义 HTML 是无效的 HTML。垃圾进→垃圾出。

于 2012-07-17T08:05:01.723 回答
0

我想我已经发现你哪里出错了。

我的 HTML 页面中有一些自定义元素。

那里。那就是你出错的地方。

只是在开玩笑。我对自定义元素没有太多经验，但我知道 IE 不能很好地处理未知标签，例如 HTML5 中的新标签最初无法在 IE 中设置样式。

对于该问题，您可以通过在 JavaScript 中创建标记实例来解决它，然后再尝试对其进行样式设置。也许这也可以解决您的问题。因此，您的脚本顶部将如下所示：

<script type="text/javascript">
    document.createElement('dd');
    document.createElement('dev');
    document.createElement('rr');

    var devs = document.getElementsByTagName('dev');

（我实际上不知道这是否可行。）

于 2012-07-17T08:07:42.440 回答
0

IE（甚至包括 IE9）不识别自定义元素。是的，如果在您的场景中可行，则 document.createElement() 技巧有效。

有关 Microsoft 如何希望您执行此操作的数据，请查看以下内容：

http://ajaxian.com/archives/adding-custom-tags-to-internet-explorer-the-official-way

于 2013-10-10T20:42:12.667 回答