هيكل وخصائص المحتوى
nodetype
تحتوي جميع العقد على أنواع ، وهناك ما مجموعه 12 نوعًا من العقد.
نسخة الكود كما يلي:
عقدة الواجهة {
// nodetype
const غير موقعة element_node = 1 ؛
const غير موقعة attribute_node = 2 ؛
const غير موقعة النص القصير _node = 3 ؛
const غير موقعة قصيرة CDATA_Section_node = 4 ؛
const غير موقعة entity_reference_node = 5 ؛
const غير موقعة entity_node = 6 ؛
const غير موقعة القصيرة المعالجة _instruction_node = 7 ؛
const غير موقعة قصيرة comment_node = 8 ؛
const غير موقعة غير موقعة document_node = 9 ؛
const غير موقعة document_type_node = 10 ؛
const غير موقعة document_fragment_node = 11 ؛
const unsigned tonation_node = 12 ؛
...
}
العقدان الأكثر أهمية هما العقد العناصر (1) والعقد النصية (3). نادرا ما تستخدم الباقي.
على سبيل المثال ، عند إدراج جميع العقد عناصر الأطفال ، يمكننا التكرار عليها واستخدام الأطفال [i] .nodeType! = 1 للكشف.
هنا هو رمز التنفيذ:
نسخة الكود كما يلي:
<body>
<div> المسموح به القراء: </div>
<ul>
<li> جون </li>
<li> بوب </li>
</ul>
<!-عقدة تعليق->
<script>
var childnodes = document.body.childnodes
لـ (var i = 0 ؛ i <childnodes.length ؛ i ++) {
إذا (childnodes [i] .nodeType! = 1) تابع
في حالة تأهب (أطفال [أنا])
}
</script>
</body>
*يفكر
ماذا سوف يطالب الرمز التالي:
نسخة الكود كما يلي:
<! doctype html>
<html>
<body>
<script>
ALERT (document.body.lastchild.nodeType)
</script>
</body>
</html>
nodename ، tagname
يحتوي كل من Nodename و TagName على اسم العقدة.
لـ Document.body
تنبيه (document.body.nodename) // الجسم
سيتم رسملة جميع أسماء NODDenames في HTML.
عندما لا يتم رسملة اسم الإيماءة
هذا الموقف نادر ، إذا كنت فضوليًا ، فيمكنك قراءة ما يلي.
ربما تعرف بالفعل أن هناك طريقتان للمتصفحات لتحليل: HTML Pattern و __xml. عادةً ما يتم استخدام مخطط HTML ، ولكن عند استخدام تقنية XMLHTTPrequest__ للحصول على مستندات XML ، يتم استخدام مخطط XML.
يتم استخدام نمط XML أيضًا في Firefox عندما يتم تعيين نوع المحتوى لمستند XHTML على Xmlish.
في وضع __xml ، سيتم الاحتفاظ باسم العقدة ، لذلك قد يظهر الجسم أو الجسم.
لذلك ، إذا تم تحميل مستند XML إلى HTML من الخادم من خلال تقنية XMLHTTPrequest__ ، فسيتم الاحتفاظ باسم العقدة.
Nodename و __tagname__ هي نفسها بالنسبة للعناصر.
ومع ذلك ، فإن العقد غير العناصر لها أيضًا سمات اسم الإيماءة ، والتي لها قيم خاصة:
ALERT (document.nodename) // #document
لا تحتوي معظم أنواع العقدة على سمة tagname ، ويتم شرح اسم العقدة في IE IS!.
لذلك ، بشكل عام ، يكون اسم NomeName أكثر أهمية من tagname. لكن TagName يشبه الإصدار المبسط ، لذلك عندما تقوم فقط بمعالجة العقد العناصر ، يمكنك استخدامه.
innerhtml
InnerHTML هو جزء من معيار HTML5. يرجى الاطلاع على الرابط للحصول على التفاصيل
يسمح بالوصول إلى محتوى العقدة في النص. سيقوم المثال التالي بإخراج جميع محتويات document.body واستبدالها بالمحتوى الجديد.
نسخة الكود كما يلي:
<body>
<p> الفقرة </p>
<viv> و Div </iv>
<script>
ALERT (document.body.innerhtml) // اقرأ المحتويات الحالية
document.body.innerhtml = 'yaaahoo!' // استبدال المحتويات
</script>
</body>
سوف innerhtml يحتوي على HTML فعالة. لكن المتصفحات يمكنها أيضًا تحليل HTML المشوه.
يمكن استخدام innerHTML في أي عقدة عنصر. إنه مفيد جدًا.
المزالق innerhtml
innerhtml ليست بسيطة كما يبدو. يحتوي على بعض المزالق في انتظار المبتدئين ، وأحيانًا لا يمكن للمبرمجين ذوي الخبرة تجنب ذلك.
innerhtml لعقدة __table in ie هي القراءة فقط
في IE ، يتم قراءة Innerhtml فقط في Col و Colgroup و FrameSet و Head و Html و Style و Table و Tbody و Tfoot و Thead و Tram و Tr والعناصر الأخرى.
في علامات الجدول في IE ، يكون innerhtml للقراءة فقط باستثناء TD.
لا يمكن إضافة innerhtml
من هيكل البيان ، يمكن لـ InnerHTML إجراء عمليات إلحاق ، مثل:
chatdiv.innerhtml += "<viv> hi <img src = 'smile.gif'/>! </viv>"
chatdiv.innerhtml += "كيف حالك؟"
لكن ما تم فعله في الحقيقة:
1. تم مسح المحتوى القديم
2. يتم تحليل المحتوى الجديد وإدخاله. لم يتم إلحاق المحتوى ، تم تجديده.
لذلك ، سيتم إعادة تحميل جميع الصور والموارد الأخرى بعد التشغيل += ، بما في ذلك Smile.gif.
لحسن الحظ ، هناك طرق أخرى لتحديث المحتوى ، والتي لا تستخدم InnerHTML ، لذلك لا توجد مشكلة مذكورة أعلاه.
قيمة
InnerHTML صالحة فقط لعقد العناصر.
بالنسبة لأنواع أخرى من العقد ، يستخدمون خاصية NodeValue للحصول على المحتوى. يوضح المثال التالي كيف يعمل على العقد النصية وعقد التعليق.
نسخة الكود كما يلي:
<body>
النص
<!-تعليق->
<script>
لـ (var i = 0 ؛ i <document.body.childnodes.length ؛ i ++) {
ALERT (document.body.childnodes [i] .nodevalue)
}
</script>
</body>
في المثال أعلاه ، بعض التحذيرات فارغة بسبب العقد الفارغة. لاحظ أن القيم NodeValue === NULL لعقد البرنامج النصي. ذلك لأن البرنامج النصي هو عقدة عنصر. العنصر عقدة ، استخدام innerhtml.
لخص
nodetype
نوع العقدة. أهم شيء هو أن عقدة العنصر هي 1 ، عقدة النص هي 3 ، وهي للقراءة فقط.
nodename/tagname
اسم علامة CAPS. بالنسبة للعقد غير العناصر ، سيكون لاسم Nodename أيضًا قيمًا خاصة ، للقراءة فقط.
innerhtml
يمكن كتابة محتوى عقدة العنصر.
قيمة
يمكن كتابة محتوى العقدة النصية.
تحتوي عقدة DOM على بعض السمات الأخرى وفقًا لنوعها. على سبيل المثال ، تحتوي علامة الإدخال على قيمة و __checked__ سمات. السمة A لديها HREF وهلم جرا.
ما سبق هو كل شيء عن هذا المقال ، أتمنى أن تنال إعجابك.