0

我最近在确定浏览器对某些 DOM 功能的支持时遇到了问题。其中之一是 Element.children 功能，这仍然让我很头疼。我的代码中有以下行：

var NATIVE_CHILDREN = Element.prototype.hasOwnProperty('children');

它应该检查浏览器是否支持 Element.children -feature [https://developer.mozilla.org/en/DOM/Element.children]。

根据 MDN 和快速测试，所有主流浏览器都支持此功能。

在 Firefox 上的 Firebug 上，NATIVE_CHILDREN 的值预期为 true。令人惊讶的是，在 Chrome、Safari 和 Opera 上，该值是 false（不幸的是，我没有权限使用 Windows 来检查 IE 对它的看法）。

根据 DOM4 - Free Editor's Draft 5 April 2012 [http://dom.spec.whatwg.org/#element]，子元素应该是元素对象原型的一部分。显然 Chrome、Safari 和 Opera 的 Element 对象不包含这样的方法！

我曾尝试检查 HTMLCollection 和 Node 的原型（我还测试了 HTMLParagraphElement 和 HTMLBodyElement），但它们似乎都不包含名为“children”的方法（Firefox 除外）。如何让我的测试跨浏览器工作？我不想为此使用任何外部库，因为这是我自己的小库。

4

3 回答 3

2

那是因为一些引擎只children在元素创建时添加属性。Chrome 控制台中的快速测试表明：

Element.prototype.hasOwnProperty( 'children' ); //false
//however,
document.createElement( 'foo' ).hasOwnProperty( 'children' ); //true
//or even
!!document.createElement( 'foo' ).children; //true

非函数属性通常不会出现在 上prototype，原因很简单——它们还没有设置，如果设置它们也没有意义。Element.prototype没有任何子元素，因为它不是元素，它是元素的原型。

于 2012-06-23T18:27:56.133 回答
2

我认为此测试在 Chrome 上可能返回 false 的原因是您正在检查原型。这不是最好的方法，有几个原因：

  • 不同的浏览器可以（并且确实）使用原型的不同实现，例如在 IE 中无法访问某些原型。在这种情况下，我会说您的问题是 chrome 依赖于（非标准）__proto__属性而不是prototype. 我不记得什么时候了，但我在 chrome 上遇到了类似的问题，如果问题出现了，这就是问题的根源。

  • AFAIK 所有的浏览器都有一个子元素的属性，尽管在某些情况下它们的行为不同，所以我对检查这种属性的存在有一些疑问。

  • 如果您仍然想检查这个，为什么不使用document.body.hasOwnProperty('children')？在 FF、Chrome、Safari 和 IE 上返回 true。

于 2012-06-23T18:20:37.287 回答
1

检查if( 'children' in document.body)比乱用原型更安全。重要的是要注意引号，如果不是变量，children可能会被使用/创建......

根据 QuirksMode，除了 Firefox 3 之外的所有浏览器都支持children（这让我感到惊讶，因为当我在该浏览器中测试时它工作......），所以应该不需要测试这个属性。

于 2012-06-23T18:27:03.600 回答