الفرق بين المراجعتين لصفحة: «JavaScript/Document/createElementNS»

المراجعة الحالية بتاريخ 15:38، 25 مارس 2018

يُنشئُ التّابع Document.createElementNS()‎ عنصرًا جديدًا بعنوان URI الخاصّ بمجال الأسماء والاسم الموصوف المُحدّدَين.

لإنشاء عنصرٍ دون تحديد عنوان URI الخاصّ بمجال الأسماء، استعمل التّابع createElement.

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

var element = document.createElementNS(namespaceURI, qualifiedName[, options]);

المعاملات

`namespaceURI`

سلسلةٌ نصيّةٌ تُحدّد عنوان URI الخاصّ بمجال الأسماء لربطه بالعنصر. وتُحدّد قيمةُ الخاصيّة namespaceURI الخاصّة بالعنصر المُنشأ من قيمة هذا المُعامل. انظر عناوين URI الخاصّة بمجال الأسماء الصّالحة أدناه.

`qualifiedName`

سلسلةٌ نصيّةٌ تُحدّد نوع العنصر المرغوب إنشاؤه. وتُحدّد قيمةُ الخاصيّة nodeName الخاصّة بالعنصر المُنشأ من قيمة هذا المُعامل.

`options`

مُعاملٌ اختياريّ من النّوع ElementCreationOptions يحتوي على خاصيّة واحدة تُسمّى is، وقيمتها هي اسمُ الوسمِ لعنصرٍ مُخصّصٍ مُعرّفٍ مُسبقًا عبر التّابع customElements.define‎()‎‎. لإبقاء التوافقيّة العكسيّة مع النّسخ السّابقة من مواصفة Custom Elements، ستسمح لك بعض المتصفحات بتمرير سلسلةٍ نصيّة عوضًا عن كائنٍ هنا، والذي تكون فيه قيمةُ السّلسلةِ النّصيّة اسمَ وسمِ العنصرِ المُخصّص. انظر صفحة بناء مكونات الويب لمزيد من المعلومات حول كيفيّة استعمال هذا المُعامل.

سيُعطى العنصر الجديد خاصيّة is قيمتها اسمُ وسم العنصرِ المُخصّص. العناصر المُخصّصة ميّزة تجريبيّة وغير مُتاحةٍ سوى في بعض المتصفحات.

القيمة المعادة

الكائن الجديد من النّوع Element.

عناوين URI الخاصّة بمجال الأسماء الصالحة

HTML – استعمل القيمة http://www.w3.org/1999/xhtml
SVG – استعمل القيمة http://www.w3.org/2000/svg
XBL – استعمل القيمة http://www.mozilla.org/xbl
XUL – استعمل القيمة http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul

أمثلة

يُنشئ المثال التّالي عنصر <div> جديد في مجال الأسماء XHTML ويُضيفه إلى العنصر vbox. ورغم أنّ هذا مثال على مُستند XUL غير ذي فائدةٍ كبيرة، إلّا أنّه يفي بغرضِ توضيحِ كيفيّة استعمال عناصرَ من مجاليْ أسماءٍ مختلفين مكتوبين في مُستندٍ واحد.

<?xml version="1.0"?>
<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
      xmlns:html="http://www.w3.org/1999/xhtml"
      title="||Working with elements||"
      onload="init()">

<script type="text/javascript"><![CDATA[
 var container;
 var newdiv;
 var txtnode;

 function init(){
   container = document.getElementById("ContainerBox");
   newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div");
   txtnode = document.createTextNode("هذا هو النّص الذي أُنشئَ ديناميكيًّا باستعمال التّابع ثمّ أضيف إلى المستند");
   newdiv.appendChild(txtnode);
   container.appendChild(newdiv);
 }

]]></script>

 <vbox id='ContainerBox' flex='1'>
  <html:div>
   سيضيف السكربت على هذه الصّفحة محتوى ديناميكيًّا أسفله
  </html:div>
 </vbox>

</page>

مُلاحظة: يَستخدم المثال أعلاه سكربتًا سطريًّا (inline script) والذي لا يُنصَح به في مستندات XHTML. وهذا المثال في الواقع مُستندُ XUL مع مُستند XHTML مُضمَّن، لكن على الرّغم من ذلك، يجب اتّباع المنصوح به.

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

الميزة	Chrome	Internet Explorer	Edge	Firefox	Opera	Safari
الدعم الأساسي	نعم	نعم	نعم	نعم	نعم	نعم
المُعامل `options`	نعم	؟	لا	50	؟	؟

انظر أيضًا

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

مواصفة DOM.

@@ سطر 12: / سطر 12: @@
 === <code>namespaceURI</code> ===
-سلسلةٌ نصيّةٌ تُحدّد [http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI عنوان URI الخاصّ بمجال الأسماء] لربطه بالعنصر. وتُحدّد قيمةُ الخاصيّة <code>namespaceURI</code> الخاصّة بالعنصر المُنشأ من قيمة هذا المُعامل. انظر عناوين URI الخاصّة بمجال الأسماء الصّالحة أسفله.
+سلسلةٌ نصيّةٌ تُحدّد [http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI عنوان URI الخاصّ بمجال الأسماء] لربطه بالعنصر. وتُحدّد قيمةُ الخاصيّة <code>namespaceURI</code> الخاصّة بالعنصر المُنشأ من قيمة هذا المُعامل. انظر [[JavaScript/Document/createElementNS#.D8.B9.D9.86.D8.A7.D9.88.D9.8A.D9.86 URI .D8.A7.D9.84.D8.AE.D8.A7.D8.B5.D9.91.D8.A9 .D8.A8.D9.85.D8.AC.D8.A7.D9.84 .D8.A7.D9.84.D8.A3.D8.B3.D9.85.D8.A7.D8.A1 .D8.A7.D9.84.D8.B5.D8.A7.D9.84.D8.AD.D8.A9|عناوين URI الخاصّة بمجال الأسماء الصّالحة]] أدناه.
 === <code>qualifiedName</code> ===
@@ سطر 28: / سطر 28: @@
 * HTML – استعمل القيمة <code>http://www.w3.org/1999/xhtml</code>
 * SVG – استعمل القيمة <code>http://www.w3.org/2000/svg</code>
-* HTML – استعمل القيمة <code>http://www.mozilla.org/xbl</code>
+* XBL – استعمل القيمة <code>http://www.mozilla.org/xbl</code>
-* HTML – استعمل القيمة <code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code>
+* XUL – استعمل القيمة <code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code>
 ==أمثلة==
@@ سطر 99: / سطر 99: @@
 ==مصادر ومواصفات==
-* مواصفة [https://dom.spec.whatwg.org/#dom-document-createelementns DOM]
+* مواصفة [https://dom.spec.whatwg.org/#dom-document-createelementns DOM].
   [[تصنيف:JavaScript]]