Document Object Model ، والمختصر DOM، بالصينية:文档对象模型، هو标准编程接口موصى بها من قبل منظمة W3C لمعالجة لغات الترميز القابلة للتوسيع.
تشير DOM Tree إلى解析صفحة HTML من خلال DOM生成树状结构HTML tree访问方法المقابلة. بمساعدة DOM Tree، يمكننا تشغيل كل محتوى ترميزي على صفحة HTML بشكل مباشر简易، مثل كود HTML التالي
<. أتش تي أم أل <الرأس>
<title>اللعب مع دوم</title></head><body>
<p>أنا عقدة دوم</p>
<ص>
<p>ص</p>
</p></body></html> يتم تلخيصه في شجرة DOM كما يلي: 
بعد فهم المعرفة المذكورة أعلاه، سأشرح ما يلي حول واجهة برمجة التطبيقات (API) من أربعة جوانب: كيفية الحصول على DOM، وكيفية إنشاء DOM وإضافته، وكيفية تعديل DOM، وكيفية
حذف
هناك العديد من واجهات برمجة التطبيقات للحصول على DOM، لكنها كلها بسيطة جدًا، هيا
:
document.getElementById
("id name") ;
<p id="p">أنا عقدة p</p>
<النص البرمجي>
var p = document.getElementById("p");
console.log(p);
</script></body> 
افتح وحدة التحكم ويمكنك أن ترى أنك حصلت عليها بنجاح
:
document.getElementsByTagName("tag name" )
;
<p>أنا العقدة p</p>
<p>أنا أيضًا عقدة p</p>
<النص البرمجي>
var p = document.getElementsByTagName("p");
console.log(p);
لـ (دع i = 0; i < p. length; i++) {
console.log(p[i]);
}
</script></body> 
ملاحظة : استخدم طريقة getElementsByTagName() لإرجاع مجموعة من الكائنات بأسماء علامات محددة. نظرًا لأن ما يتم الحصول عليه هو مجموعة من الكائنات، فنحن بحاجة إلى اجتيازها إذا أردنا تشغيل العناصر الموجودة بداخلها الطريقة ديناميكية
3.
:
document.getElementsByClassName("اسمالفئة
");
<p class="p">أنا العقدة p</p>
<p class="p">أنا عقدة p</p>
<النص البرمجي>
var p = document.getElementsByClassName("p");
console.log(p);
لـ (دع i = 0; i < p. length; i++) {
console.log(p[i]);
}
</script></body> 
وهذا أيضًا بسيط جدًا، فقط تذكره
من
خلال واجهة برمجة تطبيقات HTML5 الجديدة:
document.querySelector("انظر الأمثلة للحصول على التفاصيل"); document.querySelectorAll
("انظر الأمثلة للحصول على التفاصيل");
<p class="p">أنا العقدة p</p>
<p class="name">زهرة الكمثرى</p>
<p id="info">المعلومات</p>
<النص البرمجي>
// احصل على فار حسب اسم العلامة p = document.querySelector("p");
// احصل على اسم الفئة، تذكر أن تضيف var qname = document.querySelector(".name");
// احصل على المعرف، تذكر أن تضيف #
var info = document.querySelector("#info");
// احصل على جميع العناصر المتطابقة وأرجع المصفوفة var all = document.querySelectorAll("p");
console.log(p);
console.log(qname);
console.log(info);
لـ (دع i = 0; i < all.length; i++) {
console.log(all[i]);
}
</script></body> 
كما ترون، فإن استخدام واجهة برمجة التطبيقات الجديدة لـ HTML5 مرن للغاية، لذلك أحب استخدام هذا كثيرًا وأوصي باستخدام
بالإضافة إلى ذلك، هناك بعض العناصر الخاصة التي لها طرق اكتساب خاصة بها، مثل كنص،
على صيغة العنصر:
document.body
مثال:
<body>
<النص البرمجي>
فار الجسم = document.body;
console.log(body);
</script></body> 
كما ترون، تم الحصول على كافة محتويات عنصر الجسم بنجاح.
:
document.documentElement
مثال:
<body>
<النص البرمجي>
var html = document.documentElement;
console.log(html);
</script></body> 
كما ترون، تم الحصول على HTML لصفحة الويب بأكملها، حسنًا، لقد انتهى الحصول على DOM الآن، لنبدأ الآن في إنشاء DOM وإضافته
. تشغيل dom هو نفسه اللعب بالبيانات، والإضافة والحذف والتعديل والتحقق، والإنشاء والإضافة يعادل الإضافة عمليات DOM أولاً، يجب علينا إنشاء DOM، ثم إخباره بمكان إضافته. وأخيرًا، اكتملت العملية. دعونا نتعلم أدناه كيفية إنشاء dom، وكيفية إضافة dom
. لا تخف، هاها
بناء الجملة:
document.createElement("اسم العنصر") ;
إذا كنت تريد إنشاء عنصر p ديناميكيًا، فيمكنك كتابته بهذه الطريقة. الأمر نفسه ينطبق على أشياء أخرى. قم بتطبيق الاستدلالات
var
= document.createElement("p"); استخدمها وفقًا للموقف. أحدهما موجود في العنصر الأصلي، والآخر هو الإلحاق بعد العنصر الفرعي المحدد
appendChild (الطفل)
مثال
:
<body>
<ص>
<a href="">بايدو</a>
</ص>
<النص البرمجي>
var p = document.createElement("p");
p.innerText = "أنا ع"
var p = document.querySelector("p");
p.appendChild(p);
</script></body> 
قم بإنشاء علامة فقرة العنصر p ديناميكيًا واكتب النص "أنا p". وأخيرًا، احصل على العنصر p وألحقه كطفل لـ p. يتم إلحاق طريقة الإلحاق هذه في النهاية، بحيث يكون التأثير كما هو موضح في الشكل
إلحاقأعلاه
:
node.insertBefore(child,
المحدد
element);
<ص>
<a href="">بايدو</a>
<span>أنا الأخ الأصغر سبان</span>
</ص>
<النص البرمجي>
var p = document.createElement("p");
p.innerText = "أنا ع"
var p = document.querySelector("p");
var a = document.querySelector("a");
// أنشئ p ضمن p، قبل العنصر a p.insertBefore(p, a);
</script></body> 
هل هذه هي النهاية؟ نعم ما رأيك؟ أليس الأمر بسيطًا جدًا؟ كل ما تبقى هو التدرب أكثر. حسنًا، دعنا ننتقل إلى الخطوة التالية.
يتم تلخيص
مثال 1: احصل على علامة p الخاصة بالصفحة وقم بتغيير المحتوى إلى "Zhou Qiluo"
<body>
<ص>
<p></p>
</ص>
<النص البرمجي>
var p = document.querySelector("p");
p.innerText = "تشو تشيلو";
</script></body> المثال 2: انقر فوق الزر لإنشاء ارتباط تشعبي لـ Baidu
<body>
<ص>
<button onclick="createBaidu()">انقر لإنشاء رابط تشعبي لـ Baidu</button>
</ص>
<النص البرمجي>
وظيفة إنشاء بايدو () {
var p = document.querySelector("p");
var a = document.createElement("a");
a.href = "https://www.baidu.com";
a.innerText = "فقط ابحث في Baidu وستعرف";
p.append(a);
}
</script></body>
مثال 3: انقر فوق الزر، ويتحول لون النص في العلامة p إلى اللون الأخضر، ويتم تغيير رأس الكلب
<body>يدويًا.
<ص>
<button onclick="changeColor()">انقر لتتحول إلى اللون الأخضر</button>
<p>سأتحول إلى اللون الأخضر في لحظة</p>
</ص>
<النص البرمجي>
وظيفة تغيير اللون () {
var p = document.querySelector("p");
p.style.color = "أخضر";
}
</script></body>
يحذف الأسلوبNode.removeChild() عقدة فرعية من DOM ويعيد بناء
الجملة:
node.removeChild(child)
الحالة:
<body>
<ص>
<button onclick="removeP()">انقر لإزالة p</button>
<p>أنا ع، سينتهي الوقت بعد دقيقة</p>
</ص>
<النص البرمجي>
وظيفة إزالةP () {
var p = document.querySelector("p");
var p = document.querySelector("p");
p.removeChild(p);
}
</script></body>