الفرق بين المراجعتين لصفحة: «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>Document.createElement()</code> عنصرَ HTML المُحدّد عبر المُعامل <code>tagName</code> الذي يُمثّل اسم الوسم، أو يُنشئ كائنا من النّوع <code>[[JavaScript/ HTMLUnknownElement| HTMLUnknownElement]]</code> إن لم يُتعرَّف على اسم الوسم <code>tagName</code>. | ||
'''مُلاحظة:''' في مستندات XUL، يُنشَأ عنصر XUL المُحدَّد. وفي مُستندات أخرى، يُنشَأ | '''مُلاحظة:''' في مستندات XUL، يُنشَأ عنصر XUL المُحدَّد. وفي مُستندات أخرى، يُنشَأ عنصرٌ بقيمةٍ <code>null</code> لعنوان URI الخاصّ بمجال الأسماء. | ||
==البنية العامة== | ==البنية العامة== | ||
| سطر 12: | سطر 12: | ||
=== <code>tagName</code> === | === <code>tagName</code> === | ||
سلسلةٌ نصيّةٌ تُحدّد نوع العنصر المرغوب إنشاؤه. قيمة nodeName الخاصّة بالعنصر المُنشأ تُحدّد من قيمة tagName. لا تَستعمِل الأسماء الموصوفة (مثل "html:a") مع هذا التّابع. عندما يُستدعى التّابع على مُستند HTML، | سلسلةٌ نصيّةٌ تُحدّد نوع العنصر المرغوب إنشاؤه. قيمة <code>[[JavaScript/Node/nodeName|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> === | ||
مُعاملٌ اختياريّ من النّوع ElementCreationOptions يحتوي على خاصيّة واحدة تُسمّى [[HTML/ | مُعاملٌ اختياريّ من النّوع <code>ElementCreationOptions</code> يحتوي على خاصيّة واحدة تُسمّى <code>[[HTML/Global Attributes|is]]</code>، وقيمتها هي اسمُ الوسمِ لعنصرٍ مُخصّصٍ مُعرّفٍ مُسبقًا عبر التّابع <code>customElements.define()</code>. انظر مثال مكوّنات الويب أسفله للمزيد من التّفاصيل. | ||
===القيمة المعادة=== | ===القيمة المعادة=== | ||
الكائن الجديد من النّوع <code>[[JavaScript/Element|Element]]</code>. | الكائن الجديد من النّوع <code>[[JavaScript/Element|Element]]</code>. | ||
| سطر 23: | سطر 21: | ||
==أمثلة== | ==أمثلة== | ||
===مثال بسيط=== | ===مثال بسيط=== | ||
يُنشئ المثال التّالي عنصر <div> جديد ويُدخله قبل العنصر ذو المعرّف "div1". | يُنشئ المثال التّالي عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> جديد ويُدخله قبل العنصر ذو المعرّف <code>"div1"</code>. <div> | ||
في جزء HTML نضع: | في جزء HTML نضع: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
| سطر 57: | سطر 54: | ||
===مثال مكونات الويب=== | ===مثال مكونات الويب=== | ||
المثال التّالي يوسّع العنصر HTMLUListElement الذي يُمثّل العنصرَ <ul>. | المثال التّالي يوسّع العنصر <code>[[JavaScript/HTMLUListElement|HTMLUListElement]]</code> الذي يُمثّل العنصرَ <code><nowiki><ul></nowiki></code>. <ul><syntaxhighlight lang="javascript"> | ||
<syntaxhighlight lang="javascript"> | |||
// أنشئ صنفًا للعنصر | // أنشئ صنفًا للعنصر | ||
class ExpandingList extends HTMLUListElement { | class ExpandingList extends HTMLUListElement { | ||
| سطر 77: | سطر 73: | ||
let expandingList = document.createElement('ul', { is : 'expanding-list' }) | let expandingList = document.createElement('ul', { is : 'expanding-list' }) | ||
</syntaxhighlight> | </syntaxhighlight> | ||
سيُعطى العنصر الجديد خاصيّة is قيمتها | سيُعطى العنصر الجديد خاصيّة <code>is</code> قيمتها اسمُ وسم العنصرِ المُخصّص. | ||
مُلاحظة: لإبقاء التوافقيّة العكسيّة مع النّسخ السّابقة من مواصفة [https://www.w3.org/TR/custom-elements/ Custom Elements]، ستسمح لك بعض المتصفحات بتمرير سلسلةٍ نصيّة عوضًا عن كائنٍ هنا، والذي تكون فيه | مُلاحظة: لإبقاء التوافقيّة العكسيّة مع النّسخ السّابقة من مواصفة [https://www.w3.org/TR/custom-elements/ Custom Elements]، ستسمح لك بعض المتصفحات بتمرير سلسلةٍ نصيّة عوضًا عن كائنٍ هنا، والذي تكون فيه قيمةُ السّلسلةِ النّصيّة اسمَ وسمِ العنصرِ المُخصّص. | ||
== دعم المتصفحات == | == دعم المتصفحات == | ||
| سطر 99: | سطر 95: | ||
|نعم | |نعم | ||
|- | |- | ||
! المُعامل options | ! المُعامل <code>options</code> | ||
|نعم | |نعم | ||
|؟ | |؟ | ||
| سطر 116: | سطر 112: | ||
* <code>[[JavaScript/Node/insertBefore|Node.insertBefore()]]</code> | * <code>[[JavaScript/Node/insertBefore|Node.insertBefore()]]</code> | ||
* <code>[[JavaScript/Node/hasChildNodes|Node.hasChildNodes()]]</code> | * <code>[[JavaScript/Node/hasChildNodes|Node.hasChildNodes()]]</code> | ||
* <code>[[JavaScript/Document/createElementNS|Document.createElementNS()]]</code> لتحديد عنوان URI الخاصّ بمجال الأسماء | * <code>[[JavaScript/Document/createElementNS|Document.createElementNS()]]</code> لتحديد عنوان URI الخاصّ بمجال الأسماء صراحةً (explicitly) للعنصر. | ||
==مصادر ومواصفات== | ==مصادر ومواصفات== | ||
مراجعة 18:48، 24 مارس 2018
في مُستندات HTML، يُنشئُ التّابع Document.createElement() عنصرَ HTML المُحدّد عبر المُعامل tagName الذي يُمثّل اسم الوسم، أو يُنشئ كائنا من النّوع HTMLUnknownElement إن لم يُتعرَّف على اسم الوسم tagName.
مُلاحظة: في مستندات XUL، يُنشَأ عنصر XUL المُحدَّد. وفي مُستندات أخرى، يُنشَأ عنصرٌ بقيمةٍ null لعنوان URI الخاصّ بمجال الأسماء.
البنية العامة
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 | ؟ | ؟ |