Skip to content

Latest commit

 

History

History
79 lines (61 loc) · 3.41 KB

JavaScript-DOM.md

File metadata and controls

79 lines (61 loc) · 3.41 KB

JavaScript DOM- DOM

Source: Accesibility - Udacity Front End Web Development Nanodegree

Goals:

  • What is the Document Object Model (DOM)?
  • How the DOM gets created?
  • How to access the DOM with JavaScript?

Table Of Contents

  • a) The DOM
  • b) Create the DOM
  • c) Access the DOM

a) THE DOM: What is the Document Object Model (DOM)?

  • The DOM= "Document Object Model"

  • It is provided by the browser

  • It is a tree-like structure representation of the HTML document.

  • It contains all nodes relationship between elements, (=the element content and properties).

  • ❗ NOTE: The DOM is NOT part of the JavaScript language. It ONLY reference the document object model in one place, the "Global Object" section. ECMAScript is the language specification JavaScript is based on.

b) Create the DOM: How the DOM gets created?

  • When you request a website, it responds with HTML:
  • The received bytes run through a parsing process
  • characters ===> (eg., start tag character, atribute)
  • tags ===> it shows the HTML tags used (DOCTYPE, start tag, end tag, comments)
  • tokens ===> it convert these tags into tokens
  • nodes ===> it convert these tokens into nodes (HTML content and properties elements)
  • DOM ===> it convert nodes into the DOM (a tree structure, that captures HTML content and properties and relationships between the nodes)

c) Access the DOM: How to access the DOM with JavaScript?

_ There are various ways to access the DOM with JavaScript:

  1. SELECT AN ELEMENT BY ID
document.getElementById();

If we ran the code above in the console, we wouldn't get anything, because we did not tell it the ID of any element to get! We need to pass a string to .getElementById() of the ID of the element that we want it to find and subsequently return to us:

document.getElementById('footer');
  1. SELECT MULTIPLE ELEMENTS The next two DOM methods that we'll be looking at that both return multiple elements are: .getElementsByClassName() .getElementsByTagName()

Accessing Elements By Their Tag After looking at both .getElementById() and .getElementsByClassName(), the new .getElementsByTagName() method should seem quite easy on the eyes:

document.getElementsByTagName('p');

Important things to keep in mind:

  1. both methods use the document object
  2. both return multiple items
  3. the returned list=__NOT__ an array[]

Node A Node acts like a blueprint containing all the data (properties) and the functionality (methods). This is called an interface. Based on the interface we know the properties and methods that are going to be applied to the individual items, which we call nodes.

ELEMENT INTERFACE The element interface inherits all properties AND methods from the Node. It is a descendent iself of the node, as well as its elements.

Example:

Resources

Take Away

  • The DOM is: document object modal, constructed from the browser
  • globally accessible by JavaScript code using the document object

Creating Content with JavaScript Working with Browser Events Performance