Document API - KirkGarcia182/domExtend GitHub Wiki
These API's is basically just a shortcut or sugarcoat to shorten the time you need to type long function names. Although this is not recommended but it's better to shorten the document object and store it in a variable globally. What I use is the $ sign for easy typing.
Example:
// let '$' sign hold the document object globally
window.$ = document;
// normal way to get an element with a specific id
let app1 = $.getElementById('app');
// domExt way to get an element with a specific id
let app2 = $.byId('app');
// normal way to get an element or elements with a specific class
let menus1 = $.getElementsByClassName('menu');
// domExt way to get an element or elements with a specific id
let menus2 = $.byClass('menu');
// normal way to get an element or elements using querySelectorAll
let contentParagraphs1 = $.querySelectorAll('.content p');
// domExt way to get an element or elements using querySelectorAll
let contentParagraphs2 = $.qsa('.content p');
// normal way to create an element
let myDiv1 = $.createElement('div');
// domExt way to create an element
let myDiv2 = $.ce('div');
// normal way to create a documentFragment
let myFragment1 = $.createDocumentFragment();
// domExt way to create a documentFragment
let myFragment2= $.cdf();Is a shortcut to createElement()
Is a shortcut to createDocumentFragment()
Creates a HTMLTemplateElement sets it's innerHTML and returns it. Note that text passed should be a Template Literal for it to work. To have a highlight in your template literals in VSCODE you will need to install Inline HTML
$.ct /*html*/`
template
`;A template with the same html mark up as the template literal you passed in the parameter
$.ct /*html*/`
<style>
#app{
width: 100%;
height: 100%;
background-color: pink;
}
</style>
<div id='app'></div>
`;Is a shortcut to getElementsByClassName().
Is a shortcut to getElementById()
Is a shortcut to querySelector().
Is a shortcut to querySelectorAll().