dom-funcs

A very limited subset of dom functions I use every day

Install

npm i dom-funcs

Package on npm

API

• get-attributes
• load-image

getAttributes(node, name)

Return serialized attributes data filtered by name

Argument	Action
node	the tested Html Element node
name	the searched name. Match exact name or names followed by -

Return an object

• keys are transform to camelcase
• values are serialized. Number and Boolean are converted
• values can be simple Math expression – see toNumber

<div id="ref1" image-src="img.jpg" image-offset="250" image-z-index="1000" image-enabled="true" foo="bar"></div>

const getAttributes = require('dom-funcs/get-attributes')
 
// {src:'img.jpg', offset:250, zIndex:1000, enabled:true}
getAttributes(document.querySelector('#ref1'), 'image')

Get dataset values

<div id="ref2" data-ref-src="bg.jpg" data-ref-width="320" data-ref-z-index="10" data-foo="bar"></div>

const getAttributes = require('dom-funcs/get-attributes')
 
// {src:'bg.jpg', width:320, zIndex:10}
getAttributes(document.querySelector('#ref2'), 'data-ref')

Parse inner datas

<div id="ref3" image-src="img.jpg" image="offset(250) z-index(1000) enabled(true)" foo="bar"></div>

const getAttributes = require('dom-funcs/get-attributes')
 
// {src:'img.jpg', offset:250, zIndex:1000, enabled:true}
getAttributes(document.querySelector('#ref3'), 'image')

Using math expression

<div id="ref4" image="x(-.1 + -.2) y(100/250)"></div>

const getAttributes = require('dom-funcs/get-attributes')
 
// {x:-.3, y:.4}
getAttributes(document.querySelector('#ref4'), 'image')

loadImage(src, [cb], [ctx])

Create an image, execute a callback when the loading is done. Fallback with the famous transparent 1x1 gif

Argument	Action
src	the source of the image
cb	optional callback. Called once the loading is done with the image as first argument
ctx	optional context of this, default to global

Return the created image

const load = require('dom-funcs/load-image')
 
function onload(img) {
  // the image `width`
  img.width
}
 
var el = load('img.jpg', onload)
document.body.appendChild(el)

If the image doesn't exists, the returned image is a transparent 1x1 gif

const load = require('dom-funcs/load-image')
 
function onload(img) {
  // 1
  img.width
}
 
var el = load('path-to-nothing.jpg', onload)
document.body.appendChild(el)

Thanks

Mainly forked / inspired on

• load-img

License

MIT