האם ידעת שאנחנו יכולים להשתמש ב- JavaScript כדי לתפעל תוכן בדף האינטרנט? נראה מעניין נכון? בואו להבין מהו מודל אובייקט מסמך כלומר. DOM ב- JavaScript באופן הבא:
- מה זה DOM ב- JavaScript?
- פעולות של DOM ב- JavaScript
- שאילתת ה- DOM
- האזנה לאירועים
- אינטראקציה עם טפסים
- יצירת אלמנטים של HTML
- הוספת CSS
מה זה DOM ב- JavaScript?
מודל אובייקט המסמך או ה- DOM נוצר על ידי הדפדפן בעת טעינת דף אינטרנט. בצורה גרפית, זה כמו עץ של אלמנטים הנקראים גם צמתים, המשמשים לייצוג של כל אלמנט אחד בעמוד.
כל ה- DOM של דף האינטרנט שלנו יושב בתוך אובייקט המסמך. מבחינה תכנתית, מודל זה מאפשר לנו לקרוא או אפילו לשנות את תוכן העמוד שלנו באמצעות . האם זה לא מגניב?
פעולות של DOM ב- JavaScript
חלק מהפעולות שנוכל לבצע עם מודל זה הן:
system.exit (0) java
שנה / הסר רכיבי HTML ב- DOM / בדף.
שנה והוסף סגנונות CSS לאלמנטים
קרא ושנה תכונות (href, src, alt) וכו '.
צור אלמנטים חדשים והכנס אותם ל- DOM / העמוד.
צרף מאזינים לאירועים לאלמנטים (לחץ, לחץ על המקש, הגש)
שאילתת ה- DOM ב- JavaScript
לתפוס אלמנט HTML או להשיג אותו להוספה / שינוי או תוכן נקרא שאילתה.
קוד HTML:
Javascript ו- DOM h1 {font-size: 60px}קוד JavaScript:
var title = document.getElementById ('title') // צבע cgangin לאדום title.style.color = 'red' var body = document.getElementById ('body') // שינוי צבע הרקע לתכלת body.style. backgroundColor = 'כחול בהיר'שינינו את צבע הטקסט של הכותרת משחור לאדום באמצעות JavaScript. השגנו זאת באמצעות .סִגְנוֹן נכס שינה אז את הערך של צֶבַע לשווה ל נֶטוֹ .
עכשיו בואו נשנה את צבע הרקע של אלמנט הגוף ל כחול בהיר .
עם זה, אנו מגיעים לסוף של DOM זה במאמר JavaScript. אני מקווה שקיבלתם הבנה כיצד פועלים מודלים של אובייקט מסמכים וכיצד ליישם את אותה DOM ב- JavaScript.
עכשיו שאתה יודע על DOM ב- JavaScript, עיין ב מאת אדוריקה. הדרכת הסמכת בניית אתרים תסייע לך ללמוד כיצד ליצור אתרים מרשימים באמצעות HTML5, CSS3, Twitter Bootstrap 3, jQuery ו- Google APIs ולפרוס אותו לשירות אחסון פשוט של אמזון (S3).
יש לך שאלה עבורנו? אנא הזכיר זאת בקטע ההערות של 'DOM ב- JavaScript' ונחזור אליך.