DOM Document

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

DOM Documnets

The HTML DOM document object is the prime leader of all other objects in your web page.

The HTML DOM Document Object

The document object is a presentation of your web page.

To access any element in an HTML page, start with accessing the document object.

Below are some examples of how you can use the document object to access and manipulate HTML.

Finding HTML Elements

Method

Description

document.getElementById(id)

Find an element by element id

document.getElementsByTagName(name)

Find elements by tag name

document.getElementsByClassName(name)

Find elements by class name

Changing HTML Elements

Property

Description

element.innerHTML =  new html content

Change the inner HTML of an element

element.attribute = new value

Change the attribute value of an HTML element

element.style.property = new style

Change the style of an HTML element

Method

Description

element.setAttribute(attribute, value)

Change the attribute value of an HTML element

Adding and Deleting Elements

Method

Description

document.createElement(element)

Create an HTML element

document.removeChild(element)

Remove an HTML element

document.appendChild(element)

Add an HTML element

document.replaceChild(new, old)

Replace an HTML element

document.write(text)

Write into the HTML output stream