JavaScript | Today I Learned

You can import ES6-style JavaScript modules dynamically using await import(filename);. For example:

const {default: renamedDefaultExport, namedExport1, namedExport2} = await import("./mymodule.js");

You can send a request when a page is closed, either using the Fetch API with the keepalive option:

const url = "http://example.com/my/resource";

const data = {a: 1, b: 2}; // some data to be logged, such as usage statistics

const handler = () => fetch(url, {method: "POST", keepalive: true});

window.addEventListener("unload", handler);

Or the Beacon API:

const blob = new Blob([JSON.stringify(data)], {type: "application/json"});

const handler = () => navigator.sendBeacon(url, blob);

There is no JavaScript event for a URL change. There is one, however, for when the fragment changes (the part after the # symbol), called hashchange, and there is another, popstate, which doesn't always get triggered, for when the user clicks on the back or forward buttons or the history.back() or history.go() methods are called.

The way the DOM works (which represents an HTML page in memory), text and tags such as <div> are both represented by "nodes" of different types organized in a tree structure so that, for example, text nodes become the "children" of element nodes.

A normalized DOM tree means that there are no empty text nodes or adjacent text nodes. The Node object has a normalize() method that makes sure of this.

The tagName and nodeName properties only return the value in upper case for HTML, not XHTML.

Be careful inside try-catch blocks in Javascript async functions. If you don't use await, an error that's thrown might not stop the execution of subsequent code.

The innerText property magically converts newline characters to <br> elements. If you want to just set the text content of an element, you should use, well, textContent.

Apparently, the difference is that "innerText is aware of the rendered appearance of the text, while textContent is not."

You can use a Sinon.JS stub with the callsFake() method, passing it an existing function, to effectively "wrap" the function so that it registers each time you call and with which arguments, but in a way that it also seemingly works the same way as the original function does.

You can send data with the application/x-www-form-urlencoded content type (the one that encodes values similar to a query string, e.g. first=1&second=2) using a URLSearchParams object, like so:

fetch(url, {

  method: "POST",

  body: new URLSearchParams({first: 1, second: 2})

});

You can access the <body> and <html> elements of a HTML page by using document.body and document.documentElement, respectively.