الفرق بين المراجعتين ل"JavaScript/Document/getElementsByClassName"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(إضافة الصّفحة)
 
 
سطر 8: سطر 8:
 
var elements = rootElement.getElementsByClassName(names);
 
var elements = rootElement.getElementsByClassName(names);
 
</syntaxhighlight>
 
</syntaxhighlight>
−
===القيم===
+
===<code>elements‎</code>===
−
====<code>elements‎</code>====
 
 
كائنٌ حيّ من النّوع <code>[[JavaScript/HTMLCollection|HTMLCollection‎]]</code>  الذي يُمثّل مجموعة العناصِر التي وُجدت.
 
كائنٌ حيّ من النّوع <code>[[JavaScript/HTMLCollection|HTMLCollection‎]]</code>  الذي يُمثّل مجموعة العناصِر التي وُجدت.
  
−
====<code>names‎</code>====
+
===<code>names‎</code>===
 
سلسلةٌ نصيّةٌ تُمثّل قائمة أسماء الأصناف المرغوب البحث عنها مفصولة بمساحة بيضاء (whitespace).  
 
سلسلةٌ نصيّةٌ تُمثّل قائمة أسماء الأصناف المرغوب البحث عنها مفصولة بمساحة بيضاء (whitespace).  
  
−
====<code>getElementsByClassName‎</code>====
+
===<code>getElementsByClassName‎</code>===
 
يُمكن استدعاء هذا التّابع على أي عنصرٍ، ليس فقط على المُستند. وسيُستخدم العنصر الذي استدعيَ عليه بمثابة جذر البحث (أي نقطة بدايته).
 
يُمكن استدعاء هذا التّابع على أي عنصرٍ، ليس فقط على المُستند. وسيُستخدم العنصر الذي استدعيَ عليه بمثابة جذر البحث (أي نقطة بدايته).
  
سطر 47: سطر 46:
 
<html>
 
<html>
 
<head>
 
<head>
−
    <meta charset="UTF-8">
+
  <meta charset="UTF-8">
−
    <title>Document</title>
+
  <title>Document</title>
 
</head>
 
</head>
 
<body>
 
<body>
−
    <div id="parent-id">
+
  <div id="parent-id">
−
        <p>hello word1</p>
+
    <p>hello word1</p>
−
        <p class="test">hello word2</p>
+
    <p class="test">hello word2</p>
−
        <p >hello word3</p>
+
    <p>hello word3</p>
−
        <p>hello word4</p>
+
    <p>hello word4</p>
−
    </div>
+
  </div>
−
    <script>
+
  <script>
−
        var parentDOM = document.getElementById("parent-id");
+
    var parentDOM = document.getElementById("parent-id");
−
       
 
−
        var test=parentDOM.getElementsByClassName("test");// هنا، لم نصل إلى العنصر الهدف بعد
 
−
        console.log(test);//HTMLCollection[1]
 
  
−
        var testTarget=parentDOM.getElementsByClassName("test")[0];// هنا نصل إلى العنصر
+
    var test=parentDOM.getElementsByClassName("test");// هنا، لم نصل إلى العنصر الهدف بعد
−
        console.log(testTarget);//<p class="test">hello word2</p>
+
    console.log(test);//HTMLCollection[1]
−
    </script>
+
 
 +
    var testTarget=parentDOM.getElementsByClassName("test")[0];// هنا نصل إلى العنصر
 +
    console.log(testTarget);//<p class="test">hello word2</p>
 +
  </script>
 
</body>
 
</body>
 
</html>
 
</html>
سطر 89: سطر 88:
  
 
==مصادر ومواصفات==
 
==مصادر ومواصفات==
−
* مواصفة [https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname W3C: getElementsByClassName]
+
* مواصفة [https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname W3C:‏ getElementsByClassName].
  
 
  [[تصنيف:JavaScript]]
 
  [[تصنيف:JavaScript]]

المراجعة الحالية بتاريخ 09:26، 31 مارس 2018

يُعيد التّابع Document.getElementsByClassName()‎ كائنًا مُشابهًا للمصفوفات يحتوي على جميع العناصر الأولاد التي تحمل نفس اسم الصّنف (class name) المُعطى. عند استدعائه على كائن المُستند، فسيُبحَثُ في كامل المُستند، ما يشمل العقدة الجذر. يُمكن كذلك استدعاء التّابع getElementsByClassName()‎ على أي عنصر؛ وسيُعيد العناصر الأولاد للعنصر الجذر المُحدَّد ذات أسماء الأصناف المعطاة.

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

var elements = document.getElementsByClassName(names);
// أو
var elements = rootElement.getElementsByClassName(names);

elements‎

كائنٌ حيّ من النّوع HTMLCollection‎ الذي يُمثّل مجموعة العناصِر التي وُجدت.

names‎

سلسلةٌ نصيّةٌ تُمثّل قائمة أسماء الأصناف المرغوب البحث عنها مفصولة بمساحة بيضاء (whitespace).

getElementsByClassName‎

يُمكن استدعاء هذا التّابع على أي عنصرٍ، ليس فقط على المُستند. وسيُستخدم العنصر الذي استدعيَ عليه بمثابة جذر البحث (أي نقطة بدايته).

أمثلة

الحصول على جميع العناصر ذات الصّنف 'test': 

document.getElementsByClassName('test');

الحصول على جميع العناصر ذات الصّنف 'test' والصّنف 'red' في نفس الوقت: 

document.getElementsByClassName('red test');

الحصول على جميع العناصر ذات الصّنف 'test' الموجودة داخل العنصر ذو المعرِّف'main' : 

document.getElementById('main').getElementsByClassName('test');

يُمكننا كذلك استخدام توابع Array.prototype‎ على أي كائن HTMLCollection‎ عبر تمريره إلى قيمة الكائن this الخاصّ بالتّابع. في المثال التّالي، نجد جميع العناصِر div‎ ذات الصّنف 'test': 

var testElements = document.getElementsByClassName('test');
var testDivs = Array.prototype.filter.call(testElements, function(testElement){
    return testElement.nodeName === 'DIV';
});

الوصول إلى العنصر الأول عبر اللاحقة [0]: 

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="parent-id">
    <p>hello word1</p>
    <p class="test">hello word2</p>
    <p>hello word3</p>
    <p>hello word4</p>
  </div>
  <script>
    var parentDOM = document.getElementById("parent-id");

    var test=parentDOM.getElementsByClassName("test");// هنا، لم نصل إلى العنصر الهدف بعد
    console.log(test);//HTMLCollection[1]

    var testTarget=parentDOM.getElementsByClassName("test")[0];// هنا نصل إلى العنصر
    console.log(testTarget);//<p class="test">hello word2</p>
  </script>
</body>
</html>

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

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي نعم 3 9 نعم نعم

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

مجلوبة من "https://wiki.hsoub.com/index.php?title=JavaScript/Document/getElementsByClassName&oldid=4162"