dotoo v0.2.0

domtools

Some useful tools for your DOM (and more)!

API

el: (html: string) => Element

A function used for generating an element based on a string of HTML.

Params

• html: string - The HTML string the element is based on.

Returns

The generated element.

route: (route: string, callback: (params: object) => any) => boolean

In case you want to do routing on the client side, use this function to define a route and trigger a callback once the current pathname matches the route.

Params

• route: string - Route the current pathname must match. E.g "/@/:username".
• callback: function (params: object) - This callback will call whenever the current pathname matches the route. It will get 1 argument, which is all the params it matched. For example, if your route is "/@/:username" and the current pathname is "/@/realmy", the object will be { "username": "realmy" }.

Returns

true

style: (selector: string, styles: object) => string

A function used for adding styles to a CSS selector.

Params

• selector: string - CSS selector of which elements these properties should apply to.
• styles: object - Object of styles. Example: { "font-family": "Arial, sans-serif", "color": "red" }

Returns

The generated CSS block.

elStyle: (element: Element, styles: object) => string

A function used for adding styles to a specific element.

Params

• element: Element - Element which these properties should apply to.
• styles: object - Object of styles. Example: { "font-family": "Arial, sans-serif", "color": "red" }

Returns

The generated CSS block.

getStyle: (selectorOrElement: string | element) => string | element

Get an object of properties applied to this selector or element (only returns DT-generated styles).

Params

• selectorOrElement: string | element - Selector or element of which styles must be returned.

Returns

The object of CSS properties applied to that selector/element (that has been generated by DT).

varDoc: () => { set: (name: string, value: string) => boolean; get: (name: string) => string; }

With this function, you can embed dynamic variables in your HTML using {{ curly braces }}. They also auto-update the page when you change them.

Returns

VarDocObject: An object with set and get functions.

Note

If you use this function, it renders changing innerText or similar Element prototype properties effectively useless, as, after varDoc replaces the mustaches, it still needs to know where those original mustaches were to replace them once again if a variable gets edited.

Example

<h1>{{ heading }}</h1>

<script>
    const doc = dt.varDoc();

    doc.set("heading", "Hello, world!"); // Now, the <h1> tag will display "Hello, world!"
</script>

VarDocObject.set: (name: string, value: string) => boolean

Set a variable.

Params

• name: string - Name of the variable.
• value: string - What to set it to.

Returns

Boolean on whether it worked or not.

VarDocObject.get: (name: string) => string

Get a variable.

Params

• name: string - Name of the variable you want to get the value of.

Returns

Value of the variable.