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> 

出力：

私は<dd>要素の内容と<rr>要素に<a>要素の内容を交換したいです。 （要素<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要素を追加して別のクラス属性を追加した後。私はまだ同じ問題に直面しています

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

：

<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スクリプトを修正しました。 IE（バージョン8）では動作しません。

IEとFirefoxの両方で動作するように変更することを提案する人はいますか？

Answer 1

私は最後の夜にコンピュータゲームをプレイしている間、私はアイデアを思い付きましたそれはあなたの問題を解決することができます。私が自分自身で試してみたところ、非有効なhtmlタグはhtmlオブジェクトとして作成されないため、DOMの関数を持つものにはアクセスできないという理論がありました。だから私は、有効なhtmlタグであるにもかかわらず、カスタムタグを含めてddタグをdivタグに変更し、識別子としてダミーのcssクラスを追加しました。 次の変更は、メソッドgetElementsByClass()を追加することでした。 IE8以上ではdocument.getElementsByClassName()が存在しないので、同じことをする関数を見つけたことを思い出しました.-関数を呼び出す際に異なる関数を参照しました。-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> 

をそして、カスタム要素を認識しない...それは仕事をして（でもIE9を含む）

Answer 2

私はjsfiddle上でそれを試してみましたが、このバージョンはFF上だけでなく、IE9に私のために同じ結果を与える： http://jsfiddle.net/qWP2t/1/

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

Answer 3

<rr>と<dev>をHTML要素（おそらくクラス属性）に置き換えます。

カスタムHTMLは無効なHTMLです。 →ゴミを出してください。

Answer 4

私があなたが間違っていた場所を見つけたと思います。

私のHTMLページにカスタム要素がいくつかあります。

があります。それがあなたが間違っていた場所です。

冗談です。私はカスタム要素について多くの経験はありませんが、IEは未知のタグをうまく扱っていないことを知っています。 HTML5の新しいタグは、IEで最初にスタイル指定することはできません。

この問題は、スタイルを設定する前にJavaScriptでタグのインスタンスを作成することで修正できます。多分これもあなたの問題を解決するでしょう。だから、あなたのスクリプトの先頭には、次のようになります。

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

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

（つまりはしかしうまくいくならば、私は実際には知りません。）

Answer 5

IEのようだ： これらの変更の結果は以下の通りです。 シナリオで実行可能な場合は、document.createElement（）トリックが機能します。それが何であるかを

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