الفرق بين المراجعتين لصفحة: «JavaScript/Document/createElement»
< JavaScript | Document
تنسيق |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| (مراجعتان متوسطتان بواسطة مستخدمين اثنين آخرين غير معروضتين) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:<code>Document.createElement()</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:<code>Document.createElement()</code>}}</noinclude> | ||
في مُستندات | في مُستندات [[HTML]]، يُنشئُ التّابع <code>Document.createElement()</code> عنصرَ [[HTML]] المُحدّد عبر المُعامل <code>tagName</code> الذي يُمثّل اسم الوسم، أو يُنشئ كائنا من النّوع <code> HTMLUnknownElement</code> إن لم يُتعرَّف على اسم الوسم <code>tagName</code>. | ||
==البنية العامة== | ==البنية العامة== | ||
| سطر 11: | سطر 9: | ||
===المعاملات=== | ===المعاملات=== | ||
=== <code>tagName</code> === | ==== <code>tagName</code> ==== | ||
سلسلةٌ نصيّةٌ تُحدّد نوع العنصر المرغوب إنشاؤه. قيمة <code> | سلسلةٌ نصيّةٌ تُحدّد نوع العنصر المرغوب إنشاؤه. قيمة <code>nodeName</code> الخاصّة بالعنصر المُنشأ تُحدَّد من قيمة <code>tagName</code>. لا تَستعمِل الأسماء الموصوفة (مثل <code>"html:a"</code>) مع هذا التّابع. عندما يُستدعى التّابع على مُستند HTML، فستُحوَّل قيمة <code>tagName</code> إلى أحرف صغيرة (lower case) قبل إنشاء العنصر. وفي معظم المُتصفّحات، التّعبير <code>createElement(null)</code> مُكافئٌ للتّعبير <code>createElement("null")</code>. | ||
=== <code>options</code> === | ==== <code>options</code> ==== | ||
مُعاملٌ اختياريّ من النّوع <code>ElementCreationOptions</code> يحتوي على خاصيّة واحدة تُسمّى <code>[[HTML/Global Attributes|is]]</code>، وقيمتها هي اسمُ الوسمِ لعنصرٍ مُخصّصٍ مُعرّفٍ مُسبقًا عبر التّابع <code>customElements.define()</code>. انظر مثال مكوّنات الويب | مُعاملٌ اختياريّ من النّوع <code>ElementCreationOptions</code> يحتوي على خاصيّة واحدة تُسمّى <code>[[HTML/Global Attributes|is]]</code>، وقيمتها هي اسمُ الوسمِ لعنصرٍ مُخصّصٍ مُعرّفٍ مُسبقًا عبر التّابع <code>customElements.define()</code>. انظر [[JavaScript/Document/createElement#.D9.85.D8.AB.D8.A7.D9.84 .D9.85.D9.83.D9.88.D9.86.D8.A7.D8.AA .D8.A7.D9.84.D9.88.D9.8A.D8.A8|مثال مكوّنات الويب]] أدناه للمزيد من التّفاصيل. | ||
===القيمة المعادة=== | ===القيمة المعادة=== | ||
الكائن الجديد من النّوع <code> | الكائن الجديد من النّوع <code>Element</code>. | ||
==أمثلة== | ==أمثلة== | ||
| سطر 34: | سطر 32: | ||
</html> | </html> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
في جزء JavaScript نضع: | في جزء [[JavaScript]] نضع: | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
document.body.onload = addElement; | document.body.onload = addElement; | ||
| سطر 54: | سطر 52: | ||
===مثال مكونات الويب=== | ===مثال مكونات الويب=== | ||
المثال التّالي يوسّع العنصر <code>[[JavaScript/HTMLUListElement|HTMLUListElement]]</code> الذي يُمثّل العنصرَ <code><nowiki><ul></nowiki></code>. <ul><syntaxhighlight lang="javascript"> | المثال التّالي يوسّع العنصر <code>[[JavaScript/HTMLUListElement|HTMLUListElement]]</code> الذي يُمثّل العنصرَ <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code>. <ul><syntaxhighlight lang="javascript"> | ||
// أنشئ صنفًا للعنصر | // أنشئ صنفًا للعنصر | ||
class ExpandingList extends HTMLUListElement { | class ExpandingList extends HTMLUListElement { | ||
المراجعة الحالية بتاريخ 14:22، 7 أكتوبر 2022
في مُستندات HTML، يُنشئُ التّابع Document.createElement() عنصرَ HTML المُحدّد عبر المُعامل tagName الذي يُمثّل اسم الوسم، أو يُنشئ كائنا من النّوع HTMLUnknownElement إن لم يُتعرَّف على اسم الوسم tagName.
البنية العامة
var element = document.createElement(tagName[, options]);
المعاملات
tagName
سلسلةٌ نصيّةٌ تُحدّد نوع العنصر المرغوب إنشاؤه. قيمة nodeName الخاصّة بالعنصر المُنشأ تُحدَّد من قيمة tagName. لا تَستعمِل الأسماء الموصوفة (مثل "html:a") مع هذا التّابع. عندما يُستدعى التّابع على مُستند HTML، فستُحوَّل قيمة tagName إلى أحرف صغيرة (lower case) قبل إنشاء العنصر. وفي معظم المُتصفّحات، التّعبير createElement(null) مُكافئٌ للتّعبير createElement("null").
options
مُعاملٌ اختياريّ من النّوع ElementCreationOptions يحتوي على خاصيّة واحدة تُسمّى is، وقيمتها هي اسمُ الوسمِ لعنصرٍ مُخصّصٍ مُعرّفٍ مُسبقًا عبر التّابع customElements.define(). انظر مثال مكوّنات الويب أدناه للمزيد من التّفاصيل.
القيمة المعادة
الكائن الجديد من النّوع Element.
أمثلة
مثال بسيط
يُنشئ المثال التّالي عنصر <div> جديد ويُدخله قبل العنصر ذو المعرّف "div1".
في جزء HTML نضع:
<!DOCTYPE html>
<html>
<head>
<title>التّعامل مع العناصر</title>
</head>
<body>
<div id="div1">أُنشئ النّص أعلاه ديناميكيًّا</div>
</body>
</html>
في جزء JavaScript نضع:
document.body.onload = addElement;
function addElement () {
// أنشئ العنصر الجديد
var newDiv = document.createElement("div");
// ضَع محتوى داخل العنصر
var newContent = document.createTextNode("مرحبًا");
// أضف عقدة النّص إلى العنصر المُنشأ
newDiv.appendChild(newContent);
// أضف العنصر الجديد ومحتوياته إلى
// DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}
مثال مكونات الويب
المثال التّالي يوسّع العنصرHTMLUListElement الذي يُمثّل العنصرَ <ul>. Document.createElementNS()Node.removeChild()Node.replaceChild()Node.appendChild()Node.insertBefore()Node.hasChildNodes()Document.createElementNS()لتحديد عنوان URI الخاصّ بمجال الأسماء صراحةً (explicitly) للعنصر.- مواصفة DOM
// أنشئ صنفًا للعنصر
class ExpandingList extends HTMLUListElement {
constructor() {
// استدعِ دائما هذه الدّالة في أول الدّالة البانيّة
super();
// تعريف الدّالة البانيّة مُتجاهلٌ لإيجاز المثال
...
}
}
// عرّف العنصر الجديد
customElements.define('expanding-list', ExpandingList, { extends: "ul" });
لو أردنا إنشاء نسخةٍ (instance) من هذا العنصر برمجيًّا، لاستعملنا استدعاءً مُشابهًا لما يلي:
let expandingList = document.createElement('ul', { is : 'expanding-list' })
سيُعطى العنصر الجديد خاصيّة is قيمتها اسمُ وسم العنصرِ المُخصّص.
مُلاحظة: لإبقاء التوافقيّة العكسيّة مع النّسخ السّابقة من مواصفة Custom Elements، ستسمح لك بعض المتصفحات بتمرير سلسلةٍ نصيّة عوضًا عن كائنٍ هنا، والذي تكون فيه قيمةُ السّلسلةِ النّصيّة اسمَ وسمِ العنصرِ المُخصّص.
دعم المتصفحات
| الميزة | Chrome | Internet Explorer | Edge | Firefox | Opera | Safari |
|---|---|---|---|---|---|---|
| الدعم الأساسي | نعم | نعم | نعم | نعم | نعم | نعم |
المُعامل options
|
نعم | ؟ | ؟ | 50 | ؟ | ؟ |