# dom-properties-mixin

> Mixinable DOM element properties

Latest version **1.1.0** (published 2017-09-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install dom-properties-mixin
pnpm add dom-properties-mixin
yarn add dom-properties-mixin
bun add dom-properties-mixin
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2017-09-22 |
| First published | 2017-09-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Quentin Engles |
| Maintainers | hollowdoor |
| Keywords | DOM, properties, DOM, manipulation |

## Links

- npm: https://www.npmjs.com/package/dom-properties-mixin
- npm.io page: https://npm.io/package/dom-properties-mixin

## Dependencies (2)

- [css-proxy](https://npm.io/package/css-proxy.md) ^1.0.0
- [array-from](https://npm.io/package/array-from.md) ^2.1.1

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2017-09-22
- 1.0.2 — 2017-09-11
- 1.0.1 — 2017-09-10
- 1.0.0 — 2017-09-09

## README

dom-properties-mixin
==================

Install
-----

`npm install dom-properties-mixin`

Usage
----

**Note: In order for the mixin to work the receiving object must have an element property.**

```javascript
import { mixin } from 'dom-properties-mixin';
//You can import a more name space safe function instead
//mixinDOMProperties() is an alias to the mixin function
//import { mixinDOMProperties } from 'dom-properties-mixin';

class MyElement {
    constructor(){
        mixin(this);
        //or do this
        //mixinDOMProperties(this)

        //Assuming in some html document there is an
        //element with the full-name css class
        this.element = document.querySelector('.full-name');
    }
}
//Now use the properties.
//Here we get the element value.
console.log(new MyElement().value);
```

Properties that come from the mixin
----------------------------------

`el` refers to the constructed element that received this mixin.

`element` refers to an actual DOM element.

```javascript
const el = new MyElement();
```

### el.parent

The `parent` property of `el` is equal to `element.parentNode`.

### el.first, el.last

`first`, and `last` properties are equal to `element.firstChild`, and `element.lastChild` respectively.

You can also set these properties with a new element which will replace the current child element at that position.

### el.children

Use `el.children` to get, or set children elements to `element.children`.

When getting from `el.children` you will receive an array instead of the usual node list.

When setting `el.children` you can pass an array of DOM elements, or a DOM list like `element.children`, and the entire contents of `element.children` will be replaced by the new children.

The properties the same as on a reqular element.

* el.childNodes
* el.textContent
* el.className
* el.classList
* el.nextSibling

### el.style

`el.style` works similarly to the style property of DOM elements. Ideally a special Proxy object is returned. When the Proxy constructor is not available `element.style` is returned.

See [css-proxy](https://github.com/hollowdoor/css_proxy) to find out more about what returns from `el.style`.

### el.data

`el.data` is equal to `element.dataset`.

About
----

`dom-properties-mixin` is for non-method properties only. Use it to facilitate adding common properties of DOM element data properties to arbitrary objects.

Properties created from `dom-properties-mixin` are not configurable so there is some safety benefits. This also constrains how you can use it. In other ways you might find it a benefit.

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