> For the complete documentation index, see [llms.txt](https://dicksonui.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dicksonui.gitbook.io/docs/guide/dom.md).

# DOM

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

```python
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 :warning: **Not supported yet** |

{% hint style="danger" %}
Above method is Not supported yet. Instead use

document.getElementById(*id*).addEventHandler(event, handler)
{% endhint %}