Javascript - 确定对 Element.children 功能的支持答案

【问题标题】：Javascript - Determining support for Element.children featureJavascript - 确定对 Element.children 功能的支持
【发布时间】：2012-06-25 16:11:35
【问题描述】：

我最近在确定浏览器对某些 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 除外）。如何让我的测试跨浏览器工作？我不想为此使用任何外部库，因为这是我自己的小库。

【问题讨论】：

非常感谢大家帮助我！我不知道原型的问题。感谢您指出检查对这个属性的支持实际上是相当愚蠢的=P

标签： javascript dom browser cross-browser

【解决方案1】：

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

不同的浏览器可以（并且确实）使用不同的原型实现，例如在 IE 中无法访问某些原型。在这种情况下，我会说您的问题是 chrome 依赖（非标准）__proto__ 属性而不是prototype 的结果。我不记得什么时候了，但我在 chrome 上遇到了类似的问题，如果问题出现了，这就是问题的根源。
AFAIK 所有浏览器的元素都有一个子属性，尽管在某些情况下它们的行为不同，所以我对检查这种属性的存在的使用有些怀疑。
如果你还想检查这个，为什么不使用document.body.hasOwnProperty('children')？在 FF、Chrome、Safari 和 IE 上返回 true。

【讨论】：

【解决方案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 没有任何子元素，因为它不是元素，而是元素的原型。

【讨论】：

【解决方案3】：

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

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

【讨论】：