HTML-TREE-MATCH

It is very easy to edit an html document with the console of a browser. But unfortunately it’s not that easy to save these changes in a text file, because if we save the whole document, we could make unwanted changes to our original html.
This is because HTML could change dynamically and some scripts and page interactions can alter our original document, and it would be very wrong to carry these changes in the source code.
This is further explained here.

To try to overcome this problem, the HtmlTreeMatch class takes care of creating a clone of the html document starting from its textual source code, and provides methods for

• check that an element within the primary document can be modified without importing changes not expressly created by the user.
• provide a set of APIs to make changes to the Document Object Model (DOM) of both documents
• keep track of the changes made, in order to provide undo / redo API

usage

// this is an example how to activate HTMLTreeMatch in a document. Use it in an async function
var htmltext = await fetch(location.href).then(html=>html.text());
var htmlMatch = HTMLTreeMatch(htmltext,document); // || HTMLTreeMatch(htmltext);

Write methods

tilepieces.core.htmlMatch.addClass(element,"a-class");
tilepieces.core.htmlMatch.removeClass(element,"a-class");
tilepieces.core.htmlMatch.prepend(targetElement,newElement || documentFragment);
tilepieces.core.htmlMatch.after(targetElement,newElement || documentFragment);
tilepieces.core.htmlMatch.before(targetElement,newElement || documentFragment);
tilepieces.core.htmlMatch.append(targetElement,newElement || documentFragment);
tilepieces.core.htmlMatch.contenteditable(element);
tilepieces.core.htmlMatch.innerHTML(element,htmlText);
tilepieces.core.htmlMatch.insertAdjacentElement(element,"append" || "prepend" || "after" || "before",newElement || documentFragment)
tilepieces.core.htmlMatch.move(pivotEl,el,"append" || "prepend" || "after" || "before")
tilepieces.core.htmlMatch.outerHTML(element,htmlText)
tilepieces.core.htmlMatch.removeChild(element)
tilepieces.core.htmlMatch.replaceWith(element,newNode);
tilepieces.core.htmlMatch.setAttribute(element,"attribute-name","attribute-value");
tilepieces.core.htmlMatch.removeAttribute(element,"attribute-name");
tilepieces.core.htmlMatch.style(element,"color","red","important") || tilepieces.core.htmlMatch.style(element1,"color","red");
tilepieces.core.htmlMatch.insertRow(table,0);
tilepieces.core.htmlMatch.insertCell(tableRow,index);
tilepieces.core.htmlMatch.deleteRow(table,index);
tilepieces.core.htmlMatch.addColumn(table,index);
tilepieces.core.htmlMatch.deleteColumn(table,index);
tilepieces.core.htmlMatch.createCaption(table);
tilepieces.core.htmlMatch.deleteCaption(table);
tilepieces.core.htmlMatch.createTFoot(table);
tilepieces.core.htmlMatch.deleteTFoot(table);
tilepieces.core.htmlMatch.createTHead(table);
tilepieces.core.htmlMatch.deleteTHead(table);
tilepieces.core.htmlMatch.mergeColumnCell(tableCell,type : "backward" || "forward");

test

There are a some html files under test directory. These are manual, although some console.assert are launched.
There a series of automated tests in the tilepieces-core project.