نوع العقدة
nodetype
فيما يلي بعض قيم nodetype المهمة:
1: عنصر العنصر
2: attr
3: نص نص
8: تعليقات
9: وثيقة الوثيقة
nodeName ، Nodevalue
علاقة العقدة
childnodes: كل عقدة لها خاصية أطفال ، تحمل كائنًا عقيدًا
Firstchild: أي ما يعادل الأطفال [0]
LastChild: ما يعادل eildnodes.length 1
في الوقت نفسه ، يمكن الوصول إلى العقد الأخرى في نفس القائمة باستخدام خصائص Previvibiliting و Nextsibling لكل عقدة في القائمة.
عقدة التشغيل
AppendChild ()
يتم استخدام طريقة AppendChild () لإضافة عقدة إلى نهاية قائمة الأطفال. بعد إضافة عقدة ، سيتم تحديث مؤشرات العلاقة بين العقدة الجديدة والعقدة الأصل والعقدة الطفل الأخيرة من الأطفال وفقًا لذلك.
insertbefore ()
تقبل طريقة InsertBefore () معلمتين: العقدة المراد إدراجها والعقدة المراد الرجوع إليها.
// بعد الإدراج ، يصبح آخر عقدة الطفل retropednode = somenode.insertbefore (newNode ، null) ؛ // بعد الإدراج ، يصبح العقد الأولى retropedNode = somenode.insertbefore Fore (newNode ، somenode.firstchild) ؛
ReplaceChild ()
تقبل ReplaceChild () معلمتين ، والعقدة المراد إدراجها واستبدال العقدة
var returndnode = somenode.replacechild (newNode ، somenode.firstchild) ؛
removechild ()
فقط إزالة العقد وعدم استبدالها.
var previpfirstchild = somenode.removechild (somenode.firstchild) ؛
clonenode ()
البند 1
البند 2
البند 3
var deeplist = mylist.clonenode (true) ؛ console.log (deeplist.length) ؛ // 3var argerowlist = mylist.clonenode (false) ؛ console.log (ergerowlist.childnodes.length) ؛ // 0
نوع المستند
عقدة المستند لها الخصائص التالية:
أطفال الوثيقة
var html = document.documentElement ؛ // احصل على إشارة إلى <html> console.log (html === document.childnodes [0]) ؛ // trueconsole.log (html === document.firstchild) ؛ // حقيقي
معلومات الوثيقة
// احصل على عنوان المستند Var OriginalTitle = document.title ؛ // قم بتعيين مستند عنوان المستند. // document.domain = "nczonline.net" ؛ // فشل
استدعاء document.getElementById ("mylement") ؛ ستُرجع النتيجة عنصر <Pest> كما هو موضح أدناه ؛
أفضل طريقة هي عدم جعل سمة الاسم لحقل النموذج هي نفس معرف العناصر الأخرى.
<type type = "text" name = "mylement" value = "text field"> <div id = "mylement"> a div </viv>
مجموعة خاصة
كتابة المستندات
<html> <head> <title> document.write () مثال 3 </title> </head> <body> <script type = "text/javaScript"> document.write ("<script type =/" text/javascript/"src =/" file.js/">") + "<// script>") ؛ </script> </body> </html>لن يتم اعتبار السلاسل <// script> علامات مغلقة لعلامات البرنامج النصي الخارجي ، لذلك لن يكون هناك محتوى غير ضروري على الصفحة.
نوع العنصر
تحتوي عقدة العنصر على الخصائص التالية:
للوصول إلى اسم علامة عنصر ما ، يمكنك استخدام سمة nodename أو سمة tagName ؛
<div id = "mydiv"> </viv> var div = document.getElementById ("mydiv") ؛ console.log (div.tagname) ؛ // divconsole.log (div.nodename) ؛ // divif (element.tagname == "div") {// لا يمكنك المقارنة مثل هذا ، من السهل ارتكاب أخطاء}} إذا (element.tagname.toLowerCase == "div") {// هذا هو الأفضل (لأي مستند)}}احصل على الميزات
هناك ثلاث طرق رئيسية DOM لخصائص التشغيل ، وهي getAttribute () ، setAttribute () ، و removeAttribute () ؛
لاحظ أن اسم السمة الذي تم تمريره إلى getAttribute () هو نفس اسم السمة الفعلي. الانطباع: للحصول على قيمة السمة للفئة ، يجب أن تمر في "الفصل" بدلاً من "ClassName".
var div = document.getElementById ("mydiv") ؛ console.log (div.getAttribute ("class")) ؛ // BDإنشاء عناصر
استخدم طريقة المستند. createlement () لإنشاء عنصر جديد.
أطفال العنصر
قبل إجراء عملية ما ، عادة ما تحتاج إلى التحقق من خاصية nodetype أولاً ، كما هو موضح في المثال التالي:
لـ (var i = 0 ؛ len = element.childnodes.length ؛ i <len ؛ i ++) {if (element.childnodes [i] .nodeType == 1) {// experations بعض العمليات}}نوع النص
العقد النصية لها الخصائص التالية:
إنشاء عقدة نصية
يمكنك استخدام document.createTextNode () لإنشاء عقدة نصية جديدة.
العقد النص الطبيعية
تطبيع ()
تقسيم العقد النص
splittext ()
نوع التعليق
عقدة التعليق لها الخصائص التالية:
تقنية التشغيل DOM
نموذج التشغيل
// إنشاء جدول TableVar = document.createElement ("table") ؛ table.border = 1 ؛ table.width = "100 ٪" ؛ // إنشاء tbodyvar tbody = document.createElement ("tbody") ؛ table.appendchild (tbody) ؛ // إنشاء السطر الأول tbody.insertrow (0) ؛ tbody.rows [0] .insertcell (0) ؛ tbody.rows [0] 2،1 ")) ؛ // إنشاء السطر الثاني tbody.inserTrow (01) ؛ tbody.rows [1] .insertcell (0) ؛ tbody.rows [1] 1،2 ")) ؛ tbody.rows [1] .insertcell (1) ؛ tbody.rows [1]API المحدد
QuerySelector () طريقة
// احصل على عنصر الجسم var tbody = document.queryselector ('body') ؛ // احصل على العنصر مع المعرف "mydiv" var mydiv = document.queryselector ("#mydiv") ؛ // الحصول على العنصر الأول مع "class selection = document.queryselector (".طريقة QuerySelectorAll ()
// احصل على جميع عناصر <em> في <div> (على غرار getElementsByTagName ("em")) var ems = document.getElementById ("mydiv"). QuerySelectorAll ("em") ؛ // الحصول على جميع عناصر الفئة "المختارة" = document.queryselectall (". مختارة") ؛ document.queryselectorall ("P Strong") ؛HTML5
الامتدادات المتعلقة بالصف
طريقة getElementsByClassName ():
يمكن استدعاء هذه الطريقة من خلال كائن المستند وجميع عناصر HTML.
// احصل على جميع العناصر التي تحتوي على "اسم المستخدم" و "الحالي" في الفصل. لا يهم ترتيب أسماء الفئة var allcurrentusernames = document.getElementsByClassName ("اسم المستخدم الحالي") ؛ // الحصول على جميع العناصر مع اسم الفصل "المحدد" في العنصر مع المعرف "myDiv" var selection = document.getElementById ("mydiv").إدارة التركيز
يضيف HTML5 أيضًا وظيفة المساعدة في إدارة DOM Focus. الأول هو خاصية المستند.
var button = document.getElementById ("mybutton") ؛ button.focus () ؛ Alert (document.activeElement ==== button) ؛ // حقيقيبشكل افتراضي ، عند تحميل المستند للتو ، يتم تخزين المستند. أثناء تحميل المستند ، تكون قيمة المستند.
بالإضافة إلى ذلك ، تمت إضافة طريقة المستند.
var button = document.getElementById ("mybutton") ؛ botton.focus () ؛ Alert (document.hasfocus ()) ؛ // حقيقي