HTML DOM API

The DOM API (Application Programming Interface) is a set of Methods and Properties that allow JavaScript to change the content, structure, and style of any HTML elements.

An API Method is an Action that you can do on an HTML element.

An API Property is a Value that you can access on an HTML element.

document is the HTML document .

getElementById() is a document method .

myPara = getElementById("demo") retrieves the "demo" element .

innerHTML is an element property .

myPara.innerHTML = "Hello World!" changes the property . HTML DOM API Abilities The DOM API provides us with the ability to: Find and select elements Change element content and attributes Add, remove, or modify elements Change CSS styles Add event listeners to react to user input JavaScript is the Language The DOM API is a standard for how to get, change, add, or delete HTML DOM elements. JavaScript is the language used in browsers to access the DOM through the API. API Methods and Properties Developers use global objects like document and window as entry points to any API. If you want to access any element in an HTML page, you always start with accessing the document object. The document object represents your web page . To manipulate HTML with JavaScript, you first need to select an element . Below are some examples of how you can use the document object to access HTML: Selecting 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 document.querySelector( selector ) Find the first element that matches a CSS selector document.querySelectorAll( selector ) Find all elements that match a CSS selector The document object is the owner of all other objects in your web page. Accessing Element Content Property Description element .innerHTML The HTML content of an element element .textContent The text content of an element Accessing Element Attributes Property Description element . attribute Change the attribute value of an HTML element element .style. property The style of an HTML element Changing Element Attributes Method Description element .setAttribute() Create or set a new attribute Manipulating Structure Method Description document.createElement() Creates a new HTML element document.removeChild() Remove an HTML element document.appendChild() Add an HTML element document.replaceChild() Replace an HTML element Adding Event Handlers Method Description document.getElementById( id ).onclick = function(){ code } Adding event handler code to an onclick event

The DOM API provides us with the ability to:

• Find and select elements
• Change element content and attributes
• Add, remove, or modify elements
• Change CSS styles
• Add event listeners to react to user input

The DOM API is a standard for how to get, change, add, or delete HTML DOM elements.

JavaScript is the language used in browsers to access the DOM through the API.

Developers use global objects like document and window as entry points to any API.

If you want to access any element in an HTML page, you always start with accessing the document object. The document object represents your web page .

To manipulate HTML with JavaScript, you first need to select an element .

Below are some examples of how you can use the document object to access HTML:

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