IE8中对DOM对象有特殊的处理吗？

发布于 2024-12-11 20:48:47 字数 335 浏览 0 评论 0原文

我声明了这个函数：

Object.prototype.append = Array.prototype.append = append = function( tag ){
alert( this )
...
}

它应该在 DOM 元素或对象数组之后附加“tag”元素。现在，当我在两个元素的数组之后调用它时 - 一切正常，我通过 alert 得到“[object HTMLDivElement,object HTMLDivElement]” thtown for，但是当它由单个 DOM 元素 IE8 调用时抛出该对象不支持此选项或方法，甚至警报也不会执行。

原文

I have this function declared:

Object.prototype.append = Array.prototype.append = append = function( tag ){
alert( this )
...
}

It supposed to append "tag" element after a DOM element or an array of objects.
Now, when I call it after an array of two elements - everything works well, I get "[object HTMLDivElement,object HTMLDivElement]" thtown by alert for, but when it's called by a single DOM element IE8 throws that the object does not support this option or method and even the alert is not executed.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

动次打次papapa 2024-12-18 20:48:47

DOM 元素不一定继承自 Javascript Object。你不能指望这一点。它可能在某些地方有效，但正如您所遇到的，它并非在所有地方都有效。

您可以在创建现有 DOM 对象后向其添加方法，但这有时会导致问题。像原型这样用于扩展内置对象的库正在远离这种行为，而像 jQuery 和 YUI 这样的库则完全避免它。

我建议您最好使用实用函数，而不是像 jQuery 那样使用附加 DOM 方法或包装对象。

回复收藏 0 原文

手长情犹 2024-12-18 20:48:47

您不应该期望 DOM 元素从内置 ECMAScript 构造函数继承属性，不仅因为它们在某些浏览器中不继承，而且因为没有什么可以说它们必须继承。

扩展内置原型也不好，因为它会扰乱 for..in 迭代，并且可能与内置方法冲突，特别是与像 append 这样的通用名称冲突。

编辑

我假设您正在做类似以下的事情（这就是实现重要的原因）：

Object.prototype.append = Array.prototype.append = append = function( tag ){

  alert(typeof this);  // object in browsers that support native inheritance for DOM objects

  if (typeof this == 'object') {
    // assume that object is a DOM element, create a tag element and append
    // it to `this`

  } else {
    // assume object is an array of DOM elements so create one tag element for
    // each and append it.
  }
}

window.onload = function() {
  var el = document.getElementById('foo');

  // Call append on a DOM element
  alert(el.append);  // function in Firefox
                     // undefined in IE
  if (el.append) el.append();

  // Call append on an Array
  var array = [el];
  alert(array.append);

  if (array.append) array.append();
}

第二部分在 IE 中工作，因为 append 被称为数组的方法，在第一种情况下它会失败，因为代码期望 DOM 元素继承自 Object.prototype，但事实并非如此。

You should not expect DOM elements to inherit properties from built-in ECMAScript constructors, not only becaue they don't in some browsers but because there is nothing to say that they must.

It is also not good to extend built-in prototypes as it messes with for..in iteration and may conflict with built-in methods, particularly with a common name like append.

Edit

I assume you are doing something like the following (which is why implementation is important):

Object.prototype.append = Array.prototype.append = append = function( tag ){

  alert(typeof this);  // object in browsers that support native inheritance for DOM objects

  if (typeof this == 'object') {
    // assume that object is a DOM element, create a tag element and append
    // it to `this`

  } else {
    // assume object is an array of DOM elements so create one tag element for
    // each and append it.
  }
}

window.onload = function() {
  var el = document.getElementById('foo');

  // Call append on a DOM element
  alert(el.append);  // function in Firefox
                     // undefined in IE
  if (el.append) el.append();

  // Call append on an Array
  var array = [el];
  alert(array.append);

  if (array.append) array.append();
}

The second part works in IE because append is called as a method of an array, it fails in the first case because the code expects a DOM element to inherit from Object.prototype, which it doesn't.

回复收藏 0 原文

风吹短裙飘 2024-12-18 20:48:47

javascript中Object.prototype代表[object object]，它是普通对象，Array.prototype代表Array。在你的情况下，你可以将一个元素附加到某个数组，在我看来，你使用类似 [XXX] 语法的东西，当你附加一个 DOM 元素时，它实际上调用 Array.prototype.append 方法。但作为单个 DOM 元素，DOM 元素是 [object HTMLDivElement]，而不是普通对象 [object object]，这就是为什么会出现错误。