HTML Transformation is the DOM manipulation of Drupal's HTML output. In contrast to the "ordinary" DOM manipulation you know from JavaScript which is normally used to change elements already on the page, we use the very same methods to modify HTML content before it's even send to your browser. DrupalX provides a DOM manipulation layer that intentionally stays extremly close to how things work in JavaScript. This way, you don't have to learn lots of new methods but can start right away manipulating HTML with what you already know. HTML Transformation is another powerful part of DrupalX's toolkit to help you get exactly the content you want - and get it fast.
Everywhere you'll find HTML data - for example field values accessed via DrupalX's "$" or "$$" prefixes or menus and views rendered by Drupal - everything that's HTML can be transformed. As stated above, the API closely resembles the one you already know from plain JavaScript. An example:
{%
set body=$body; //Create modifyable copy of the field "body"
set anchors=body.querySelectorAll("a"); //Search for links ("a" tags)
for anchor in anchors; //Could through all links one by one
set href=anchor.getAttribute("href"); //Evaluate href attribute
if href starts with "http://"; //If it starts with "http://"
do anchor.setAttribute("target","_blank"); //Add a target="_blank" attribute
endif;
endfor;
%}
{{body}}
The example above will automatically add a target="_blank" attribute to all links that start with "http://" so that they'll open in a new window. The content editor won't need to remember setting this value in CKEditor manually anymore for each and every external link. This is, of course, only a small example to show what kind of things you can achieve with only a few lines of easily understandable Twig code now.