'document.id' belgeleri ve DOM

Question

Mootools belgelerinde, Element ile ilgili olarak, Mootools API'sında herhangi bir başvuru bulamadığım document öğesinin semantik alanını yakalayamıyorum. Sadece DOM Api mi? Örneğin, $$ üç parametreyi kabul eder, bunların birincisi element'dir. Bir elemanı nasıl tanımlarım?

Ayrıca, dokümanlar bazı önerilerde bulunur: document.getElementById(‘foo’), document.id(‘foo’), $(‘foo’). Bu yüzden, document'un Mootools'un oldukça önemli bir parçası olduğunu anlıyorum, fakat klasik DOM API'sı ile nerede örtüştüğünü anlamıyorum, ne kadar uzatılmış ve böyle devam ediyor.

Answer 1

MooTools, Tür kavramı kavramına sahiptir. Türleri Yerlilerine (Date, Object) için özel nesneler ya üstünde ya Yerlilerine uzanan prototipleri (Array, Element, String, Function, Number, birkaç isim) ya da ekleyerek yöntemlerle inşa sağlamalarının vardır.

Öğe Türü (http://mootools.net/core/docs/1.5.1/Element/Element), HTMLElement etrafındaki soyutlamanın yanı sıra DOM arabiriminin tamamı olan HTMLInputElement gibi alt türlerdir.

document kendisi bir dereceye kadar Element devralmakta - onlar her zaman geçerli olmayabilir ama herhangi HTMLElement geçerli prototip yöntemleri yanı document üzerinde çağırmak için hazır olacaktır. Örneğin, addEvent çalışır ve mantıklıdır, ancak tween veya show vb.

en istenmeyen yan etkilere neden olabilir, çünkü zararlı olarak kabul edilir document.id

genişletme yerlileri anlamına varsayalım. Ek olarak, her tarayıcıda, eşitleme için HTMLElement prototipini aynı anda göstermez. Evergreen tarayıcılarda (IE 8 ve daha düşük okuma değil), HTMLElement'un değişmesi tamam, IE6-7'de (salt okunur) ve IE8'de değil, sadece bazı eleman türlerini genişletirken, diğerlerinin bağlantıya sahip olmaması gerekir. artırılmış prototip zinciri.

<div id="foo">foo</div> 

ve karşılık gelen bir nesne:

Yani, bu var hayal

var foo = document.getElementById('foo'); 

foo yapıcısı Element olduğunu ve foo.addEvent denir eğer foo prototip, Element.prototype olduğundan zincire bakacak, Element.prototype.addEvent yöntemine ulaşacak ve onu arayacaktır.

Ancak IE6,7,8'den dolayı, yukarıdakiler iyi çalışmayabilir veya hiç çalışmaz - MooTools devs, basit bir şey yaparak bu sorunu atmak için radikal bir yol seçmiştir: bu tarayıcılarda özellik arama zincirinin kapsamını kısaltmak.

Bu, Element.prototype nesnesindeki tüm yöntem ve özelliklere işaret eden foo nesnesinin kendisinde bir referans ayarlayarak yapılır.Eğer bu şekilde yapıyor düşünebilirsiniz

: foo proto zincirine erişimi yok bu yüzden bile

foo.addEvent = Element.prototype.addEvent.bind(foo); 

, hala yöntemini çağırmak mümkün olacak.

MooTools öğesi bir öğe nesnesini ilk kez geçirdiğinde, bu 'uzatma' olarak adlandırılır.

Yani, IE eğer bizim durumumuzda, yapacağın: elemanını geçerek, bu yöntemlerin referanslarla süslü alır Upon

foo = $(foo); // or document.id(foo); 

şimdi

burada var çağırabilir daha iyi bir örnek:

var foo = document.getElementById('foo'), bar; 

console.log(foo.hasOwnProperty('addEvent')); // false in all browsers 
try { 
    foo.addEvent('click', bar = function(){}); 
} 
catch(e){ 
    console.log(e); 
    foo = $(foo); 
    foo.addEvent('click', bar = function(){}); 
    console.log(foo.hasOwnProperty('addEvent')); // true in IE6,7,8 
} 

// by now it's already extended, so we can safely call it. 
foo.removeEvent('click', bar); 

ayrıca daha: sadece proto yöntemleri kullanmak etkinleştirmek document.id (hangi $ olacak takma ad) yapar, aynı zamandakurar Öğeyi tanımak için, daha sonra veri API'si aracılığıyla Element Storage'u etkinleştirmek için kullanılır (Element.prototype.store/retrieve/eliminate). Bu şekilde, Depolama nesnesi DOM'da tam olarak bir öğeye eşlenen benzersiz bir anahtara sahiptir, böylece bir şeyleri oraya yapıştırabilirsiniz - jQuery'nin .data API'siyle aynı şekilde uygulanır.

FINALLY, document.getElementById yalnızca bir öğe nesnesini alan JS api'dir. MooTools tarafından el değmemiş.

TL; document.id(mixed), MooTools ile çapraz tarayıcıda kullanılmak üzere öğeleri hazırlar ve depolamayı ayarlar.

Bir öğenin geçirilmesi, öğe nesnesini genişletir ve döndürür. Bir dizgeyi geçmek mümkünse kimliğe göre bir eleman bulur, ardından sonucu genişletir ve nesneyi döndürür.

document.createElement öğesinde bir öğe oluşturmak için new Element() yapıcısını ve ayrıca herhangi bir QSA veya DOM API'sinden edindiğiniz HTMLElement öğelerini de kullanabilirsiniz.