Week 8 - Session 1 - JavaScript in the Browser

blog image source
HTML document as a nested set of boxes. Tags such as <body> and </body> enclose other tags, which in turn contain other tags or text. There is an object, which we can interact with to find out things such as what HTML tag it represents and which boxes and text it contains. This representation is called the Document Object Model, or DOM for short.

The global binding document gives us access to these objects. Its documentElement property refers to the object representing the <html> tag. Since every HTML document has a head and a body, it also has head and body properties, pointing at those elements.

When a web page is loaded, the browser creates a Document Object Model of the page, which is an object oriented representation of an HTML document, that acts as an interface between JavaScript and the document itself and allows the creation of dynamic web pages:

  • JavaScript can add, change, and remove all of the HTML elements and attributes in the page.
  • JavaScript can change all of the CSS styles on the page.
  • JavaScript can react to all of the existing events in the page.
  • JavaScript can create new events on the page.

Document Object Model - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
Document - https://developer.mozilla.org/en-US/docs/Web/API/Document

Popular posts from this blog

Week 9 to 12 - Learning with MCR Codes

Week 9 - Session 1 - The Internet, the Web, HTTP