1.DOM: يحدد نموذج كائن المستند DOM (نموذج كائن المستند) الطرق القياسية للوصول إلى مستندات HTML ومعالجتها. DOM يقدم مستندات HTML كهيكل شجرة (شجرة العقدة) مع عناصر ، والسمات ، والنص.
2. بعض خصائص DOM شائعة الاستخدام
2.1 احصل على عناصر بالمعرف
(1) بناء الجملة:
نسخة الكود كما يلي:
document.getElementById ("id") ؛
(2) الوظيفة: يشير المعرف إلى بطاقة هوية الشخص. يمكننا العثور على العلامة من خلال البحث عن معرف العلامة ، ثم إجراء العمليات المقابلة.
(3) ملاحظة: لا تنس كتابة مستند!
2.2 innerhtml سمات
(1) بناء الجملة:
نسخة الكود كما يلي:
obgect.innerhtml = "Hello World"
(2) الوظيفة: بشكل أساسي للحصول على المحتوى أو استبداله في العلامة
(3) مثال:
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> innerhtml </itlem>
</head>
<body>
<h2 id = "con"> javaScript </h2>
<p> javaScript هي لغة برمجة بسيطة تعتمد على الكائن والحدث المدفوع. يتم تضمينه في مستندات HTML ويتم تفسيره وتنفيذه بواسطة المتصفح ، مما يؤدي إلى إنشاء تأثير عرض ديناميكي على صفحة الويب وتنفيذ وظائف تفاعل المستخدم. </p>
<script type = "text/javaScript">
var mychar = document.getElementById ("con") ؛
document.write ("العنوان الأصلي:"+mychar.innerhtml+"<br>") ؛ // إخراج محتوى علامة H2 الأصلي
mychar.innerhtml = "Hello World!" ؛
document.write ("العنوان المعدل:"+mychar.innerhtml) ؛ // إخراج محتوى علامة H2 المعدلة
</script>
</body>
</html>
(4) ملاحظة: الكائن هو كائن العنصر الذي تم الحصول عليه ، مثل العنصر الذي تم الحصول عليه من خلال document.getElementById ("id").
2.3 تغيير نمط HTML
(1) بناء الجملة:
نسخة الكود كما يلي:
Object.Style.Property
(2) الوظيفة: تستخدم لتعديل نمط HTML
(3) مثال:
نسخة الكود كما يلي:
<body>
<h2 id = "con"> أحب JavaScript </h2>
<p> JavaScript يتيح صفحات الويب من عرض التأثيرات الديناميكية وتنفيذ وظائف تفاعل المستخدم. </p>
<script type = "text/javaScript">
var mychar = document.getElementById ("con") ؛
mychar.style.color = "red" ؛
mychar.style.backgroundColor = "#ccc" ؛
mychar.style.width = "300px" ؛
</script>
</body>
(4) ملاحظة: يحتوي الخاصية على العديد من الأنماط ، مثل اللون والارتفاع وما إلى ذلك ، والتي يمكن تعديلها باستخدام هذه الطريقة. لا تنس إضافة فاصلة فاصلة إلى الخصائص من بعدها.
2.4 عرض وإخفاء (سمة العرض)
(1) بناء الجملة:
object.style.display = القيمة
(2) الوظيفة: غالبًا ما تُرى العرض والاختباء على صفحات الويب ، والتي يتم تحقيقها باستخدام سمة العرض.
(3) مثال:
نسخة الكود كما يلي:
<script type = "text/javaScript">
وظيفة hiddentext ()
{
var mychar = document.getElementById ("con") ؛
mychar.style.display = "none" ؛
}
وظيفة showtext ()
{
var mychar = document.getElementById ("con") ؛
mychar.style.display = "block" ؛
}
</script>
(4) ملاحظة: قيمة القيمة هي لا شيء وكتلة ، حيث لا يتم عرض أي منها ، ويتم عرض الكتلة.
2.5 سمة classname
(1) بناء الجملة:
نسخة الكود كما يلي:
object.className = className
(2) الوظيفة: 1. احصل على سمة الفصل للعنصر ؛ 2. حدد نمط CSS لعنصر في صفحة الويب لتغيير مظهر العنصر.
(3) مثال:
نسخة الكود كما يلي:
<head>
<meta http-equiv = "content-type" content = "text/html ؛ charset = gb2312">
<title> سمة className </title>
<style>
الجسم {font-size: 16px ؛}
.واحد{
الحدود: 1 بكسل Solid #EEE ؛
العرض: 230 بكسل ؛
الارتفاع: 50 بكسل ؛
الخلفية: #CCC ؛
اللون: أحمر.
}
.اثنين{
الحدود: 1px الصلبة #CCC ؛
العرض: 230 بكسل ؛
الارتفاع: 50 بكسل ؛
الخلفية:#9CF ؛
اللون: الأزرق.
}
</style>
</head>
<body>
<p id = "p1"> يتيح JavaScript صفحات الويب لعرض التأثيرات الديناميكية وتنفيذ وظائف تفاعل المستخدم. </p>
<type type = "button" value = "add style" onClick = "add ()"/>
<p id = "p2"> يتيح JavaScript صفحات الويب لعرض التأثيرات الديناميكية وتنفيذ وظائف تفاعل المستخدم. </p>
<type type = "button" value = "تغيير المظهر" onClick = "Modify ()"/>
<script type = "text/javaScript">
وظيفة إضافة () {
var p1 = document.getElementById ("p1") ؛
p1.ClassName = "واحد" ؛
}
وظيفة modify () {
var p2 = document.getElementById ("p2") ؛
p2.ClassName = "اثنين" ؛
}
</script>
</body>
ما سبق هو كل شيء عن هذا المقال ، أتمنى أن تنال إعجابك.