SORU
30 NİSAN 2012, PAZARTESİ


en iyi yolu alt düğümler için

İyi olan JavaScript ilk çocuk herhangi bir elemandan elemana almak için çeşitli yöntemler sunar... ama merak ediyorum? En iyi, yani en uyumlu çapraz tarayıcı, en hızlı, en kapsamlı ve davranışlarına gelince tahmin edilebilir. Yöntemler listesi diğer adları: olarak kullanıyorum özellikleri/

var elem = document.getElementById('container');
var child = elem.children[0];
var child = elem.firstElementChild;//== children[0]

Bu her iki durumda çalışır:

var child = elem.childNodes[0];//or childNodes[1], see below

Bu form, div veya yineleme durumda. Metin öğeleri karşılaşma ihtimalim varsa:

var child = elem.childNodes;//treat as Nodelist
var child = elem.firstChild;

Dışarı firstChild Nodelist kullanır ** 9, firstElementChild çalışma olarak kullanır children. MDN başvurusu üzerine bu varsayım kurdum:

childNode öğesi değil eğer yok düğüm, ya da boş ilk alt öğe için bir referanstır.

Sanırım, açısından hız farkı varsa, olacak bir sonraki hiçbir şey, ondan beri firstElementChild etkili bir başvuru için children[0] children nesne zaten hafıza zaten.

Bana da at ne yapar childNodes nesnedir. Bir tablo bir form bakmak, eleman almak için kullandım. children tüm form listeler süre elemanları, childNodes de html kodu boşluk vardır gibi görünüyor:

console.log(elem.childNodes[0]);
console.log(elem.firstChild);

iki günlük <TextNode textContent="\n ">

console.log(elem.childNodes[1]);
console.log(elem.children[0]);
console.log(elem.firstElementChild);

Tüm günlük <input type=""... Nasıl yani? metin Bir nesne beni "ham", " DOM yapışıyor ise HTML kodu,, ama childNodes elemanı her iki seviyede de çalışıyor görünüyor. çalışmaya izin verecek anlarım

Geri dönmek için benim ilk soru: benim tahminime göre: eğer istediğim en kapsamlı nesne, childNodes yol gitmek, ama çünkü bu kadar kapsamlı, bu olmayabilir en öngörülebilir açısından iade elemanı istiyorum/bekliyoruz her an. Çapraz tarayıcı desteği de yanılıyor olabilirim ama bu durumda bir meydan okuma olarak kanıtlamak olabilir.

Herkes elindeki nesne arasındaki ayrımı netleştirmek olabilir? Eğer bir hız farkı, ancak ihmal varsa, bilmek de istiyorum. Eğer bu yanlış görüyorum, beni eğitmek için çekinmeyin :-).

PS: evet, bu tür şeyler ile uğraşmak istiyorum bu yüzden lütfen, lütfen, JavaScript seviyorum. cevap 'bu' benim aradığım şey, hiçbir jQuery tag dolayısıyla değildir. jQuery ile ilgilenir gibi

CEVAP
30 NİSAN 2012, PAZARTESİ


Sesleri çok düşünüyorsun gibi. Yaptığın gözlem arasındaki fark childNodes children, ki childNodes içeren tüm düğümleri içeren metin düğümleri oluşan tamamen boşluk, süre children bir koleksiyon sadece alt düğümleri vardır elemanları. İşte hepsi bu kadar.

Farkında olmak için bir kaç sorunu vardır ya da koleksiyon hakkında hiçbir şey tahmin edilemez

  • YANİ <= 8 diğer tarayıcılar yaparken beyaz childNodes uzay-sadece metin düğümleri vardır
  • YANİ <= 8 yorum içeren diğer tarayıcıları elemanları varken children içinde düğüm

children, firstElementChild ve sadece arkadaş kolaylıklar, DOM elemanları sadece sınırlı süzülmüş bir görünüm sunacak.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • AutoHotkey Tutorials

    AutoHotkey T

    29 Mayıs 2010
  • jbignacio

    jbignacio

    13 Mart 2006
  • Kai Moosmann

    Kai Moosmann

    5 Temmuz 2006