# Building DOM Elements

Build real DOM elements from tag-selector strings and query elements with string getters.

## First Render: Chainable DOM Construction

`"tag.class#id"._(attrs, children)` builds a real DOM element from a tag-selector string, handling SVG namespace and `input`/`textarea` type parsing automatically.

```javascript
document.body._child(
    "section#test"._([
        "button"._({
            style: {
                width: "10rem",
                height: "2rem",
                backgroundColor: "steelblue",
                color: "#fff"
            }
        }, [
            "span"._("test"),
            " button"
        ])._click(function () {
            alert("test");
        }),
        "img"._({ lazyload: "https://xxxxxx" }),
        "input@email type"._()
    ])
);

// Enable SVG inlining and image lazyload listeners
_Listener({
    svg: true,
    lazyload: true
});
```

## Element Querying

```javascript
"test".$;          // document.getElementById("test")
"div.test".$;       // document.querySelector("div.test")
"div.test".$all;    // [...document.querySelectorAll("div.test")]
```

Full method lists: [String Extensions](/api-reference-string) and [Element Extensions](/api-reference-element).