An introduction to the JavaScript DOM.

An introduction to the JavaScript DOM.

At the most basic level, a website consists of an HTML and CSS files or document. The browser creates a representation of the document known as Document Object Model (DOM). This document enables JavaScript to access and manipulate the elements and styles of a website.

The model is built in a tree structure of objects and defines:

1). HTML elements as object.
2). Properties and events of the HTML elements.
3). Methods to access the HTML elements.

• Node is the places of the elements. Also remember attributes of elements and text got their own nodes, attribute-nodes and text-nodes respectively.

• ParentNode, childNodes, firstChild, lastChild, nextSibling, are important properties that helps us navigate between the nodes.

• The DOM Document is the owner of all other objects in your webpage which means if you want to access any object on your webpage you always have to start with the document. DOM Document also contains many important properties and methods that enable us to access and modify our website.
  Here is a brief list of common API’s in web and XML page scripting using DOM, you can also refer to them as DOM methods.

  1. document.getElementById(‘id’)
  2. document.getElementsByTagName(‘name’)
  3. document.createElement(‘element_name’)
  4. parentNode.appendChild(‘node’)
  5. element.innerHTML
  6. element.style
  7. element.setAttribute(‘attribute, value’)
  8. element.getAttribute(‘attributeName’)
  9. element.addEventListener(handler())
  10. window.content
  11. window.onload
  12. window.dump()
  13. window.scrollTo()

   By the end of the training we will have covered all of them but for now we will only cover the basic ones. Here are the most common
  

1). Get element by ID(“id_name”).
The getElementById() method is used to get a single element by its id. Let’s look at an example:
var title = document.getElementById(‘myTitle’);
In the above example we will get the element of the DOM with the id myTitle and save it in a variable called title.
2). Get elements by class name(“class_name”).
We can also get more than one object using the getElementsByClassName() method which returns an array of elements. In the example below we get all items with the class list-items and save them into a variable. In the example below we get all items with the class listItems and save them into a variable items.
var items = document.getElementsByClassName(‘listItems’);
3). Get element by tag name().
We can also get our elements by tag name using the getElementsByTagName() method. In the example below we get all div elements of our HTML document and save them into a variable divs.
var divs = document.getElementsByTagName(‘div’);
4). Queryselector()
ThequerySelector() method returns the first element that matches a specified CSS selector.
That means that you can get elements by id, class, tag and all other valid CSS selectors.
Here I just list a few of the most popular options.
Get by id:
var header = document.querySelector(‘#header’);

Get by tag:
var headings = document.querySelector(‘h1’);
Get by class:

The querySelectorAll() method is completely the same as the querySelector() except that it returns all elements that fit the CSS Selector.

Changing HTML Elements.
The HTML DOM allows us to change the content and style of an HTML element by changing its properties.

• Changing the HTML
  The innerHTML property can be used to change the content of an HTML element.
  document.getElementById(“#header”).innerHTML = “Hello World!”;
  In the above example we get the element with an id of header and set the inner content to “Hello World!”.
  InnerHTML can also be used to put tags in another tag. In the following example we put a h1 tag into all already existing div.
  Changing a value of an attribute
  You can also change the value of an attribute using the DOM.

document.getElementsByTag(“img”).src = “test.jpg”;

Changing the style
To change the style of an HTML element we need to change the style property of our elements. Here is an example syntax for changing styles:

document.getElementById(id).style.property = new style;

Now lets look at an example where we get an element and change the bottom border to a solid black line:
document.getElementsByTag(“h1”).style.borderBottom = “solid 3px #000”;
The CSS properties need to be written in camelcase instead of the normal css property name. In this example we used borderBottom instead of border-bottom.