Wikiversity

JavaScript Programming/DOM and BOM

< JavaScript Programming

This lesson introduces the JavaScript Document Object Model (DOM) and Browser Object Model (BOM).

Objectives and Skills

edit

Objectives and skills for this lesson include:[1]

  • Identify and construct the Document Object Model (DOM) tree
    • window; document; body; other HTML elements
  • Complete and debug code that outputs to an HTML document
    • innerHTML; document.write
  • Complete and debug code that interacts with the Browser Object Model (BOM)
    • Manage state; display dialogs; determine screen size

Readings

edit
  1. Wikipedia: Document Object Model
  2. Wikipedia: Browser Object Model
  3. Wikibooks: JavaScript/Introduction to the Document Object Model (DOM)

Multimedia

edit
  1. YouTube: JavaScript Tutorial for Beginners - 25 - Document Object Model
  2. YouTube: JavaScript Tutorial for Beginners - 40 - Traversing the DOM
  3. YouTube: JavaScript Tutorial for Beginners - 41 - Traversing the DOM Part 2
  4. YouTube: JavaScript Tutorial for Beginners - 42 - Traversing the DOM Part 3
  5. YouTube: An Introduction to the DOM (Document Object Model) in JavaScript
  6. YouTube: Document Object Model Tutorial
  7. Youtube: Javascript DOM Manipulation
  8. YouTube: JavaScript Programming Tutorial 91 - Intro to the DOM
  9. JavaScript DOM Manipulation – Full Course for Beginners

Examples

edit

Activities

edit

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, add buttons and respond to click events, or set a timer interval and respond to interval 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.

  1. Create JavaScript code to display all tags in the current HTML document using document.getElementsByTagName("*").
  2. Create JavaScript code to display the nodeName and nodeType for all nodes in the current HTML document using the childNodes function. Use a JavaScript object (key/value pairs) to look up the nodeType and convert the type number to a string description.
  3. Create JavaScript code to display the current window size, screen size, and location information. Use the resize event to update the display whenever the window size changes.

Lesson Summary

edit
  • The Document Object Model (DOM) defines a standard for accessing documents.[2]
  • The Browser Object Model (BOM) allows JavaScript to "talk to" the browser.[3]
  • In the HTML DOM, the Element object represents an HTML element, like P, DIV, A, TABLE, or any other HTML element.[4]
  • DOM is frequently depicted similarly to a tree, where the child nodes branch downwards off their parents.
  • Parent-child relationships within the DOM can be used to target document elements. It is possible to move (traverse) from parent to child (downwards), from child to parent (upwards), and from sibling to sibling (sideways).[5]
  • HTML DOM is a standard for how to get, change, add, or delete HTML elements.[6]
  • DOM is essential for allowing webpages to change shape in response to user activity.
  • The BOM allows JavaScript to access several peices of information about a browser (with some limits for security) including: history, screen size, location, and cookies. [7]

Key Terms

edit
Browser Object Model (BOM)
The API of the browser that allows JavaScript to communicate with the browser.[8]
Document Object Model (DOM)
The data representation of the objects that comprise the structure and content of a document on the web.[9]
node
An HTML element. The "DOM" is a tree structure that represents the HTML of the website, and every HTML element is a "node". More specifically, "Node" is an interface that is implemented by multiple objects.[10]
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.[11]

See Also

edit

References

edit
  1. ↑ Microsoft: Exam 98-382 Introduction to Programming Using JavaScript
  2. ↑ w3schools: JavaScript HTML DOM<
  3. ↑ w3schools: JavaScript Window
  4. ↑ w3schools: HTML DOM Elemenets
  5. ↑ EJ Mediaː JavaScript Tutorial for Beginners - 40 - Traversing the DOM
  6. ↑ w3schools: HTML DOM
  7. ↑ "JavaScript Window". www.w3schools.com. Retrieved 2021-04-02.
  8. ↑ w3schools: JavaScript Window
  9. ↑ MDN: DOM Introduction
  10. ↑ "JavaScript DOM Nodes". www.w3schools.com. Retrieved 2023-04-08.
  11. ↑ "JavaScript DOM Navigation". www.w3schools.com. Retrieved 2023-04-08.
Retrieved from "https://en.wikiversity.org/w/index.php?title=JavaScript_Programming/DOM_and_BOM&oldid=2682721"