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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(إضافة الصّفحة)
 
 
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:<code>ParentNode.firstElementChild</code>}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:<code>ParentNode.firstElementChild</code>}}</noinclude>
تُعيد الخاصيّة <code>ParentNode.firstElementChild</code> القابلة للقراءة فقط أول عنصِرٍ إبن للكائن، أو القيمة <code>null</code> إن لم يكن هناك أي عنصرٍ إبن.
+
تُعيد الخاصيّة <code>ParentNode.firstElementChild</code> القابلة للقراءة فقط أول عنصِرٍ ابن للكائن، أو القيمة <code>null</code> إن لم يكن هناك أي عنصرٍ ابن.
  
 
==البنية العامة==
 
==البنية العامة==
سطر 23: سطر 23:
  
 
==إضافة لدعم المتصفحات غير المدعومة ==
 
==إضافة لدعم المتصفحات غير المدعومة ==
الشيفرة التّالية تقوم بالكتابة فوق الكائن <code>firstElementChild</code> الذي يُعتبر كائنا من النّوع <code>prototype</code> وتُضيف دعم كلّ من <code>Document</code> و<code>DocumentFragment</code> لمُتصفّحي IE9 وSafari. لكنّها تُرجع مصفوفة عوضا عن مجموعة من النّوع <code>HTMLCollection</code>.
+
الشيفرة التّالية تكتب فوق الكائن <code>firstElementChild</code> الذي يعدّ كائنًا من النّوع <code>prototype</code> وتُضيف دعم كلّ من <code>Document</code> و<code>DocumentFragment</code> لمُتصفّحي IE9 وSafari. لكنّها تعيد مصفوفةً عوضًا عن مجموعة من النّوع <code>HTMLCollection</code>.
  
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
سطر 76: سطر 76:
 
* أنواع الكائنات التي تُطبّق هذه الواجهة: <code>[[JavaScript/Document|Document]]</code> و<code>[[JavaScript/Element|Element]]</code> و<code>[[JavaScript/DocumentFragment|DocumentFragment]]</code>
 
* أنواع الكائنات التي تُطبّق هذه الواجهة: <code>[[JavaScript/Document|Document]]</code> و<code>[[JavaScript/Element|Element]]</code> و<code>[[JavaScript/DocumentFragment|DocumentFragment]]</code>
  
 
+
== مصادر ومواصفات ==
==مصادر ومواصفات==
 
 
* مواصفة [https://dom.spec.whatwg.org/#dom-parentnode-firstelementchild DOM]. فرّقت هذه المواصفة الواجهة <code>ElementTraversal</code> إلى كلّ من الواجهة <code>ChildNode</code> والواجهة <code>ParentNode</code>، هذه الخاصيّة معرّفة الآن على الواجهة الأخيرة. تُطبّق كلّ من الواجهة <code>Document</code> والواجهة <code>DocumentFragment</code> الواجهتين الجديدتين.
 
* مواصفة [https://dom.spec.whatwg.org/#dom-parentnode-firstelementchild DOM]. فرّقت هذه المواصفة الواجهة <code>ElementTraversal</code> إلى كلّ من الواجهة <code>ChildNode</code> والواجهة <code>ParentNode</code>، هذه الخاصيّة معرّفة الآن على الواجهة الأخيرة. تُطبّق كلّ من الواجهة <code>Document</code> والواجهة <code>DocumentFragment</code> الواجهتين الجديدتين.
 
* مواصفة [https://dom.spec.whatwg.org/#dom-parentnode-firstelementchild Element Traversal Specification].
 
* مواصفة [https://dom.spec.whatwg.org/#dom-parentnode-firstelementchild Element Traversal Specification].

المراجعة الحالية بتاريخ 02:46، 18 مارس 2018

تُعيد الخاصيّة ParentNode.firstElementChild القابلة للقراءة فقط أول عنصِرٍ ابن للكائن، أو القيمة null إن لم يكن هناك أي عنصرٍ ابن.

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

var element = node.firstElementChild;

مثال

<ul id="foo">
  <li>القيمة الأولى</li>
  <li>القيمة الثّانية</li>
  <li>القيمة الثّالثة</li>
</ul>

<script>
var foo = document.getElementById('foo');
// تُسجّل القيمة الأولى
console.log(foo.firstElementChild.textContent);
</script>

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

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

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

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

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

انظر أيضًا

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

  • مواصفة DOM. فرّقت هذه المواصفة الواجهة ElementTraversal إلى كلّ من الواجهة ChildNode والواجهة ParentNode، هذه الخاصيّة معرّفة الآن على الواجهة الأخيرة. تُطبّق كلّ من الواجهة Document والواجهة DocumentFragment الواجهتين الجديدتين.
  • مواصفة Element Traversal Specification.