الفرق بين المراجعتين ل"JavaScript/ParentNode/children"

مراجعة 18:38، 17 مارس 2018

تُعيد الخاصيّة children القابلة للقراءة فقط والمُعرّفة على الواجهة ParentNode كائنا من النّوع HTMLCollection الذي يحتوي على جميع العناصِرِ الأولاد الخاصّة بالعقدة التي استُدعَت عليها.

البنية العامة

var children = node.children;

القيمة

القيمة المُعادة عبارة عن كائن من النّوع HTMLCollection والذي هو مجموعة حيّة ومُرتّبة من عناصر DOM الذين هم أولاد العقدة. يُمكنك الوصول إلى العقد الأولاد كل على حدة في المجموعة عبر استعمال إمّا التّابع item() على المجموعة أو باستعمال طريقة مصفوفات جافاسكربت.

إن لم يكن للعُقدة أية عناصِرَ أولاد، فستكون القائمة children فارغة بقيمة طول length تُساوي 0.

مثال

var foo = document.getElementById('foo');
for (var i = 0; i < foo.children.length; i++) {
    console.log(foo.children[i].tagName);
}

إضافة لدعم المتصفحات غير المدعومة

الشيفرة التّالية تقوم بالكتابة فوق الكائن children الذي يُعتبر كائنا من النّوع prototype وتُضيف دعم كلّ من Document وDocumentFragment لمُتصفّحي IE9 وSafari. لكنّه يُرجع مصفوفة عوضا عن مجموعة من النّوع HTMLCollection.

;(function(constructor) {
    if (constructor &&
        constructor.prototype &&
        constructor.prototype.children == null) {
        Object.defineProperty(constructor.prototype, 'children', {
            get: function() {
                var i = 0, node, nodes = this.childNodes, children = [];
                while (node = nodes[i++]) {
                    if (node.nodeType === 1) {
                        children.push(node);
                    }
                }
                return children;
            }
        });
    }
})(window.Node || window.Element);

دعم المتصفحات

الميزة	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1	نعم	3.5	9	10	4
الدعم على كلّ من `Document` و`DocumentFragment` (ميّزة تجريبيّة)	29	؟	25	لا	16	لا
الدعم على `SVGElement` (ميّزة تجريبيّة)	نعم	لا	نعم	لا	؟	لا

انظر أيضًا

الواجهة ParentNode والواجهة ChildNode
أنواع الكائنات التي تُطبّق هذه الواجهة: Document وElement وDocumentFragment
Node.childNodes

مصادر ومواصفات

مواصفة [DOM https://dom.spec.whatwg.org/#dom-parentnode-children].

@@ سطر 12: / سطر 12: @@
 إن لم يكن للعُقدة أية عناصِرَ أولاد، فستكون القائمة <code>children</code> فارغة بقيمة طول <code>length</code> تُساوي <code>0</code>.
-===مثال===
+==مثال==
 <syntaxhighlight lang="javascript">
 var foo = document.getElementById('foo');