# presentation-dom

> The Augmented.js Next - Presentation Dom Module.

Latest version **3.0.3** (published 2020-07-14) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install presentation-dom
pnpm add presentation-dom
yarn add presentation-dom
bun add presentation-dom
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.3 |
| Published | 2020-07-14 |
| First published | 2018-08-10 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 59.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Bob Warren |
| Maintainers | thedocbwarren |
| Keywords | augmentedjs, presentation |

## Links

- npm: https://www.npmjs.com/package/presentation-dom
- Repository: https://github.com/Augmentedjs/presentation-dom
- Homepage: http://www.augmentedjs.com
- Issues: https://github.com/Augmentedjs/presentation-dom/issues
- npm.io page: https://npm.io/package/presentation-dom

## Recent versions

- 3.0.3 (latest) — 2020-07-14
- 3.0.2 — 2020-07-14
- 3.0.1 — 2020-07-14
- 3.0.0 — 2020-07-13
- 2.8.2 — 2019-05-21
- 2.8.1 — 2018-11-12
- 2.8.0 — 2018-08-25
- 2.7.1 — 2018-08-12
- 2.7.0 — 2018-08-12
- 2.6.2 — 2018-08-12
- 2.6.1 — 2018-08-12
- 2.6.0 — 2018-08-10
- 2.5.2 — 2018-08-10

## README

# presentation-core

Augmented.js Presentation Dom Module

# API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

### Table of Contents

-   [$](#)
    -   [Examples](#examples)
-   [Dom](#dom)
    -   [getViewportHeight](#getviewportheight)
    -   [getViewportWidth](#getviewportwidth)
    -   [setValue](#setvalue)
        -   [Parameters](#parameters)
    -   [getValue](#getvalue)
        -   [Parameters](#parameters-1)
    -   [selector](#selector)
        -   [Parameters](#parameters-2)
    -   [selectors](#selectors)
        -   [Parameters](#parameters-3)
    -   [query](#query)
        -   [Parameters](#parameters-4)
    -   [hide](#hide)
        -   [Parameters](#parameters-5)
    -   [show](#show)
        -   [Parameters](#parameters-6)
    -   [setClass](#setclass)
        -   [Parameters](#parameters-7)
    -   [addClass](#addclass)
        -   [Parameters](#parameters-8)
    -   [removeClass](#removeclass)
        -   [Parameters](#parameters-9)
    -   [replaceClass](#replaceclass)
        -   [Parameters](#parameters-10)
    -   [containsClass](#containsclass)
        -   [Parameters](#parameters-11)
    -   [toggleClass](#toggleclass)
        -   [Parameters](#parameters-12)
    -   [empty](#empty)
        -   [Parameters](#parameters-13)
    -   [injectTemplate](#injecttemplate)
        -   [Parameters](#parameters-14)
-   [stringToHTML](#stringtohtml)
    -   [Parameters](#parameters-15)
-   [getAttributes](#getattributes)
    -   [Parameters](#parameters-16)
-   [createDOMMap](#createdommap)
    -   [Parameters](#parameters-17)
-   [addAttributes](#addattributes)
    -   [Parameters](#parameters-18)
-   [diffAtts](#diffatts)
    -   [Parameters](#parameters-19)
-   [makeElem](#makeelem)
    -   [Parameters](#parameters-20)
-   [diff](#diff)
    -   [Parameters](#parameters-21)

## $

Augmented jQuery-like selectors usinge native selectors&lt;/br/>
Will return a nodelist for all selections unless only one is found.

### Examples

```javascript
$("#myElement");
$("section#main header");
  - or start from Element:
$("header", mainSectionEl);
```

## Dom

DOM related functions

### getViewportHeight

Gets the height of the browser viewport

Returns **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** The height of the viewport

### getViewportWidth

Gets the width of the browser viewport

Returns **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** The width of the viewport

### setValue

Sets the value of an element<br/>
Will detect the correct method to do so by element type

#### Parameters

-   `el` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling))** el Element or string of element selector
-   `value` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Value to set (or HTML)
-   `onlyText` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Value will set as text only

### getValue

Gets the value of an element<br/>
Will detect the correct method to do so by element type

#### Parameters

-   `el` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling))** el Element or string of element selector

Returns **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Returns the value of the element (or HTML)

### selector

Selector function<br/>
Supports full query selection

#### Parameters

-   `query` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Element or string of element selector

Returns **[Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling)** Returns the element (or first of type)

### selectors

Selectors function<br/>
Supports full query selection

#### Parameters

-   `query` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Element or string of element selector

Returns **[NodeList](https://developer.mozilla.org/docs/Web/API/NodeList)** Returns all the nodes selected

### query

Query function<br/>
Supports full query selection but acts like jQuery

#### Parameters

-   `query` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Element or string of element selector
-   `el` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling))** el Element to start from (optional)

Returns **([NodeList](https://developer.mozilla.org/docs/Web/API/NodeList) \| [Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling))** Returns all the nodes selected

### hide

Hides an element

#### Parameters

-   `el` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling))** el Element or string of element selector

### show

Shows an element

#### Parameters

-   `el` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling))** el Element or string of element selector
-   `display` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Value to set for "display" property (optional)

### setClass

Sets the class attribute (completely)

#### Parameters

-   `el` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling))** el Element or string of element selector
-   `cls` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the class value

### addClass

Adds a class attribute

#### Parameters

-   `el` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling))** el Element or string of element selector
-   `cls` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the class value

### removeClass

Remove a class attribute

#### Parameters

-   `el` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling))** el Element or string of element selector
-   `cls` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the class value

### replaceClass

Replace a class attribute with a new one

#### Parameters

-   `el` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling))** el Element or string of element selector
-   `oldCls` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the old class value
-   `newCls` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the new class value

### containsClass

Returns true if it contains the class

#### Parameters

-   `el` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling))** Element or string of element selector
-   `cls` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the class value

Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Returns true is contains class

### toggleClass

Toggle class on element

#### Parameters

-   `el` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling))** Element or string of element selector
-   `cls` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the class

### empty

Empty a element container

#### Parameters

-   `el` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling))** Element or string of element selector

### injectTemplate

injectTemplate method - Injects a template element at a mount point

#### Parameters

-   `template` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** The template selector
-   `mount` **[Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling)** The mount point as Document.Element or String

## stringToHTML

Convert a template string into HTML DOM nodes

### Parameters

-   `str` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** The template string

Returns **[Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling)** The template HTML

## getAttributes

Create an array of the attributes on an element

### Parameters

-   `attributes` **NamedNodeMap** The attributes on an element

Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)** The attributes on an element as an array of key/value pairs

## createDOMMap

Create a DOM Tree Map for an element

### Parameters

-   `element` **[Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling)** The element to map
-   `isSVG` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** If true, node is within an SVG

Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)** A DOM tree map

## addAttributes

Add attributes to an element

### Parameters

-   `elem` **[Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling)** The element
-   `atts` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)** The attributes to add

## diffAtts

Diff the attributes on an existing element versus the template

### Parameters

-   `template` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** The new template
-   `existing` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** The existing DOM node

## makeElem

Make an HTML element

### Parameters

-   `elem` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** The element details

Returns **[Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling)** The HTML element

## diff

Diff the existing DOM node versus the template

### Parameters

-   `templateMap` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)** A DOM tree map of the template content
-   `domMap` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)** A DOM tree map of the existing DOM node
-   `elem` **[Node](https://developer.mozilla.org/docs/Web/API/Node/nextSibling)** The element to render content into

---
_Source: https://npm.io/package/presentation-dom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._