jPack dom Demo

Javascript component for getting DOM Elements from just about anything you provide (string selector, jQuery object, array, NodeList, HTMLCollection, etc)

by Shane Stebner

HTML

<script src="https://htmlguyllc.github.io/jPack/dist/jpack.bundled.min.js"></script>
<a>I'm a link</a>
<div>Div</div>
<div>Div 2</div>
<link>
<replaceme>Replace ME!</replaceme>
<b style="display:none">I'm hidden!</b>
<i style="position:absolute;top:0;left:-1000px;">I'm off the page</i>
<u>I'm here and visible :)</u>
<hr>
<results>
  <h1>Results:</h1>
</results>

CSS

body {
  background: white;
}

JavaScript

/**
jPack dom Demo
https://htmlguyllc.github.io/jPack/#dom
*/

//show the results in HTML
function expected(msg) {
  jpack.dom.getElement('results').innerHTML += '<hr>Expected: ' + msg;
}

function unexpected(msg) {
  jpack.dom.getElement('results').innerHTML += '<hr>Unexpected: ' + msg;
}

//will fail
try {
  //try to get a span, if not found or found multiple, error!
  jpack.dom.getElement('span', true, true);
  unexpected('success');
} catch (e) {
  expected(e);
}

//will fail
try {
  //try to get a div, if not found or found multiple, error!
  jpack.dom.getElement('div', true, true);
  unexpected('success');
} catch (e) {
  expected(e);
}

//set all jpack components on the window (so we can use dom instead of jpack.dom) - use at your own risk!
jpack.setGlobal();

//will succeed
try {
  //try to get a div, throw error if not found, don't throw an error if multiple were found (it'll just return the first)
  dom.getElement('div', true, false);
  expected('success');
} catch (e) {
  unexpected(e);
}

//will succeed
try {
  //try to get a div, don't throw an error if not found (returns null), don't throw an error if mult found (return the first)
  dom.getElement('div', false, false);
  expected('success');
} catch (e) {
  unexpected(e);
}

//will succeed
try {
  //try to remove link, throw error if it doesn't exist
  dom.remove('link', true);
  expected('success');
} catch (e) {
  unexpected(e);
}

//will fail
try {
  //try to remove link, throw error if it doesn't exist
  dom.remove('link', true);
  unexpected('success');
} catch (e) {
  expected(e);
}

//will succeed
try {
  //try to replace element "replaceme" with text, error if "replaceme" doesn't exist
  dom.replaceElWithHTML('replaceme', '<hr>Replaced!<hr>', true);
  expected('success');
} catch (e) {
  unexpected(e);
}

//will fail
try {
  //try to replace element "replaceme" with text, error if "replaceme" doesn't exist
  dom.replaceElWithHTML('replaceme', '<hr>Replaced!<hr>', true);
 ...