'document.id' documentation and the DOM

'document.id' documentation and the DOM

本文关键字：the DOM and id document documentation      更新时间：2023-09-26

在Mootools文档中，关于Element，我无法捕获document元素的语义区域，因此我无法在Mootools Api中找到任何引用。它只是DOM Api吗?

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

进一步，文档提供了一些建议:document.getElementById(‘foo’), document.id(‘foo’), $(‘foo’)。所以我理解document是Mootools的一个非常重要的部分，但我不明白它与经典DOM API重叠的地方，它扩展了多远等等。

所以，MooTools有类型的概念。类型是建立在自定义对象之上的哈希值，或者通过扩展本机的原型(Array, Element, String, Function, Number，仅举几例)，或者将方法附加到本机(Date, Object)。

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

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

假设你指的是document.id

扩展本机被认为是有害的，因为它可能导致不必要的副作用。此外，并不是每个浏览器都同样公开HTMLElement原型以供修改。然而在常绿浏览器(可读，而不是IE8或更低版本)中，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 ($将别名)启用原型方法使用，它还设置了一个Slick.uuid来识别元素，然后通过数据API (Element.prototype.store/retrieve/eliminate)用于启用Element Storage。这样，存储对象有一个唯一的键，映射到DOM中的一个元素，这样你就可以把东西粘在那里——它的实现与jQuery的.data API相同。

最后，document.getElementById只是JS api，让你得到一个元素对象。

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

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

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

相关文章：