Question

我最近遇到了确定浏览器对某些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的值预计为真。令人惊讶的是，在Chrome，Safari和Opera上，价值是假的（不幸的是我没有加入Windows机器来检查IE对它的看法）。

根据DOM4 - Free Editor's Draft 2012年4月5日 [http://dom.spec.whatwg.org/#element]，孩子们应该成为Element对象原型的一部分。显然Chrome，Safari和Opera的Element对象不包含这样的方法！

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

Answer 1

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

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

Answer 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没有任何孩子，因为它不是元素，它是元素的原型。

Answer 3

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

According to QuirksMode，所有浏览器都支持children，除了Firefox 3（这对我来说很惊讶，因为它在我在该浏览器中测试时有效...），所以不需要测试这个属性。

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

3 个答案: