'document.id' 文档和 DOM

Question

在 Mootools 文档中，关于 Element，我无法捕捉到 document 元素的语义区域，我在 Mootools Api 中找不到任何参考。只是 DOM Api?

例如$接受三个参数，第一个是element。我如何定义一个元素？

此外，文档提供了一些建议：document.getElementById(‘foo’)、document.id(‘foo’)、$(‘foo’)。所以我知道 document 是 Mootools 的一个非常重要的部分，但我不明白它与经典的 DOM API 在哪里重叠，它扩展了多远等等。

Answer 1

所以，MooTools 有类型的概念。类型是建立在自定义对象之上或通过扩展 Natives 原型（Array、Element、String、Function、Number 来命名一个few) 或将方法附加到 Natives (Date, Object).

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

document 本身在一定程度上继承自 Element - 任何 HTMLElement 上可用的原型方法也可用于调用 document，尽管它们可能并不总是适用.例如，addEvent 有效且有意义，但 tween 或 show 等无效。

Let's assume you mean document.id

扩展 natives 被认为是有害的，因为它会导致不必要的副作用。此外，并非每个浏览器都平等地公开 HTMLElement 原型以供修改。而在常青浏览器（阅读，不是 IE 8 和更低版本）中，HTMLElement 可以更改，在 IE6-7 中它不是（只读的）并且在 IE8 中，它只扩展某些类型的元素而其他元素有没有 link 到增强原型链。

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

<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 无法访问原链，它仍然可以调用该方法。

这种所谓的 'extending' 发生在 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 来识别元素，然后用于通过数据 API (Element.prototype.store/retrieve/eliminate) 启用 Element Storage。这样，Storage 对象就有一个唯一的键，它正好映射到 DOM 中的一个元素，所以你可以把东西放在那里——它与 jQuery 的 .data API.

最后，document.getElementById 只是 JS api 给你一个元素对象。 MooTools 未触及这一点。

TL;DR; document.id(mixed) 以跨浏览器的方式准备用于 MooTools 的元素并设置存储。

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

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

'document.id' 文档和 DOM

'document.id' documentation and the DOM

javascript

mootools