Skip to content

Latest commit

 

History

History
102 lines (75 loc) · 2.78 KB

README.md

File metadata and controls

102 lines (75 loc) · 2.78 KB
Raw

DOM Manipulation Engine

THIS IS A WORK IN PROGRESS

A simple command-line program for parsing HTML files and building a DOM tree which can then be accessed and manipulated from an interactive shell or with scripts using jQuery-like selectors and commands.

This is nothing more than an effort at learning modern, idiomatic C++ and understanding the working of web browsers. Its amusing at best and useless at worst. Have fun with it!

Check out the engine in action on ASCII Cinema:

asciicast

Building from source

You'll need the following installed:

  • A compiler which supports at least C++11: g++, clang++ or Visual C++
  • CMake
  • make
  • git

Steps

# Clone the repository
git clone https://github.com/RohitAwate/DOMEngine

# Open the directory
cd DOMEngine/

# Create a new directory and open it
mkdir build/ && cd build/

# Generate the build files
cmake .. -DCMAKE_BUILD_TYPE=Release

# Build the project
make

# Open the bin/ folder
cd ../bin/

# Run interactive shell
./dom-engine <html-file>

# Run script
./dom-engine <html-file> <script-file>

Commands

  • print
    Prints out the DOM tree.
  • $("@tagname#someId.firstClass.secondClass")
    Selects a DOM element of type tagname with ID someId and classes firstClass and secondClass.

    Sub-commands for selected nodes:

    • parent Prints the parent
    • children Prints all the children
    • attrs Prints all the attributes
    • innerhtml Prints the innerHTML
    • return Deselects the node and returns to shell

  • save file.html
    Generates formatted HTML for the DOM tree and saves it to the specified file.
  • exit
    Exits the shell.

Writing Scripts

DOM Engine uses a simple scripting language which utilizes the commands mentioned above along with some syntactic elements such as semicolons and braces. Here is an example script.

$("#alertBox.alertDiv@div")
{
    parent;
    children;
    attrs;
}

$("@div.text-field") {
    parent;
    attrs;
}

$("@div.text-field") { attrs; }

$("@body"){children;}

print;

Selector Blocks

The first five lines demonstrate the usage of DOM Engine's selectors and running sub-commands on selected nodes. The selector is the same as you'd use in the shell with the sub-commands grouped together inside the curly braces, separated by semi-colons.

The next three selector blocks show alternative formatting.

Finally, the last line shows the print command terminated with a semi-colon.

Save the script in a file with the .des extension (DOM Engine Script).
Run using: dom-engine <html-file> script.des

Goals and Progress

See the Kanban board here.

License

MIT