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から関数を使用してタグにアクセスできないという理論がありました。そこで、カスタム タグ (有効な html タグですが dd タグを含む) をタグに変更し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で試してみましたが、このバージョンはIE9だけでなくFFでも同じ結果をもたらします: http://jsfiddle.net/qWP2t/1/

IE のスクリプトの何が問題なのかを明確に指定していないため、これが意図した動作であるかどうかはわかりません。ただし、一般的に言えば、カスタム要素を導入するのではなく、HTML (および HTML5) で指定された要素に依存し、必要に応じてクラス名を使用してセマンティクスを追加します。

于 2012-07-17T08:03:59.703 に答える
1

<rr>and<dev>を HTML 要素 (おそらく class 属性) に置き換えます。

カスタム HTML は無効な HTML です。ガベージイン→ガベージアウト。

于 2012-07-17T08:05:01.723 に答える
0

IE (IE9 を含む) はカスタム要素を認識しません。はい、シナリオで実行可能な場合、 document.createElement() トリックは機能します。

マイクロソフトがこれを行う方法に関するデータについては、これをご覧ください。

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

于 2013-10-10T20:42:12.667 に答える
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 に答える