DOM

With the DOM, Python can access and change all the elements of window.

DOM methods are actions you can perform (on Elements).

DOM properties are values (of Elements) that you can set or change.

The DOM Programming Interface

The DOM can be accessed with Python.

In the DOM, all elements are defined as objects.

The programming interface is the properties and methods of each object.

A property is a value that you can get or set (like changing the content of an element).

A method is an action you can do (like add or deleting an element).

Example

document.getElementById("demo").innerHTML = "Hello World!"

In the example above, getElementById is a method, while innerHTML is a property.

The getElementById Method

The most common way to access an element is to use the id of the element.

In the example above the getElementById method used id="demo" to find the element.

The innerHTML Property

The easiest way to get the content of an element is by using the innerHTML property.

The innerHTML property is useful for getting or replacing the content of elements.

The innerHTML property can be used to get or change any element.

Document

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

The HTML DOM Document Object

The document object represents your UI.

If you want to access any element, 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

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

Adding Events Handlers

Method	Description
document.getElementById(id).onclick = function	Adding event handler code to an onclick event ⚠️ Not supported yet

Above method is Not supported yet. Instead use

document.getElementById(id).addEventHandler(event, handler)