What is the Document Object Model (DOM)?

• The DOM represents the HTML document and the HTML elements contained in it in the form of Javascript objects.
• These objects are at the disposal of the scripts loaded with the html document, for inspection and modification.
• The loaded HTML document corresponds to the document object.
• We can access other parts of the HTML by calling methods that return objects representing those parts of the HTML.

  document.getElementById()

  Argument: an id
  Return value: the element with the given id

  document.getElementsByTagName()

  Argument: a tag name
  Return value: a HTMLCollection of all the elements with the given tag (e.g. h1)

  document.getElementsByClassName()

  Argument: a class name
  Return value: a HTMLCollection of all the elements belonging to the given class

  document.querySelector()

  Argument: a CSS selector
  Return value: the first element corresponding to the selector (e.g. "div > p")

  document.querySelectorAll()

  Argument: a CSS selector
  Return value: a HTMLCollection of all elements corresponding to the selector (e.g. "div > p")

Examples

document.getElementById()

You are already familiar with this function for accessing elements in the document.

1. The function fetchInfo() can be found in file dom.js of the exercise file bundle. The function takes an element id as a parameter. Write in the body of this function so that it copies the content of the element with the given id into the element with id "info-box1".
2. Set up the function fetchInfo() as an event handler for clicks on the buttom Click to fetch info about cats in dom.html. You must call the function with a suitable argument (it will be the id of one of the paragraphs under "Information about animals" in dom.html).
3. Add a similar button that will fetch information about hamsters. For this step change the HTML file but not the Javascript code.
4. Test your solution.

document.getElementsByTagName()

The document method getElementsByTagName() returns all the elements of a certain type, grouped together in an HTMLCollection object. It takes the tag name (for example p or div) as an argument.

1. The function listEntries() can be found in file dom.js of the exercise file bundle. Define the function so that it lists the ids of all the paragraph elements in dom.html, separated by spaces, in the element with id info-box2 in dom.html.
2. Set the function as handler for clicks on the button in the Exercise 2 section of file dom.html
3. Test your solution.

document.getElementsByClassName()

The document method getElementsByClassName() returns all the elements belonging to a certain class, grouped together in an HTMLCollection object. It takes the class name as an argument but otherwise works in the same way as getElementsByTagName().

1. Have a look at the HTML paragraphs just under "Information about animals" in dom.html. You will see that some of the paragraphs have class mammal and some have class reptile.
2. Define a function (name and declare it yourself in dom.js) that fetches all the elements of class mammal and writes their ids out in the paragraph with id 'm-list' in dom.html. The function should then do the same for the reptiles, writing into paragraph with id 'r-list'.
3. Set up your function as the click handler for the button 'Click to list mammals and reptiles' in dom.html.
4. Test your solution.

document.querySelector() and document.querySelectorAll()

The methods document.querySelector() and document.querySelectorAll() take a CSS selector as an argument and return the first selected element or all the selected elements, respectively.

1. Declare and define a function that reads the contents of the first h3 element in the file dom.html and writes it to the element with id 'info-box4'. You must use method document.querySelector() to access the element.
2. Set the function as handler for clicks on the button 'Click to get first h3' and test.
3. Declare and define a function that reads the contents of any h3 elements that are inside a section element in the file dom.html, then writes them to the element with id 'info-box4'. The contents of each element should be placed in a paragraph. You must use method document.querySelectorAll() to access the elements.
4. Set the function as handler for clicks on the button 'Click to get h3 elements from section elements' and test.