Superdom.js
You have dom
. It has all the DOM virtually within it. Use that power:
// Fetch all of the links from the pagevar links = domahref; // Make the links open in a new tabdomatarget = '_blank';
Only for modern browsers
Getting started
Simply use the CDN via unpkg.com:
Or use npm or bower: npm|bower install superdom
.
Select
It always returns an array with the matched elements, just get a property of dom with that selector:
// Simple element selectorvar allLinks = doma; // Combined selectorvar importantLinks = dom'a.important';
There are also some predetermined elements, such as id
, class
and attr
that can be used for selection:
// Select HTML Elements by id:var main = domidmain; // by class:var buttons = domclassbutton; // or by attribute:var targeted = domattrtarget;var targeted = domattr'target="_blank"';
Generate
Use it as a function or a tagged template literal to generate a DOM fragments:
// Not a typo; tagged template literalsvar list = dom`<a href="https://google.com/">Google</a>`; // It is the same asvar link = ;
Delete elements
Delete a piece of the DOM
// Delete all of the elements with the class .googledelete domclassgoogle; // Is this an ad-block rule?
Attributes
You can easily manipulate attributes right from the dom
node. There are some aliases that share the syntax of the attributes such as html
and text
(aliases for innerHTML
and textContent
). There are others that travel through the dom such as parent
(alias for parentNode) and children
. Finally, class
behaves differently as explained below.
Get attributes
The fetching will always return an array with the element for each of the matched nodes (or undefined if not there):
// Retrieve all the urls from the pagevar urls = domahref; // #attr-list // ['https://google.com', 'https://facebook.com/', ...] // Get an array of the h2 contents (alias of innerHTML)var h2s = domh2html; // #attr-alias // ['Level 2 header', 'Another level 2 header', ...] // Get whether any of the attributes has the value "_blank"var hasBlank = domclassctatarget_blank; // #attr-value // true/false
You also use these:
- html (alias of
innerHTML
): retrieve a list of the htmls - text (alias of
textContent
): retrieve a list of the htmls - parent (alias of
parentNode
): travel up one level - children: travel down one level
Set attributes
// Set target="_blank" to all linksdomatarget = '_blank'; // #attr-set
domclasstableofcontentshtml = ` <ul class="tableofcontents"> </ul>`;
Remove an attribute
To delete an attribute use the delete
keyword:
// Remove all urls from the pagedelete domahref; // Remove all idsdelete domaid;
Classes
It provides an easy way to manipulate the classes.
Get classes
To retrieve whether a particular class is present or not:
// Get an array with true/false for a single classvar isTest = domaclasstest; // #class-one
For a general method to retrieve all classes you can do:
// Get a list of the classes of each matched elementvar arrays = domaclass; // #class-arrays // [['important'], ['button', 'cta'], ...] // If you want a plain list with all of the classes:var flatten = domaclass_flat; // #class-flat // ['important', 'button', 'cta', ...] // And if you just want an string with space-separated classes:var text = domaclass_text; // #class-text // 'important button cta ...'
Add a class
// Add the class 'test' (different ways)domaclasstest = true; // #class-make-truedomaclass = 'test'; // #class-push
Remove a class
// Remove the class 'test'domaclasstest = false; // #class-make-false
Manipulate
Did we say it returns a simple array?
doma;
But what an interesting array it is; indeed we are also proxy'ing it so you can manipulate its sub-elements straight from the selector:
// Replace all of the link's html with 'I am a link'domahtml = 'I am a link';
Of course we might want to manipulate them dynamically depending on the current value. Just pass it a function:
// Append ' ^_^' to all of the links in the pagedoma html + ' ^_^'; // Same as this:doma;
Note: this won't work
dom.a.html += ' ^_^';
for more than 1 match (for reasons)
Or get into genetics to manipulate the attributes:
domaattrtarget = '_blank'; // Only to external sites:var /^https?\:\/\/mypage\.com/;domaattr ? '' : '_blank';
Events
You can also handle and trigger events:
// Handle click events for all <a>domaon ...; // Trigger click event for all <a>domatriggerclick;
Testing
We are using Jest as a Grunt task for testing. Install Jest and run in the terminal:
grunt watch