Greasy Fork

Shined up real nice.

Easy DOM

Makes it easier to work with the DOM by making it much easier to check if a list of elements exist, create elements in bulk and append items in bulk.

This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://greasyfork.org/scripts/39784-easy-dom/code/Easy%20DOM.js?version=265196

Advertisement
Author
Dan WL (DanWL)
Ratings
0 0 0
Version
1.3.2
Created
Updated
License
N/A
Applies to
All sites

Author's Description

How to capitalise a string:
capitalise(string);
Returns the capitalised string.

How to escape RegExp characters in strings:
EscapeRegExpChars(string);
Returns string with the RegExp characters escaped.

To use in a match:
String.match(new RegExp(EscapeRegExpChars(string)));

How to use isNumber:
isNumber(number)
Boolean returned - if the number is finite and the typeof number is number, true is returned else false is.

How to convert a DOM array to a normal array (DOMArray.forEach isn't a function, however using this function array.forEach becomes a function again):
TurnDOMArrayToNormalArray(DOMArray);
eg logging all items in DOMArray:
TurnDOMArrayToNormalArray(document.getElementsByClassName('class')).forEach(function(item){console.log(item);});

How to append elements:
works in this syntax:
Append(elements<, parentsOrAdjacentElements><, mode>);

elements is either an element or an array of elements.
parentsOrAdjacentElements is an optional parameter; default value is [document.body]. When specified, parentsOrAdjacentElements is either an existing element or an array of existing elements. Used to append/insertAdjacentElement the new elements.
mode is an optional parameter; default value is undefined. When specified, mode must be a string of where to insert the element next to the parentsOrAdjacentElements. If the value is a type of false or is "append", the parentOrAdjacentElement will append the new element. Valid modes to insert the element next to are the same as element.insertAdjacentElement.

How to create elements:
works in this syntax:
create(elements<, ids><, visualText><, parentsOrAdjacentElements><, mode>);

elements is either a string containing an element to create or an array of elements in string format to create i.e. the tagNames. This is parameter is required.
ids is an optional parameter. When specified, ids is either a string containing the new element/new element's id or an array of ids to give to the new elements in string format.
visualText is an optional parameter; when not specified the element's HTML/value is left unchanged. When specified, visualText is either a string containing the new element/new element's HTML/value or an array of HTML/value to give to the new elements in string format. If specified, ids must also be defined.
parentsOrAdjacentElements is an optional parameter; default value is [document.body]. When specified, parentsOrAdjacentElements is either an existing element or an array of existing elements. Used to append/insertAdjacentElement the new elements.
mode is an optional parameter; default value is undefined. When specified, mode must be a string of where to insert the element next to the parentsOrAdjacentElements. If the value is a type of false or is "append", the parentOrAdjacentElement will append the new element. Valid modes to insert the element next to are the same as element.insertAdjacentElement.
Elements are Appended after being created.

Checking if an element or a group of elements exist:
works in this syntax:
elementExists(elementIds<, whatToDoIfElementDoesntExist>);

elementIds is either a string containing the id of an element or an array of element ids in string format. This is parameter is required.
whatToDoIfElementDoesntExist is an optional function that gets called if an element doesn't exist. This can be used to create elements using the create function. Returns the existing elements. When using the create function, the created elements will be returned.

eg0 - single ids:
var elementIdsToCheck = "myId";

element = elementExists(elementIdsToCheck, (function()
{
	return create("aTagName", elementIdsToCheck);
}));
If the element with the id "myId" already exists, the element with that id will be returned
if the element with the id "myId" doesn't already exist, the element will the created. Its tagName will be "aTagName", its id will be "myId". The element's HTML/value will be blank. The element's parent will be the body of the document. The new element will then be returned.

eg1 - multiple ids:
var elementIdsToCheck = ['myId', 'anotherId'];

elements = elementExists(elementIdsToCheck, (function()
{
	return create(['aTagName', 'anotherTagName'], elementIdsToCheck);
}));
similar to eg0 except that the elements will be returned as an array of the elements

eg2 - checking multiple ids and setting the element's HTML/value if the elements don't already exist
var elementIdsToCheck = ['myId', 'anotherId'];

elements = elementExists(elementIdsToCheck, (function()
{
	return create(['aTagName', 'anotherTagName'], elementIdsToCheck, ['first element text', 'second element text']);
}));
If the elements with "myId" and "anotherId" exist, they will be returned as an array containing these elements.
if the element with "myId" as the id doesn't exist, the element will have "aTagName" as the tagName, its id will be "myId" and its HTML/value will be "first element text". if the element with "anotherId" as the id doesn't exist, the element will have "anotherTagName" as the tagName, its id will be "anotherId" and its HTML/value will be "second element text".
if only one of these elements didn't exist, then the non-existing element will be created. Elements with ids "myId" and "anotherId" will be returned as an array.

eg3 - multiple ids, only one with text:
var elementIdsToCheck = ['myId', 'anotherId'];

elements = elementExists(elementIdsToCheck, (function()
{
	return create(['aTagName', 'anotherTagName'], elementIdsToCheck, 'first element text');
}));
same idea as eg2 except that the element with "anotherId" will have blank HTML/value if the element isn't already created.

eg4 - single id, parent is an element with "parent" as the id:
var elementIdsToCheck = "myId";

elements = elementExists(elementIdsToCheck, (function()
{
	return create("aTagName", elementIdsToCheck, '', document.getElementById("parent"));
}));
If the element with the id of "myId" doesn't exist, the element will be created with the id of "myId". Its HTML/value will be an empty string. If the parent exists, the new element will be append to it (using parent.appendChild). If the parent doesn't exist, the element wont be appended.

eg5 - single id, adjacentElement is an element with "adjacentElement" as the id, insert the element before the adjacentElement
var elementIdsToCheck = "myId";

elements = elementExists(elementIdsToCheck, (function()
{
	return create("aTagName", elementIdsToCheck, '', document.getElementById("adjacentElement"), 'beforebegin');
}));
If the element with the id of "myId" doesn't exist, the element will be created with the id of "myId". Its HTML/value will be an empty string. If the adjacentElement exists, the new element will be append to it (using adjacentElement.insertAdjacentElement(mode, element)). If the adjacentElement doesn't exist, the element wont be appended. It is possible to have multiple parents or adjacentElements for each element using an array. If not all of the parentsOrAdjacentElements are specified, all omitted parentsOrAdjacentElements will be the last specified parent or adjacentElement. The mode (in this case "beforebegin") must stay the same for all elements.