https://github.com/chharvey/extrajs-dom

Javascript extensions to DOM.
https://github.com/chharvey/extrajs-dom

attribute dom element node tree

Last synced: about 1 month ago
JSON representation

Javascript extensions to DOM.

• Host: GitHub
• URL: https://github.com/chharvey/extrajs-dom
• Owner: chharvey
• License: mit
• Created: 2017-09-20T19:40:08.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-02-05T07:25:09.000Z (almost 4 years ago)
• Last Synced: 2024-11-12T16:46:30.494Z (about 1 month ago)
• Topics: attribute, dom, element, node, tree
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/extrajs-dom/
• Size: 1.04 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [extrajs-dom](https://chharvey.github.io/extrajs-dom/docs/api/)

Javascript extensions to DOM.

DOM code is kinda spaghetti-like.

Use this package to streamline your code and keep the control flow sensible.

## Install

```bash

$ npm install extrajs-dom

```

## Example

traditional DOM methods:

```js

function createMyLink(url, text) {

  let link = document.createElement('a')

  link.classList.add('my-link')

  link.setAttribute('itemprop', 'url')

  link.setAttribute('itemscope', '')

  link.setAttribute('itemtype', 'http://schema.org/URL')

  link.rel = 'author'

  link.href = url

  link.textContent = text

  return link

}

```

extrajs-dom methods:

```js

const xjs = require('extrajs-dom')

const createMyLink = (url, text) =>

  new xjs.HTMLAnchorElement(document.createElement('a'))

    .addClass('my-link')

    .attr({

      itemprop : 'url',

      itemscope: '',

      itemtype : 'http://schema.org/URL',

    })

    .rel('author')

    .href(url)

    .textContent(text)

    .node // returns the modified Node (originally passed to constructor)

```

## Features

- Method chaining

- `xjs.Node#empty()` removes all children

- `xjs.Node#trimInner()` removes all empty and whitespace-only Text node descendants

- `xjs.Node#run()` executes a custom function for any unsupported features you might need

- `xjs.Node#select()` executes a custom function based on a condition

- `xjs.Element#attr()` sets/removes multiple attributes in one step; taking object and function arguments

- `xjs.Element#{addClass,removeClass,replaceClassString}()` for better `[class]` attribute manipulation

- `xjs.{Document,DocumentFragment}#innerHTML()` gets what you would expect

- Populate `
`, `
`, ``, and `` as lists of data