Modules - dom - 《Video.js v7.13 Documentation》

Members
- static, constant $
- static, constant $$
Methods
Type Definitions

dom.js

Members

static, constant $

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 856](https://docs.videojs.com/utils_dom.js.html#line856)

Finds a single DOM element matching selector within the optional context of another DOM element (defaulting to document).

static, constant $$

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 876](https://docs.videojs.com/utils_dom.js.html#line876)

Finds a all DOM elements matching selector within the optional context of another DOM element (defaulting to document).

Methods

static addClass(element, classToAdd) → {Element}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 259](https://docs.videojs.com/utils_dom.js.html#line259)

Add a class name to an element.

Parameters:

Name	Type	Description
`element`	Element	Element to add class name to.
`classToAdd`	string	Class name to add.

Returns:

Element -

The DOM element with the added class name.

static appendContent(el, content) → {Element}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 762](https://docs.videojs.com/utils_dom.js.html#line762)

Normalizes and appends content to an element.

Parameters:

Name	Type	Description
`el`	Element	Element to append normalized content to.
`content`	module:dom~ContentDescriptor	A content descriptor value.

Returns:

Element -

The element with appended normalized content.

static blockTextSelection()

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 472](https://docs.videojs.com/utils_dom.js.html#line472)

Attempt to block the ability to select text.

static createEl(tagNameopt, propertiesopt, attributesopt, content) → {Element}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 151](https://docs.videojs.com/utils_dom.js.html#line151)

Creates an element and applies properties, attributes, and inserts content.

Parameters:

Name	Type	Attributes	Default	Description
`tagName`	string	<optional>	‘div’	Name of tag to be created.
`properties`	Object	<optional>	{}	Element properties to be applied.
`attributes`	Object	<optional>	{}	Element attributes to be applied.
`content`	module:dom~ContentDescriptor			A content descriptor object.

Returns:

Element -

The element that was created.

static emptyEl(el) → {Element}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 683](https://docs.videojs.com/utils_dom.js.html#line683)

Empties the contents of an element.

Parameters:

Name	Type	Description
`el`	Element	The element to empty children from

Returns:

Element -

The element with no children

static findPosition(el) → {module:dom~Position}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 555](https://docs.videojs.com/utils_dom.js.html#line555)

Get the position of an element in the DOM.

Uses getBoundingClientRect technique from John Resig.

Parameters:

Name	Type	Description
`el`	Element	Element from which to get offset.

Returns:

module:dom~Position -

The position of the element that was passed in.

See:
- http://ejohn.org/blog/getboundingclientrect-is-awesome/

static getAttribute(el, attribute) → {string}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 436](https://docs.videojs.com/utils_dom.js.html#line436)

Get the value of an element’s attribute.

Parameters:

Name	Type	Description
`el`	Element	A DOM element.
`attribute`	string	Attribute to get the value of.

Returns:

string -

The value of the attribute.

static getAttributes(tag) → {Object}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 393](https://docs.videojs.com/utils_dom.js.html#line393)

Get an element’s attribute values, as defined on the HTML tag.

Attributes are not the same as properties. They’re defined on the tag or with setAttribute.

Parameters:

Name	Type	Description
`tag`	Element	Element from which to get tag attributes.

Returns:

Object -

All attributes of the element. Boolean attributes will be true or false, others will be strings.

static getBoundingClientRect(el) → {Object|undefined}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 507](https://docs.videojs.com/utils_dom.js.html#line507)

Identical to the native getBoundingClientRect function, but ensures that the method is supported at all (it is in all browsers we claim to support) and that the element is in the DOM before continuing.

This wrapper function also shims properties which are not provided by some older browsers (namely, IE8).

Additionally, some browsers do not support adding properties to a ClientRect/DOMRect object; so, we shallow-copy it with the standard properties (except x and y which are not widely supported). This helps avoid implementations where keys are non-enumerable.

Parameters:

Name	Type	Description
`el`	Element	Element whose `ClientRect` we want to calculate.

Returns:

Object | undefined -

Always returns a plain object - or undefined if it cannot.

static getPointerPosition(el, event) → {module:dom~Coordinates}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 611](https://docs.videojs.com/utils_dom.js.html#line611)

Get the pointer position within an element.

The base on the coordinates are the bottom left of the element.

Parameters:

Name	Type	Description
`el`	Element	Element on which to get the pointer position on.
`event`	EventTarget~Event	Event object.

Returns:

module:dom~Coordinates -

A coordinates object corresponding to the mouse position.

static hasClass(element, classToCheck) → {boolean}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 239](https://docs.videojs.com/utils_dom.js.html#line239)

Check if an element has a class name.

Parameters:

Name	Type	Description
`element`	Element	Element to check
`classToCheck`	string	Class name to check for

Throws:

Throws an error if classToCheck has white space.
- Type
  
  Error

Returns:

boolean -

Will be true if the element has a class, false otherwise.

static insertContent(el, content) → {Element}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 780](https://docs.videojs.com/utils_dom.js.html#line780)

Normalizes and inserts content into an element; this is identical to appendContent(), except it empties the element first.

Parameters:

Name	Type	Description
`el`	Element	Element to insert normalized content into.
`content`	module:dom~ContentDescriptor	A content descriptor value.

Returns:

Element -

The element with inserted normalized content.

static isEl(value) → {boolean}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 86](https://docs.videojs.com/utils_dom.js.html#line86)

Determines, via duck typing, whether or not a value is a DOM element.

Parameters:

Name	Type	Description
`value`	Mixed	The value to check.

Returns:

boolean -

Will be true if the value is a DOM element, false otherwise.

static isInFrame() → {boolean}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 97](https://docs.videojs.com/utils_dom.js.html#line97)

Determines if the current DOM is embedded in an iframe.

Returns:

boolean -

Will be true if the DOM is embedded in an iframe, false otherwise.

static isReal() → {boolean}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 72](https://docs.videojs.com/utils_dom.js.html#line72)

Whether the current DOM interface appears to be real (i.e. not simulated).

Returns:

boolean -

Will be true if the DOM appears to be real, false otherwise.

static isSingleLeftClick(event) → {boolean}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 793](https://docs.videojs.com/utils_dom.js.html#line793)

Check if an event was a single left click.

Parameters:

Name	Type	Description
`event`	EventTarget~Event	Event object.

Returns:

boolean -

Will be true if a single left click, false otherwise.

static isTextNode(value) → {boolean}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 670](https://docs.videojs.com/utils_dom.js.html#line670)

Determines, via duck typing, whether or not a value is a text node.

Parameters:

Name	Type	Description
`value`	Mixed	Check if this value is a text node.

Returns:

boolean -

Will be true if the value is a text node, false otherwise.

static normalizeContent(content) → {Array}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 722](https://docs.videojs.com/utils_dom.js.html#line722)

Normalizes content for eventual insertion into the DOM.

This allows a wide range of content definition methods, but helps protect from falling into the trap of simply writing to innerHTML, which could be an XSS concern.

The content for an element can be passed in multiple types and combinations, whose behavior is as follows:

Parameters:

Name	Type	Description
`content`	module:dom~ContentDescriptor	A content descriptor value.

Returns:

Array -

All of the content that was passed in, normalized to an array of elements or text nodes.

static prependTo(child, parent)

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 216](https://docs.videojs.com/utils_dom.js.html#line216)

Insert an element as the first child node of another

Parameters:

Name	Type	Description
`child`	Element	Element to insert
`parent`	Element	Element to insert child into

static removeAttribute(el, attribute)

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 465](https://docs.videojs.com/utils_dom.js.html#line465)

Remove an element’s attribute.

Parameters:

Name	Type	Description
`el`	Element	A DOM element.
`attribute`	string	Attribute to remove.

static removeClass(element, classToRemove) → {Element}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 284](https://docs.videojs.com/utils_dom.js.html#line284)

Remove a class name from an element.

Parameters:

Name	Type	Description
`element`	Element	Element to remove a class name from.
`classToRemove`	string	Class name to remove

Returns:

Element -

The DOM element with class name removed.

static setAttribute(el, attribute, value)

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 452](https://docs.videojs.com/utils_dom.js.html#line452)

Set the value of an element’s attribute.

Parameters:

Name	Type	Description
`el`	Element	A DOM element.
`attribute`	string	Attribute to set.
`value`	string	Value to set the attribute to.

static setAttributes(el, attributesopt)

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 368](https://docs.videojs.com/utils_dom.js.html#line368)

Apply attributes to an HTML element.

Parameters:

Name	Type	Attributes	Description
`el`	Element		Element to add attributes to.
`attributes`	Object	<optional>	Attributes to be applied.

static textContent(el, text) → {Element}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 198](https://docs.videojs.com/utils_dom.js.html#line198)

Injects text into an element, replacing any existing contents entirely.

Parameters:

Name	Type	Description
`el`	Element	The element to add text content into
`text`	string	The text content to add.

Returns:

Element -

The element with added text content.

static toggleClass(element, classToToggle, predicateopt) → {Element}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 329](https://docs.videojs.com/utils_dom.js.html#line329)

Adds or removes a class name to/from an element depending on an optional condition or the presence/absence of the class name.

Parameters:

Name	Type	Attributes	Description
`element`	Element		The element to toggle a class name on.
`classToToggle`	string		The class that should be toggled.
`predicate`	boolean \| module:dom~PredicateCallback	<optional>	See the return value for module:dom~PredicateCallback

Returns:

Element -

The element with a class that has been toggled.

static unblockTextSelection()

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 482](https://docs.videojs.com/utils_dom.js.html#line482)

Turn off text selection blocking.

Type Definitions

ContentDescriptor()

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 690](https://docs.videojs.com/utils_dom.js.html#line690)

This is a mixed value that describes content to be injected into the DOM via some method. It can be of the following types:

Type	Description
`string`	The value will be normalized into a text node.
`Element`	The value will be accepted as-is.
`TextNode`	The value will be accepted as-is.
`Array`	A one-dimensional array of strings, elements, text nodes, or functions. These functions should return a string, element, or text node (any other return value, like an array, will be ignored).
`Function`	A function, which is expected to return a string, element, text node, or array - any of the other possible values described above. This means that a content descriptor could be a function that returns an array of functions, but those second-level functions must return strings, elements, or text nodes.

Coordinates

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 584](https://docs.videojs.com/utils_dom.js.html#line584)

Represents x and y coordinates for a DOM element or mouse pointer.

Properties:

Name	Type	Description
`x`	number	x coordinate in pixels
`y`	number	y coordinate in pixels

Position

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 530](https://docs.videojs.com/utils_dom.js.html#line530)

Represents the position of a DOM element on the page.

Properties:

Name	Type	Description
`left`	number	Pixels to the left.
`top`	number	Pixels from the top.

PredicateCallback(element, classToToggle) → {boolean|undefined}

[utils/dom.js](https://docs.videojs.com/utils_dom.js.html), [line 297](https://docs.videojs.com/utils_dom.js.html#line297)

The callback definition for toggleClass.

Parameters:

Name	Type	Description
`element`	Element	The DOM element of the Component.
`classToToggle`	string	The `className` that wants to be toggled

Returns:

boolean | undefined -

If true is returned, the classToToggle will be added to the element. If false, the classToToggle will be removed from the element. If undefined, the callback will be ignored.