JavaScript cheat sheet

Locating DOM elements

// Get element by identifier. let root = document.getElementById('uniqueidentifier');

// Get element within another element by attribute. let widget = querySelector('[data-widget="widgetname"]');

// Find all elements within another element and do something with them. let missingItems = root.querySelectorAll(':scope [data-region="itemname"].missing'); missingItems.forEach(item => {

   window.console.log(item);

});

// Find the closest parent element matching the selector. let region = widget.closest('[data-region]'); </syntaxhighlight>

CSS classes

// Check if the element has a certain class. if (e.target.classList.contains('classname')) {

   // Add a new CSS class to the element.
   e.target.classList.add('someclassname');

   // Remove a CSS class from the element.
   e.target.classList.remove('anotherclassname');

} </syntaxhighlight>

Custom events (core/pubsub)

import * as PubSub from 'core/pubsub';

let eventName = 'tool_jsdemo/modulename:eventname';

// Subscribe as the event handler. PubSub.subscribe(eventName, data => {

   window.console.log(data);

});

// Trigger the event with custom data passed to the subscribers. let data = {}; PubSub.publish(eventName, data); </syntaxhighlight>

Strings (core/str)

import * as str from 'core/str';

str.get_string('identifier', 'tool_jsdemo').then((text) => {

   window.console.log(text);

}); </syntaxhighlight>

import {get_string as getString} from 'core/str';

const sayHello = async () => {

   window.console.log(await getString('identifier', 'tool_jsdemo'));

} </syntaxhighlight>