mootools中的.innerHTML和.set('html'，'')之间有什么区别?

编程入门行业动态更新时间:2024-10-26 01:25:34

本文介绍了mootools中的.innerHTML和.set('html'，'')之间有什么区别?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

要在我的网站上设置元素的html，我主要使用

$('elementId').innerHTML = "<p>text</p>";

通过mootools文档，我发现了以下示例:

$('myElement').set('html', '<div></div><p></p>');

这些之间有什么区别吗?我应该将.innerHTML更改为mootools方法，还是不起作用?

解决方案

第一个起作用的原因是-按照目前的说法-mootools中的$选择器(document.id)返回实际元素.在正常的浏览器中，此属性与document.getElementById()相同，并且element对象公开了其所有属性/属性供您编辑.

不使用.set的问题是:

当mootools 2.0(又名MILK)发布时，它将无法工作，因为它将像jQuery一样包装，并且选择器不会返回对象(mootools成为AMD，因此不会修改本机类型-元素，数组，数字，字符串，函数(也许！)-原型).
您无法将其链接.设置后，您可以:例如$('someid').set("html", "loading...").highlight();.
set重载-它可以通过传递对象来设置单个属性或多个属性.例如element.set({html: "hello", href: "#", events: boundObj});
查看 github/mootools/mootools-core/blob/master/Source/Element/Element.js#L936-942 -您可以传递数组作为参数，它将为您连接，这很容易使用多行字符串并确保IE中的性能

BBT粉丝打开了一个单独的主题:框架应该尝试阻止您/阻止您执行破坏浏览器的事情吗?

如果愿意，可以通过更改该设置器来添加不允许的元素Element.Properties.html.set = function() { var tag = this.get("tag"); ... check tag };-mootools不好吗?

mootools-默认情况下-不会尝试阻止您执行愚蠢的狗屎[tm] -这是您的责任:)尝试在IE中将元素的高度设置为负值. Fx类应该阻止您这样做吗?否.安装员应该阻止您吗?不会.不断检查您是否没有中断的足迹意味着在动画等性能至关重要的情况下，它将减慢一切.

To set the html of elements on my site, I use mostly

$('elementId').innerHTML = "<p>text</p>";

Looking through the mootools docs, I found this example given:

$('myElement').set('html', '<div></div><p></p>');

Is there any difference between these? Should I go through and change .innerHTML to the mootools method, or doesn't it make a difference?

解决方案

the reason why the first one works is because - as it stands - a $ selector (document.id) in mootools returns the actual element. this - in normal browsers - is identical to document.getElementById() and the element object exposes any and all of its attributes/properties for you to edit.

the problems with NOT using .set are:

when mootools 2.0 aka MILK gets released, it won't work as it will be wrapped like jQuery and the selector won't return the object (mootools is becoming AMD hence it won't modify native Types - Element, Array, Number, String, Function(maybe!) - prototypes).
you cannot chain this. with set you can: $('someid').set("html", "loading...").highlight();, for example.
set is overloaded - it can set either a single property or multiples by means of passing an object. eg, element.set({html: "hello", href: "#", events: boundObj});
look at github/mootools/mootools-core/blob/master/Source/Element/Element.js#L936-942 - you can pass an array as an argument and it will join it for you, this makes it easy to work with multi-line strings and ensures performance in IE

edit: the BBT fan has kind of opened a separate topic: should the framework try to block you / prevent you from doing things that break the browser?

if you want to, you can add disallowed elements by changing that setter Element.Properties.html.set = function() { var tag = this.get("tag"); ... check tag }; - isn't mootools great?

mootools - by default - will NOT try to prevent you from doing stupid shit [tm] - that's your responsibility :) try setting height on an element to a negative value in IE, for example. should the Fx class prevent you from doing that? No. Should the setter prevent you? No. The footprint of constant checks to see if you are not breaking means it will slow everything down in performance-critical cases like animations.