html css document,JavaScript

JavaScript HTML DOM Document

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

The HTML DOM Document Object

The document object represents your web page.

If you want to access any element in an HTML page, you always 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

Method

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.setAttribute(attribute, value)

Change the attribute value of an HTML element

element.style.property = new style

Change the style 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(element)

Replace an HTML element

document.write(text)

Write into the HTML output stream

Adding Events Handlers

Method

Description

document.getElementById(id).onclick = function(){code}

Adding event handler code to an onclick event

Finding HTML Objects

The first HTML DOM Level 1 (1998), defined 11 HTML objects, object collections, and properties. These are still valid in HTML5.

Later, in HTML DOM Level 3, more objects, collections, and properties were added.

Property

Description

DOM

document.anchors

Returns all elements that have a name attribute

1

document.applets

Returns all elements (Deprecated in HTML5)

1

document.baseURI

Returns the absolute base URI of the document

3

document.body

Returns the

element

1

document.cookie

Returns the document's cookie

1

document.doctype

Returns the document's doctype

3

document.documentElement

Returns the element

3

document.documentMode

Returns the mode used by the browser

3

document.documentURI

Returns the URI of the document

3

document.domain

Returns the domain name of the document server

1

document.domConfig

Obsolete. Returns the DOM configuration

3

document.embeds

Returns all elements

3

document.forms

Returns all

elements

1

document.head

Returns the

element

3

document.images

Returns all elements

1

document.implementation

Returns the DOM implementation

3

document.inputEncoding

Returns the document's encoding (character set)

3

document.lastModified

Returns the date and time the document was updated

3

document.links

Returns all and elements that have a href attribute

1

document.readyState

Returns the (loading) status of the document

3

document.referrer

Returns the URI of the referrer (the linking document)

1

document.scripts

Returns all

3

document.strictErrorChecking

Returns if error checking is enforced

3

document.title

Returns the

element

1

document.URL

Returns the complete URL of the document

1