DOM Manipulation

ArcScript provides a simple and powerful syntax for interacting with the Document Object Model (DOM).

Selecting Elements

Use grab and grabAll to select elements from the page.

grab

Selects the first element that matches a CSS selector. Transpiles to document.querySelector().

ArcScript: main_container = grab "#main"

JavaScript Output: let main_container = document.querySelector("#main");

grabAll

Selects all elements that match a CSS selector. Transpiles to document.querySelectorAll().

ArcScript: all_buttons = grabAll ".btn"

JavaScript Output: let all_buttons = document.querySelectorAll(".btn");

Creating and Placing Elements

create

Creates a new HTML element.

ArcScript: new_paragraph = create "p"

JavaScript Output: let new_paragraph = document.createElement("p");

append

Appends an element as the last child of a parent.

ArcScript: append new_paragraph to main_container

JavaScript Output: main_container.appendChild(new_paragraph);

insert

Inserts an element into a parent before a specified reference element.

ArcScript: insert new_element before old_element in main_container

JavaScript Output: main_container.insertBefore(new_element, old_element);

Accessing and Setting Properties

You can easily get and set properties of DOM elements.

Property Access Shortcuts: - html is a shortcut for innerHTML. - text is a shortcut for innerText.

ArcScript:

# Get a property
title_text = grab "h1" text

# Set a property
grab "#content" html = "<h2>New Section</h2>"

JavaScript Output:

let title_text = document.querySelector("h1").innerText;
document.querySelector("#content").innerHTML = "<h2>New Section</h2>";

Styling Elements with Style Blocks

ArcScript provides a CSS-like syntax for applying multiple styles to an element.

ArcScript:

# Select an element and apply styles
grab "#header"
    color = "'blue'"
    fontSize = "'24px'"
    backgroundColor = "'#f0f0f0'"

JavaScript Output:

document.querySelector("#header").style.color = 'blue';
document.querySelector("#header").style.fontSize = '24px';
document.querySelector("#header").style.backgroundColor = '#f0f0f0';

Event Listeners

Attach event listeners with an indented block of code as the handler.

ArcScript:

button = grab "#my-button"

# Define the event handler inline
button click event
    print("Button was clicked!")
    button text = "Clicked!"

JavaScript Output:

let button = document.querySelector("#my-button");

button.addEventListener('click', (event) => {
    console.log("Button was clicked!");
    button.innerText = "Clicked!";
});

You can also use a pre-defined function as a handler:

ArcScript:

def handle_click()
    print("Handler function called")

grab "#my-button" click handle_click

JavaScript Output:

function handle_click() {
    console.log("Handler function called");
}
document.querySelector("#my-button").addEventListener('click', handle_click);