What’s Best: innerText vs. innerHTML vs. textContent

Reference

• InnerHTML: Returns the string inside the div and the HTML markup contained within the string. Use it when you want to see the HTML markup and what exactly is in the element. Characters like & will be returned as HTML entities.
• InnerText: The string inside the div, the approximated rendered text content of the node. If a user highlighted the contents and copied to the clipboard, this is what it would return.
• TextContent: The content of all elements in the node, including script and style, aware of spacing and line breaks and will return those.

The Top 3 New JavaScript ES 2021 (ES 12) Features I’m Excited About

Reference

• Logical assignment: a ||= b returns a if a is truthy or b if a is falsy.
• Promise.any accepts an array of promises and resolves as soon as any of the supplied promises becomes resolved.
  • If all promises were rejected, Promise.any throws AggregateError. That object represents an error where several errors are wrapped in a single error (e.errors).
• Numeric separator (1_000_000).

Musings

• How do I find out which DOM element has the focus? Reference
  • document.activeElement, can also docuemnt.activeElement.blur().
  • document.activeElement can still return an element if the document isn’t focused. Can also do

  var focused_element = null;
  if (
      document.hasFocus() &&
      document.activeElement !== document.body &&
      document.activeElement !== document.documentElement
  ) {
      focused_element = document.activeElement;
  }

• Testing if a specific element has focus: var input_focused = document.activeElement === input && document.hasFocus();
• JQuery focus: return elem === document.activeElement && (!document.hasFocus || document.hasFocus()) && !!(elem.type || elem.href || ~elem.tabIndex);

Introduction to the DOM

Reference

• The DOM is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content.
• The W3C DOM standards are implemented in most browsers.
• The standard DOM specifies that querySelectorAll must return a list of all the <p> elements in the document.
• The core DOM defines the objects that fundamentally describe a document and the objects within it.
• Accessing the DOM: When you create a script, you can immediately begin using the API for document or window elements to manipulate the document itself or to get at the children of that document.
• Data types:
  • Document: When a member returns an object of type document, this object is the root document object itself.
  • Node: Every object located within a document is a node of some kind. In HTML, an object can be an element node but also a text node or attribute node.