Custom Helper class that provides functionality for work with HTML DOM
Methods
DOM.el() = document.querySelector()
DOM.el(‘.selector’, parent) = parent.querySelector()
DOM.els() = document.querySelectorAll()
DOM.els(‘.selector’, parent) = parent.querySelecrtorAll()
DOM.getElement() – this is the base which is used for both, DOM.el and DOM.els
DOM.mostParent – something like element.closest(), but a bit different. the closest fucntion returns the first parent, DOM.mostParent returns the most toplevel element
DOM.cildren = element.children
DOM.parents – the list of all the parent elements
DOM.isHtmlString – checks if the string passed contains HTML tags or not
DOM.triggerEvent – triggers any event needed. Default events already has a default props, custom ones needs get passed options
DOM.inserAfter – inserts an element after reference one
DOM.insertBefore – inserts an element before reference one
DOM.create – simillar to react’s element creation, passing the tag, attributes and children – it will create an elements easier. children param can be a singular string or an arrat of elements, can be used with nested calling of this function
DOM.compareElement – check if element matches the passed selector
DOM.addEvent – allowing to add miltiple event listeners with different events to one element, allowing to pass or seletor or specify element. returns function that will clear event listeners
DOM.observeElements – passing selector and callback, callback will called ONCE if element is visible on the screen.