Dom

Check if an element is a descendant of another

JavaScript version

const isDescendant = (child, parent) => parent.contains(child);

TypeScript version

const isDescendant = (child: Node, parent: Node): boolean => parent.contains(child);

---

Check if an element is focused

JavaScript version

const hasFocus = (ele) => ele === document.activeElement;

TypeScript version

const hasFocus = (ele: Node): boolean => ele === document.activeElement;

---

Check if the touch events are supported

JavaScript version

const touchSupported = () => 'ontouchstart' in window || (window.DocumentTouch && document instanceof window.DocumentTouch);

TypeScript version

const touchSupported = (): boolean => (
    'ontouchstart' in window || (window as any)['DocumentTouch'] && document instanceof (window as any)['DocumentTouch']
);

---

Check if user scrolls to the bottom of the page

JavaScript version

const isAtBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;

TypeScript version

const isAtBottom = (): boolean => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;

---

Detect Internet Explorer browser

JavaScript version

const isIE = !!document.documentMode;

TypeScript version

const isIE = !!(document as any).documentMode;

---

Detect macOS browser

JavaScript version

const isMacBrowser = /Mac|iPod|iPhone|iPad/.test(navigator.platform);

TypeScript version

const isMacBrowser: boolean = /Mac|iPod|iPhone|iPad/.test(navigator.platform);

---

Get all siblings of an element

JavaScript version

const siblings = (ele) => [].slice.call(ele.parentNode.children).filter((child) => child !== ele);

TypeScript version

const siblings = (ele: Node): Node[] => (ele.parentNode ? [].slice.call(ele.parentNode.children).filter((child) => child !== ele) : []);

---

Get the position of an element relative to the document

JavaScript version

const getPosition = (ele) => ((r = ele.getBoundingClientRect()), { left: r.left + window.scrollX, top: r.top + window.scrollY });

Example

getPosition(document.body); // { left: 0, top: 0 }

---

Get the selected text

JavaScript version

const getSelectedText = () => window.getSelection().toString();

---

Go back to the previous page

JavaScript version

history.back();

// Or
history.go(-1);

---

Hide an element

JavaScript version

// Pick the method that is suitable for your use case
const hide = (ele) => (ele.style.display = 'none');

// Or
const hide = (ele) => (ele.style.visibility = 'hidden');

// Or
const hide = (ele) => (ele.hidden = true);

TypeScript version

const hide = (ele: HTMLElement): string => (ele.style.display = 'none');

// Or
const hide = (ele: HTMLElement): string => (ele.style.visibility = 'hidden');

// Or
const hide = (ele: HTMLElement): boolean => (ele.hidden = true);

---

Insert an element after other one

JavaScript version

const insertAfter = (ele, anotherEle) => anotherEle.parentNode.insertBefore(ele, anotherEle.nextSibling);

// Or
const insertAfter = (ele, anotherEle) => anotherEle.insertAdjacentElement('afterend', ele);

TypeScript version

const insertAfter = (ele: Element, anotherEle: Element): Element | null => (anotherEle.parentNode ? anotherEle.parentNode.insertBefore(ele, anotherEle.nextSibling) : null);

// Or
const insertAfter = (ele: Element, anotherEle: Element): Element | null => anotherEle.insertAdjacentElement('afterend', ele);

---

Insert an element before other one

JavaScript version

const insertBefore = (ele, anotherEle) => anotherEle.parentNode.insertBefore(ele, anotherEle);

// Or
const insertBefore = (ele, anotherEle) => anotherEle.insertAdjacentElement('beforebegin', ele);

TypeScript version

const insertBefore = (ele: Element, anotherEle: Element): Element | null => (anotherEle.parentNode ? anotherEle.parentNode.insertBefore(ele, anotherEle) : null);

// Or
const insertBefore = (ele: Element, anotherEle: Element) => anotherEle.insertAdjacentElement('beforebegin', ele);

---

Insert given HTML after an element

JavaScript version

const insertHtmlAfter = (html, ele) => ele.insertAdjacentHTML('afterend', html);

TypeScript version

const insertHtmlAfter = (html: string, ele: Element): void => ele.insertAdjacentHTML('afterend', html);

---

Insert given HTML before an element

JavaScript version

const insertHtmlBefore = (html, ele) => ele.insertAdjacentHTML('beforebegin', html);

TypeScript version

const insertHtmlBefore = (html: string, ele: Element): void => ele.insertAdjacentHTML('beforebegin', html);

---

Redirect to another page

JavaScript version

const goTo = (url) => (location.href = url);

TypeScript version

const goTo = (url: string): string => (location.href = url);

---

Reload the current page

JavaScript version

const reload = () => location.reload();

// Or
const reload = () => (location.href = location.href);

TypeScript version

const reload = (): void => location.reload();

// Or
const reload = (): string => (location.href = location.href);

---

Replace an element

JavaScript version

const replace = (ele, newEle) => ele.parentNode.replaceChild(newEle, ele);

TypeScript version

const replace = (ele: Element, newEle: Element): Element | null => (ele.parentNode ? ele.parentNode.replaceChild(newEle, ele) : null);

---

Scroll to top of the page

JavaScript version

const goToTop = () => window.scrollTo(0, 0);

TypeScript version

const goToTop = (): void => window.scrollTo(0, 0);

---

Serialize form data

JavaScript version

const serialize = (formEle) => Array.from(new FormData(formEle)).reduce((p, [k, v]) => Object.assign({}, p, { [k]: p[k] ? (Array.isArray(p[k]) ? p[k] : [p[k]]).concat(v) : v }), {});

---

Show an element

JavaScript version

const show = (ele) => (ele.style.display = '');

TypeScript version

const show = (ele: HTMLElement): string => (ele.style.display = '');

---

Strip HTML from a given text

JavaScript version

const stripHtml = (html) => new DOMParser().parseFromString(html, 'text/html').body.textContent || '';

TypeScript version

const stripHtml = (html: string): string => new DOMParser().parseFromString(html, 'text/html').body.textContent || '';

---

Toggle an element

JavaScript version

const toggle = (ele) => (ele.style.display = ele.style.display === 'none' ? 'block' : 'none');

// Or
const toggle = (ele) => (ele.hidden = !ele.hidden);

TypeScript version

const toggle = (ele: HTMLElement): string => (ele.style.display = ele.style.display === 'none' ? 'block' : 'none');

// Or
const toggle = (ele: HTMLElement): boolean => (ele.hidden = !ele.hidden);

---