'document.id'文档和DOM

Question

在Mootools文档中,关于Element,我无法捕捉到document元素的语义区域,我在Mootools Api中找不到任何引用.它只是DOM Api吗？

例如,$接受三个参数,第一个是element.如何定义元素？

此外,该文件提供了一些建议:document.getElementById(‘foo’),document.id(‘foo’),$(‘foo’).所以我理解documentMootools是一个非常重要的部分,但我不明白它与经典DOM API重叠的地方,扩展到底有多远等等.

Answer 1

所以，MooTools有了类型的概念。类型是构建在自定义对象之上或通过扩展 Native 原型（Array、Element、String、Function、Number，仅举几例）或向 Native 附加方法（Date、Object）构建的哈希。

元素类型 ( http://mootools.net/core/docs/1.5.1/Element/Element ) 是DOM 接口的所有部分HTMLElement以及子类型的抽象。HTMLInputElement

document它本身在一定程度上继承了Element- 任何 HTMLElement 上可用的原型方法也可以调用document，尽管它们可能并不总是适用。例如，addEvent会起作用并且有意义，但tween或show其他不会。

我们假设你的意思是document.id

延长本地化被认为是有害的，因为它可能会导致不必要的副作用。此外，并非每个浏览器都HTMLElement平等地公开原型以进行修改。而在常青浏览器（读取，不是 IE 8 及更低版本）中，HTMLElement可以更改，而在 IE6-7 中则不能（只读），而在 IE8 中，它仅扩展某些类型的元素，而其他元素则没有指向增强的元素的链接。原型链。

所以，想象一下你有这个：

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

以及相应的对象：

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

由于 foo 的构造函数是 ，Element并且 foo 的原型是Element.prototype，因此如果您调用foo.addEvent它，它将查找链，到达Element.prototype.addEvent方法并调用它。

但由于 IE6、7、8，上述方法可能无法正常工作或根本无法工作 - MooTools 开发人员选择了一种激进的方法来解决这个问题，通过做一些简单的事情：缩短这些浏览器中属性查找链的范围。

这是通过在对象本身上实际设置一个foo指向该对象上的所有方法和属性的引用来完成的Element.prototype。

你可以考虑这样做：

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

因此，即使 foo 无法访问原始链，它仍然能够调用该方法。

这种所谓的“扩展”发生在 MooTools 第一次传递元素对象时。

所以，在我们的例子中，如果在 IE 中，你会这样做：

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

传递元素后，它会用您现在可以调用的方法的引用进行装饰

这是一个更好的例子：

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

更进一步：不仅document.id（$将别名为）启用 proto 方法的使用，它还设置一个Slick.uuid来识别该元素，然后用于Element Storage通过数据 API ( Element.prototype.store// retrieve)启用eliminate。这样，Storage 对象就有一个唯一的键，它映射到 DOM 中的一个元素，因此您可以将内容粘贴到那里 - 它与 jQuery 的.dataAPI 实现相同。

最后，document.getElementById只是 JS api 为您提供一个元素对象。MooTools 未触及这一点。

TL;博士; document.id(mixed)以跨浏览器的方式准备与 MooTools 一起使用的元素并设置存储。

传递元素会扩展并返回元素对象。如果可能的话，传递一个字符串通过 ID 查找元素，然后扩展结果并返回对象。

您还可以使用new Element()构造函数来创建元素document.createElement- 以及您可能从任何 QSA 或 DOM API 获得的任何 HTMLElement。