< JavaScript Programming
This lesson introduces dynamic HTML.
Objectives and Skills
Objectives and skills for this lesson include:[1]
- Complete and debug code that locates, modifies, and adds HTML elements and attributes
- getElementByld; getElementsByTagName; getElementsByClassName; setAttribute; createElement
Readings
Multimedia
- YouTube: JavaScript Tutorial for Beginners - 36 - Creating a new element
- YouTube: JavaScript Tutorial for Beginners - 37 - Creating a new element Part 2
- YouTube: JavaScript Tutorial for Beginners - 38 - Remove element
- YouTube: JavaScript Tutorial for Beginners - 39 - Create attribute
- YouTube: JavaScript Create HTML Element: How to dynamically add tags to your pages
- YouTube: JavaScript Changing CSS Styles
- YouTube: JavaScript Dynamic Welcoming Message
Examples
- W3Schools: JavaScript HTML DOM - Changing HTML
- W3Schools: JavaScript HTML DOM - Changing CSS
- W3Schools: JavaScript HTML DOM Animation
- W3Schools: JavaScript HTML DOM Navigation
- W3Schools: JavaScript HTML DOM Elements (Nodes)
- W3Schools: JavaScript HTML DOM Collections
- W3Schools: JavaScript HTML DOM Node Lists
- Example Code
Activities
Complete the following activities using external JavaScript code. Apply JavaScript best practices, including comments, indentations, naming conventions, and constants. Use input elements for input and respond to input or change events or add buttons and respond to click events. Use HTML elements for output. Use separate functions for each type of processing. Avoid global variables by passing parameters and returning results. Create test data to validate the accuracy of each program. Add comments at the top of the program and include references to any resources used.
- Extend any of the activities from JavaScript Programming/Arrays to use an array to hold the information generated during processing and display the results from the array using dynamic HTML to create and append HTML elements after processing is complete.
Lesson Summary
- To dynamically change your HTML with JavaScript, you need to fully understand how to traverse the node tree and the relationship between nodes.[2]
- Each HTML element node, except the root element node, has a parent node.[3]
- Text is the value of the text node. The text node has to be created and appended to the element. [4]
Key Terms
- dynamic HTML
- Dynamic HTML (DHTML) is based on properties of the HTML, JavaScript, CSS, and DOM which helps in making dynamic content. DHTML makes use of Dynamic object model to make changes in settings and also in properties and methods.[5]
- node
- Every Element in the HTML document is a node [6]
- NodeList object
- A NodeList object is a list (collection) of nodes extracted from a document.[7]
- node relationships
- The nodes in the node tree have a hierarchical relationship to each other. The terms parent, child, and sibling are used to describe the relationships. [8]
See Also
- Dev To: Add Dynamic Styling to HTML Elements
- Geeks for Geeks: Dynamic HTML Introduction
- InformIT: Understanding Dynamic Websites and HTML5 Applications
- JavaScript.info: Modifying the document
- Lifewire: How Dynamic HTML (DHTML) Is Used to Create Interactive Pages
- TutorialRepublic: JavaScript DOM Get Set Attributes
- Way2tutorial: Dynamic HTML
References
- ↑ Microsoft: Exam 98-382 Introduction to Programming Using JavaScript
- ↑ https://www.w3schools.com/js/js_htmldom_navigation.asp
- ↑ W3Schoolsː JavaScript HTML DOM Navigation
- ↑ W3Schoolsː JavaScript HTML DOM Elements (Nodes)
- ↑ https://www.geeksforgeeks.org/dhtml-introduction/
- ↑ https://www.w3.org/2003/01/dom2-javadoc/org/w3c/dom/Node.html
- ↑ https://www.w3schools.com/js/js_htmldom_nodelist.asp
- ↑ https://www.w3schools.com/js/js_htmldom_navigation.asp
This article is issued from Wikiversity. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.