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

Javascript - Determining support for Element.children feature

本文关键字：children 功能 支持 Element Javascript      更新时间：2023-09-26

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

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 - 自由编辑草案 2012 年 4 月 5 日 [http://dom.spec.whatwg.org/#element]，儿童应该是 Element 对象原型的一部分。显然，Chrome，Safari和Opera的Element对象不包含这样的方法！

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

我认为

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

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

  • AFAIK 所有浏览器的元素都有一个 child 属性，尽管它们在某些情况下的行为不同，所以我对检查此类属性是否存在的使用有些怀疑。

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

这是因为某些引擎仅在创建元素时对children属性进行打耳光。Chrome 控制台中的快速测试显示：

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

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

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

根据QuirksMode的说法，除Firefox 3之外的所有浏览器都支持children（这对我来说是一个惊喜，因为我在该浏览器中进行测试时它可以工作......），因此不需要测试此属性。

相关文章：