ALGORITHMIC APPROACH TO MANIPULATING HTML STRUCTURES USING GRAPH ALGORITHMS FOR WORKING WITH DOM

Abstract

This article explores the main issues around the use of graph algorithms for working with the Document Object Model (DOM) during the manipulation of HTML structures of web pages. It justifies the necessity of an algorithmic approach for a server-type framework for content visualisation. The reasoning for this need comes from the fact that a server-type framework is characterised by the absence of direct access to the methods for processing graphical elements, while a client-type one has full access to the browser API.

The algorithmic approach for DOM manipulation is presented as a conceptual approach of interaction with the DOM, which utilises algorithms and data structures for processing elements without using the browser API. In such a way, the DOM could be abstractly represented as a graph, which has each vertex corresponding to an HTML element and each edge showing the relationship between them. The examination of the graph’s structure allows for the use of graph traversal algorithms to access individual structural elements of web pages represented as DOM trees. In particular, it is suitable to utilise breadth-first search (BFS), whose program implementation allows for the outputting of all DOM tree structural elements in the order of nesting. The proposed algorithmic approach provides an opportunity to simplify and accelerate the web application development process, increasing the productivity and reducing the complexity of manipulations with the DOM.

The implementation of graph algorithms allows for the efficient analysis, modification, and optimisation of the structure of a web page. The article provides an analysis of different approaches to DOM processing using graph algorithms, along with the exploration of the ways to transform DOM into JSON-like structures for further processing and presents practical examples of their use in web browsers and on the server side. The practical illustration involving the manipulation using the CMS code generated by the Payload system is examined from its analysis and transformation into JSON format to its rendering into a complete web page.