Dom element type validations and visibility queries
npm install dom-element-types
import { isTextInput } from 'dom-element-types';
const passwordFieldElement = document.querySelector('input[type=password]');
isTextInput(passwordFieldElement); //trueDOM elements could be classified by its purpose using the following functions.
Matches img dom elements
import { isImage } from 'dom-element-types';
const someImage = document.querySelector('img');
isImage(someImage); //trueMatches a and [role=link] dom elements
import { isLink } from 'dom-element-types';
const someLink = document.querySelector('a');
isLink(someLink); //trueMatches the following text elements: p, h1, h2, h3, h4, h5, h6, ul, ol, dl, dt, li, dd, table, code, pre, blockquote and span
import { isText } from 'dom-element-types';
const someTitle = document.querySelector('h2');
isText(someTitle); //trueMatches the following text inputs elements: datalist, input[type=number], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], textarea, [role=listbox], [role=spinbutton], [role=textbox], [role=searchbox], [role=combobox], [contentEditable]
import { isTextInput } from 'dom-element-types';
const someEmailField = document.querySelector('input[type=email]');
isTextInput(someEmailField); //trueMatches textarea and [contentEditable] elements
import { isMultilineTextInput } from 'dom-element-types';
const someBoxContainer = document.querySelector('div[contentEditable]');
isMultilineTextInput(someBoxContainer); //trueMatches input[type=color] element
import { isColorInput } from 'dom-element-types';
const someColorField = document.querySelector('input[type=color]');
isColorInput(someColorField); //trueMatches the following list elements: select, keygen and [role=listbox]
import { isSelect } from 'dom-element-types';
const someList = document.querySelector('select');
isSelect(someList); //trueMatches audio and video elements
import { isVideo } from 'dom-element-types';
const someVideo = document.querySelector('video');
isVideo(someVideo); //trueMatches input[type=range] and [role=slider] elements
import { isRange } from 'dom-element-types';
const someRange = document.querySelector('input[type=range]');
isRange(someRange); //trueMatches the following datepicker elements: input[type=date], input[type=time], input[type=datetime], input[type=datetime-local], input[type=month] and input[type=week]
import { isAnyTypeOfDatePicker } from 'dom-element-types';
const sameDatePicker = document.querySelector('input[type=date]');
isAnyTypeOfDatePicker(sameDatePicker); //trueMatches input[type=date] element
import { isDatePicker } from 'dom-element-types';
const sameDatePicker = document.querySelector('input[type=date]');
isDatePicker(sameDatePicker); //trueMatches input[type=datetime] and input[type=datetime-local] elements
import { isDatetimePicker } from 'dom-element-types';
const sameDatePicker = document.querySelector('input[type=datetime]');
isDatetimePicker(sameDatePicker); //trueMatches input[type=month] element
import { isMonthPicker } from 'dom-element-types';
const sameDatePicker = document.querySelector('input[type=month]');
isMonthPicker(sameDatePicker); //trueMatches input[type=time] element
import { isTimePicker } from 'dom-element-types';
const sameDatePicker = document.querySelector('input[type=time]');
isTimePicker(sameDatePicker); //trueMatches input[type=week] element
import { isWeekPicker } from 'dom-element-types';
const sameDatePicker = document.querySelector('input[type=week]');
isWeekPicker(sameDatePicker); //trueDetermines if an element is scrollable by checking if the scrollHeight > clientHeight and if the computed style is configured for scrolling i.e., has overflowY === scroll or overflowY === auto.
import { isScrollable } from 'dom-element-types';
// create a container containing an element that exceeds it's height
let container = document.createElement('div');
document.body.appendChild(container);
container.style = 'overflow-y:scroll;height:400px';
let containerElement = document.createElement('div');
containerElement.style = 'height:800px';
container.appendChild(containerElement);
isScrollable(container); // trueThe following functions are useful to get all the visible DOM elements present in the screen (port view).
The function isVisible expects as a parameter a DOM element.
It will check if the element:
- is rendered inside the screen area
- is not transparent (opacity > 0)
- is visible (visibility !== 'hidden')
import { isVisible } from 'dom-element-types';
const visibleButton = document.querySelector('button');
isVisible(visibleButton); // trueIt returns an array of elements visible in the screen.
The function getVisibleElementsInViewPort expects as an optional parameter a valid selector otherwise defaults to '*'.
import {
getVisibleElementsInViewPort,
isVisible
} from 'dom-element-types';
const visibleButtons = getVisibleElementsInViewPort('button');
isVisible(visibleButtons[0]); // trueSame as getVisibleElementsInViewPort function but for each returned element it also returns the boundingClientRect and computedStyle.
In order to create custom validations the user can get all the element type selectors classified by purpose.
Returns an element type selectors map composed of the following types:
- audio
- button
- checkbox
- color
- datePicker
- file
- image
- link
- media
- range
- radio
- select
- text
- textInput
- video
- hasOnClickAttr
import { getAllElementTypes } from 'dom-element-types';
console.log(getAllElementTypes());
/*
Returns:
{
audio: ['audio'],
button: [
'button',
'input[type=button]',
'input[type=reset]',
'input[type=submit]',
'[role=button]',
'[role=menuitem]',
'[role=option]'
],
checkbox: [
'input[type=checkbox]',
'[role=checkbox]',
'[role=menuitemcheckbox]'
],
...
}
*/