Forum

Methodology

Toolbox

Platform

Community

desktop
touch-pad
touch-phone

dom

This block provides an object with a set of methods for working with the DOM tree.

Overview

Object properties and methods

Name Return type Description
contains(
ctx {jQuery},
domElem {jQuery})
Boolean Checks whether a DOM element contains another DOM element.
getFocused(
domElem {jQuery})
jQuery Gets a reference to the DOM element that is in focus.
containsFocus(
domElem {jQuery})
Boolean Checks whether a DOM element or its descendants contains the focus.
isFocusable(
domElem {jQuery})
Boolean Checks whether the DOM element is in focus.
isEditable(
domElem {jQuery})
Boolean Checks whether text can be entered in the DOM element.

Public block technologies

The block is implemented in:

  • js

Description

Object properties and methods

contains method

Use this method to check whether a ctx DOM element contains domElem.

Accepted arguments:

  • ctx {jQuery} – The DOM element to search inside. Required argument.
  • domElem {jQuery} – The DOM element to search for. Required argument.

Return value: Boolean. If found, then true.

Example:

modules.require(['dom', 'jquery'], function(dom, $) {

/*
<div class="block1">
  <div class="block2"></div>
</div>
*/

dom.contains($('.block1'), $('.block2'));  // true

});

getFocused method

Gets a reference to the DOM element that is in focus.

Doesn't accept arguments.

Return value: jQuery – The object in focus.

Example:

modules.require(['dom'], function(dom) {

dom.getFocused(); // a reference to the element in focus

});

containsFocus method

This method checks whether the focus is on the DOM element passed in the argument or one of its descendants.

Accepted arguments:

  • domElem {jQuery} – The DOM element to check. Required argument.

Return value: Boolean. If this element is in focus, then true.

Example:

modules.require(['dom', 'jquery'], function(dom, $) {

/*
<div class="block1">
  <input class="block1__control"></div>
</div>
*/

$('.block1__control').focus();
dom.containsFocus($('.block1'));  // true

});

isFocusable method

This method checks whether the user's browser can set the focus on the DOM element passed in the argument.

Accepted arguments:

  • domElem {jQuery} – The DOM element to check. Required argument. If there are mutiple DOM elements in the jQuery chain, the first one is checked.

Return value: Boolean. If the focus can be set on this element, then true.

Example:

modules.require(['dom', 'jquery'], function(dom, $) {

/*
<div class="menu">
  <a class="menu__item" href="/">Link 1</a>
</div>
*/

dom.isFocusable($('.menu__item')); // true

/*
<div class="menu">
  <span class="menu__item menu__item_current">Link 1</span>
</div>
*/

dom.isFocusable($('.menu__item')); // false

});

isEditable method

This method checks whether text can be entered in the DOM element passed in the argument. In other words, you can use this method to check whether the element is an input field, text field, and so on.

Accepted arguments:

  • domElem {jQuery} – The DOM element to check. Required argument. If there are mutiple DOM elements in the jQuery chain, the first one is checked.

Return value: Boolean. If text can be entered in the DOM element, then true.

Example:

modules.require(['dom', 'jquery'], function(dom, $) {

dom.isEditable($('input, textarea')); // true

});

Module dom

some DOM utils

Object methods:

contains(ctx, domElem):Boolean
description
Checks whether a DOM elem is in a context
parameters
ctx
jQuery
DOM elem where check is being performed
domElem
jQuery
DOM elem to check
getFocused():jQuery
description
Returns current focused DOM elem in document
containsFocus(domElem):Boolean
description
Checks whether a DOM element contains focus
parameters
domElem
jQuery
isFocusable(domElem):Boolean
description
Checks whether a browser currently can set focus on DOM elem
parameters
domElem
jQuery
isEditable(domElem):Boolean
description
Checks whether a domElem is intended to edit text
parameters
domElem
jQuery