`](https://www.w3schools.com/TAGS/tag_samp.asp) | Samp | Defines sample output from a computer program |
| [``](https://www.w3schools.com/TAGS/tag_script.asp) | Script | Defines a client-side script |
| [`<section>`](https://www.w3schools.com/TAGS/tag_section.asp) | Section | Defines a section in a document |
| [`<select>`](https://www.w3schools.com/TAGS/tag_select.asp) | Select | Defines a drop-down list |
| [`<small>`](https://www.w3schools.com/TAGS/tag_small.asp) | Small | Defines smaller text |
| [`<source>`](https://www.w3schools.com/TAGS/tag_source.asp) | Source | Defines multiple media resources for media elements (`<video>` and `<audio>`) |
| [`<span>`](https://www.w3schools.com/TAGS/tag_span.asp) | Span | Defines a section in a document |
| [`<strong>`](https://www.w3schools.com/TAGS/tag_strong.asp) | Strong | Defines important text |
| [`<style>`](https://www.w3schools.com/TAGS/tag_style.asp) | Style | Defines style information for a document |
| [`<sub>`](https://www.w3schools.com/TAGS/tag_sub.asp) | Sub | Defines subscripted text |
| [`<summary>`](https://www.w3schools.com/TAGS/tag_summary.asp) | Summary | Defines a visible heading for a `<details>` element |
| [`<sup>`](https://www.w3schools.com/TAGS/tag_sup.asp) | Sup | Defines superscripted text |
| [`<svg>`](https://www.w3schools.com/TAGS/tag_svg.asp) | Svg | Defines a container for SVG graphics |
| [`<table>`](https://www.w3schools.com/TAGS/tag_table.asp) | Table | Defines a table |
| [`<tbody>`](https://www.w3schools.com/TAGS/tag_tbody.asp) | Tbody | Groups the body content in a table |
| [`<td>`](https://www.w3schools.com/TAGS/tag_td.asp) | Td | Defines a cell in a table |
| [`<template>`](https://www.w3schools.com/TAGS/tag_template.asp) | Template | Defines a container for content that should be hidden when the page loads |
| [`<textarea>`](https://www.w3schools.com/TAGS/tag_textarea.asp) | Textarea | Defines a multiline input control (text area) |
| [`<tfoot>`](https://www.w3schools.com/TAGS/tag_tfoot.asp) | Tfoot | Groups the footer content in a table |
| [`<th>`](https://www.w3schools.com/TAGS/tag_th.asp) | Th | Defines a header cell in a table |
| [`<thead>`](https://www.w3schools.com/TAGS/tag_thead.asp) | Thead | Groups the header content in a table |
| [`<time>`](https://www.w3schools.com/TAGS/tag_time.asp) | Time | Defines a specific time (or datetime) |
| [`<title>`](https://www.w3schools.com/TAGS/tag_title.asp) | Title | Defines a title for the document |
| [`<tr>`](https://www.w3schools.com/TAGS/tag_tr.asp) | Tr | Defines a row in a table |
| [`<track>`](https://www.w3schools.com/TAGS/tag_track.asp) | Track | Defines text tracks for media elements (`<video>` and `<audio>`) |
| [`<u>`](https://www.w3schools.com/TAGS/tag_u.asp) | U | Defines some text that is unarticulated and styled differently from normal text |
| [`<ul>`](https://www.w3schools.com/TAGS/tag_ul.asp) | Ul | Defines an unordered list |
| [`<var>`](https://www.w3schools.com/TAGS/tag_var.asp) | Var | Defines a variable |
| [`<video>`](https://www.w3schools.com/TAGS/tag_video.asp) | Video | Defines embedded video content |
| [`<wbr>`](https://www.w3schools.com/TAGS/tag_wbr.asp) | Wbr | Defines a possible line-break |
<!-- END_TAGS -->
## Available Methods
- jsonTable
- render
- generateHtml
- parseHtml
- textContent
## Getting Started
### Functional Approach
```html
<div id="root"></div>
<script type="module">
import { Div, P, Button, Row, Column, render } from "object-dom";
const label = new P({ text: "Hello World!" });
const button = new Button({
text: "Update",
styles: { width: "100px" },
});
const app = new Div({
children: [
new Column({
children: [
label,
button,
new Row({
styles: { padding: "10px" },
children: ["A", "B", "C"],
}),
],
}),
],
});
button.addEventListener('click', () => {
label.text = "New Update!";
}, false);
render(app, document.body.querySelector("#root"));
```
### Class Approach
```js
import { ObjectDom, Div, H1, Button, Row, Canvas } from "object-dom";
export class MyApp extends ObjectDom {
render = () => {
return new Div({
children: [new H1({ text: "Counter Example" }), new Counter(), new CanvasExample()],
});
};
}
class Counter extends ObjectDom {
value = 0;
render() {
return new Div({
styles: { margin: "5px" },
children: [
`${this.value}`,
new Row({
children: [
new Button({
text: "-",
styles: { width: "50px" },
events: {
click: () => {
this.value -= 1;
this.update();
},
},
}),
new Button({
text: "+",
styles: { width: "50px", marginLeft: "5px" },
events: {
click: () => {
this.value += 1;
this.update();
},
},
}),
],
}),
],
});
}
}
class CanvasExample extends ObjectDom {
render() {
return new Canvas({
styles: { width: "200px", height: "200px" },
onCreate: (node) => {
const canvas = node as HTMLCanvasElement;
const ctx = canvas.getContext("2d")!;
// Create gradient
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
},
});
}
}
render(new MyApp(), document.body.querySelector("#root"));
```
### JSON Table
```js
jsonTable(
[
{
first_name: "John",
last_name: "Smith",
company: "N/A",
},
{
first_name: "Steve",
last_name: "Jobs",
company: "Apple",
},
{
first_name: "Bill",
last_name: "Gates",
company: "Microsoft",
},
{
first_name: "Elon",
last_name: "Musk",
company: "Tesla",
},
],
{ style: { margin: "10px" } }
);
```
Which renders the following html:
```html
first_name
last_name
company
John
Smith
N/A
Steve
Jobs
Apple
Bill
Gates
Microsoft
Elon
Musk
Tesla
```