Özel HTML öğelerini JavaScript kullanarak okuma IE içinde çalışmıyor

Question

HTML sayfamda bazı özel öğeler var. Üzerinde bazı değişiklikler yapmak için bir JavaScript yazdım.

İçinde bazı özel öğeler var. Bu elemanlar kasıtlı olarak eklenir.

Numune Kaynak: Gerektiğinde

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

Çıktı:

Ben <dd> elemanın içeriği ile <rr> elemanda <a> öğenin içeriğini değiştirmek istiyor.

JavaScript yazılı (. Elemanlar <rr>, <dd> ve <dev> özel elementlerdir):

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

Bu komut dosyası IE Firefox'ta iyi çalışıyor, ama değil.

Düzenleme:

HTML öğelerini ekleme ve farklı sınıf özelliklerini ekledikten sonra. Hala aynı sorunla karşı karşıya am

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

Javascript'i Modifiye. IE için çalışmıyor (Sürüm 8).

herhangi bir değişiklik o IE ve Firefox içinde çalışması için yapılması gereken önerebilir misiniz?

Answer 1

Geçen akşam bilgisayar oyunları oynamış olsa ben fikir geldi Bu problemi çözebilir. Kendi kendime denediğimde, geçerli olmayan html etiketlerinin bir html nesnesi olarak oluşturulmayacağı teorisini aldım, böylece DOM'den gelen işlevlere erişemezsiniz. Bu yüzden, özel etiketler -düzenli dd etiketini, geçerli bir html etiketi olan div etiketlerine dönüştürdüm ve bir tanımlayıcı olarak bir kukla css sınıfı ekledim. Yaptığım sonraki değişiklik, getElementsByClass() yöntemini eklemekti. IE8 ve daha eski için document.getElementsByClassName() bulunmadığından, aynı işlevi gören bir işlev bulmuştum - there işlevini çağırırken farklılıkları belirtmem.

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

Ve özel öğeleri tanımıyor ... işliyor (hatta IE9 dahil)

Answer 2

Ben jsfiddle üzerinde denedim ve bu versiyon IE9 FF yanı sıra benim için aynı sonucu verir: http://jsfiddle.net/qWP2t/1/

Bu açıkça belirtmedi olarak hedeflenen davranış olup olmadığından emin değilim IE'deki komut dosyasında sorun var. Bununla birlikte, genel olarak, özel öğeler tanıtmayacağım, aksine HTML (ve HTML5) tarafından belirtilenlere ve gerektiğinde daha fazla anlambilim eklemek için kullanım sınıfı isimlerine güvenmeyeceğim.

Answer 3

(muhtemelen bir sınıf özniteliği ile) HTML elemanları ile <rr> ve <dev> değiştirin.

Özel HTML geçersiz HTML'dir. Çöp İçinde → Çöp Out.

Answer 4

Sanırım yanlış gittiğiniz yeri tespit ettim.

benim HTML sayfasındaki bazı özel öğeleri var. Orada

. Yanlış gittiğin yer burası.

Sadece şaka yapıyorum. Özel öğelerle ilgili çok fazla deneyimim yok, ancak IE'nin bilinmeyen etiketlerle çok iyi anlaşılmadığını biliyorum. HTML5'teki yeni etiketler başlangıçta IE'de stil oluşturulamaz.

o sorun için

, sen bu verilerin stilini denemeden önce JavaScript etiketine bir örneğini oluşturarak tamir edebiliriz.Belki bu senin de sorununu çözebilir. Yani, Senaryonuzun üst şuna benzer:

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

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

(yani gerçi çalıştıkları sürece ben aslında bilmiyorum.)

Answer 5

IE görünüyor: bu değişikliklerin sonucu takip ediyor. Evet, document.createElement() hilesi, eğer senaryonuzda yapılabilirse işe yarar.

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