Document Object Model

Introduction
Core DOM interfaces
Commonly used methods and properties
DOM manipulation

Introduction

The Document Object Model (DOM) is a programming interface for HTML documents, an object-oriented representation of the web page itself. The DOM represents the document as nodes and objects thus allowing page modifications via a scripting language such as JavaScript. Different browsers have different implementations of the DOM, however they all comply with certain web standards.

Core DOM interfaces

'document' object

The document object represents the web page itself.

'window' object

The window object represents a window containing a DOM document.

'element' object

The element object represents an HTML element.

Commonly used methods and properties

document.getElementById('idname');: Select all elements with the specified id name
document.getElementsByClassName('classname');: Select all elements with the specified class name
document.getElementsByTagName('tagname');: Select all elements in the document with the specified tag name
element.addEventListener(event, callback);: Attach an event handler to the specified element
element.attributes;: Return a live collection of all attribute nodes registered to the specified node.
element.getAttribute('attributename');: Return the specified attribute value of an element
element.removeAttribute('attributename');: Remove the specified attribute from an element
element.setAttribute('attributename', 'value');: Set or change the specified attribute, to the specified value
element.hasAttribute('atributename');: Return true if an element has the specified attribute, otherwise false
element.classList;: Get the class name(s) of an element
element.classList.toggle('classname');: Toggle class for an element
element.classList.remove('classname1', 'classname2', 'classname3');: Remove classes from an element
element.classList.add('classname1', 'classname2', 'classname3');: Add classes to an element
element.click();: Simulate a mouse-click on an element
element.id: Get the id of an element
element.innerHTML;: Set or return the content of an element
element.style;: Access a specified element's style object
element.style.backgroundColor = 'blue';: Set the style properties of an existing element
window.alert('Welcome');: Displays an alert box with a message and an OK button
window.close();: Close the current window
window.open('url');: Open a new browser window
window.print();: Print the content of the current window
window.scrollBy(xnum, ynum);: Scroll the document by the specified number of pixels
window.scrollTo(xpos, ypos): Scroll the document to the specified coordinates in pixels
window.innerHeight;: Get the height (in pixels) of the browser window viewport including, if rendered, the horizontal scrollbar
window.innerWidth: Get the width (in pixels) of the browser window viewport including, if rendered, the horizontal scrollbar

JavaScript syntax for setting CSS properties is slightly different than CSS (backgroundColor instead of background-color). For a list of all available properties, follow this link.

DOM manipulation

Example 1: Styling

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>Basic JS</title>
    </head>
    <body>
        <div id='main'>
            <div id='header'>
                <h2>Header</h2>
            </div>
            <div id='workExperience'>
                <h2>Work Experience</h2>
            </div>
            <div id='projects'>
                <h2>Projects</h2>
            </div>
            <div id='education'>
                <h2>Education</h2>
            </div>
            <div id='mapDiv'>
                <h2>Where I've Lived and Worked</h2>
            </div>
            <div id='lets-connect'>
                <h2>Let's Connect</h2>
            </div>
        </div>
    </body>
</html>

Result

JavaScript

We're going to place the following <script> tag last in the body:

<script>
    document.getElementById('header').style.backgroundColor = 'red';
    document.getElementById('workExperience').style.backgroundColor = 'green';
    document.getElementById('projects').style.backgroundColor = 'blue';
    document.getElementById('education').style.backgroundColor = 'cyan';
    document.getElementById('mapDiv').style.backgroundColor = 'yellow';
    document.getElementById('lets-connect').style.backgroundColor = 'gray';
</script>