JavaScript DOM Course for Mastering Web Page Control | 90 Lessons | Abdullah Almehmadi

What Will You Learn in the JavaScript DOM Course?

• Understanding the DOM concept and its relation to JavaScript.
• Familiarity with the structure of HTML pages and how to convert them into a tree of elements.
• Understanding nodes, their types, and properties.
• Accessing web page elements using JavaScript functions.
• Creating new HTML elements and adding them to the page.
• Modifying element properties and content, and deleting them.
• Handling CSS properties using JavaScript.
• Understanding events and how to work with them.
• Using click events and mouse movements.
• Working with the Event object and using 'this' within events.
• Understanding relationships between elements like Parent, Children, and Siblings.
• Using time control functions like setTimeout and setInterval.
• Creating interactive effects and animations using JavaScript.
• Familiarity with the Window, Navigator, and History objects.

Who Is This Course For?

This course is suitable for the following groups:

• Beginners with a basic understanding of JavaScript who want to enhance their skills.
• Individuals who have learned HTML and want to add interactivity to web pages.
• Web developers looking to understand the DOM and control HTML page elements.
• Learners aiming to create interactive and dynamic web pages.
• Anyone wanting to continue their JavaScript learning and move on to more advanced practical applications.

Contents of the JavaScript DOM Course

Number of course videos: 90 videos.
Total course hours: 18:02:41.
Course language: Arabic.

Order of Lessons in the JavaScript DOM Course

1. Lesson 1: Introduction to JavaScript.
2. Lesson 2: Understanding web page elements.
3. Lesson 3: Understanding the Request-Response concept.
4. Lesson 4: Converting HTML to a Tree.
5. Lesson 5: Detailed explanation of converting HTML to a Tree.
6. Lesson 6: The relationship between JavaScript and the Tree.
7. Lesson 7: Understanding Node and Tree.
8. Lesson 8: Key terms related to the Tree.
9. Lesson 9: Understanding Text Node and plain text.
10. Lesson 10: JavaScript and the Tree and Action concept.
11. Lesson 11: Understanding Node ID.
12. Lesson 12: Working with Node as an Object.
13. Lesson 13: Understanding Syntax and DOM.
14. Lesson 14: Using the getElementById function.
15. Lesson 15: Using the innerText property.
16. Lesson 16: Additional information about innerText.
17. Lesson 17: Using the innerHTML property.
18. Lesson 18: Explanation of document.
19. Lesson 19: Using document within the code.
20. Lesson 20: Explanation of Node components.
21. Lesson 21: Understanding Node properties.
22. Lesson 22: Understanding Node Style.
23. Lesson 23: Using JavaScript with HTML.
24. Lesson 24: How to create a Node.
25. Lesson 25: Using createElement.
26. Lesson 26: Using appendChild.
27. Lesson 27: Detailed explanation of appendChild.
28. Lesson 28: Understanding parentNode.
29. Lesson 29: Detailed explanation of parentNode.
30. Lesson 30: Using getAttribute.
31. Lesson 31: Understanding setAttribute.
32. Lesson 32: Using document.body.
33. Lesson 33: Explanation of innerHTML.
34. Lesson 34: Using removeChild.
35. Lesson 35: Using removeAttribute.
36. Lesson 36: Creating a variable that points to a Node.
37. Lesson 37: Practical explanation of Search and Action concepts.
38. Lesson 38: Using getElementsByTagName.
39. Lesson 39: Using getElementsByTagName with length.
40. Lesson 40: Detailed explanation of getElementsByTagName.
41. Lesson 41: Detailed explanation of getElementsByClassName.
42. Lesson 42: Using getElementsByClassName.
43. Lesson 43: Practical example of working with multiple Nodes.
44. Lesson 44: Using nodeName.
45. Lesson 45: Using nodeType.
46. Lesson 46: Using nodeValue.
47. Lesson 47: Detailed explanation of Node types.
48. Lesson 48: Using createTextNode.
49. Lesson 49: Simple dynamic example.
50. Lesson 50: Detailed explanation of Node types.
51. Lesson 51: Explanation of Node Style.
52. Lesson 52: Understanding the style Object.
53. Lesson 53: Using Camel Case in writing.
54. Lesson 54: Understanding CSS properties in JavaScript.
55. Lesson 55: Accessing CSS using JavaScript.
56. Lesson 56: Working with the style property.
57. Lesson 57: Understanding CSS properties in JavaScript.
58. Lesson 58: Introduction to Events.
59. Lesson 59: Working with the onclick event.
60. Lesson 60: Using ondbclick and onmouseover.
61. Lesson 61: Understanding Anonymous Functions.
62. Lesson 62: Using 'this' inside an Event.
63. Lesson 63: Working with onmouseover and onmouseout events.
64. Lesson 64: Understanding effects in JavaScript.
65. Lesson 65: Using the Class property from JavaScript.
66. Lesson 66: Understanding the Event object.
67. Lesson 67: Understanding relationships between Sibling elements.
68. Lesson 68: Using nextSibling.
69. Lesson 69: Understanding the spacing issues between Nodes.
70. Lesson 70: Solving the spacing issues between Nodes.
71. Lesson 71: Using parentNode.
72. Lesson 72: Additional application on parentNode.
73. Lesson 73: Using the childNodes array.
74. Lesson 74: Practical application on childNodes.
75. Lesson 75: Understanding the number of Children.
76. Lesson 76: Using setTimeout.
77. Lesson 77: Using clearTimeout.
78. Lesson 78: Using setInterval.
79. Lesson 79: Using clearInterval.
80. Lesson 80: Practical application for moving colored text.
81. Lesson 81: Implementing smooth movement.
82. Lesson 82: Moving buttons – Part 1.
83. Lesson 83: Moving buttons – Part 2.
84. Lesson 84: Moving buttons – Part 3.
85. Lesson 85: Practical application for moving buttons.
86. Lesson 86: Organizing things – Part 1.
87. Lesson 87: Organizing things – Part 2.
88. Lesson 88: Understanding the Window object.
89. Lesson 89: Understanding the Navigator object.
90. Lesson 90: Understanding the History object.