# 建構 DOM 元素

以標籤選擇器字串建構真實 DOM 元素，並用字串 getter 查詢元素。

## 第一次渲染：鏈式 DOM 建構

`"tag.class#id"._(attrs, children)` 依標籤選擇器字串建立真實 DOM 元素，自動處理 SVG 命名空間與 `input`/`textarea` 型別解析。

```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"._()
    ])
);

// 啟用 SVG 內嵌與圖片延遲載入監聽器
_Listener({
    svg: true,
    lazyload: true
});
```

## 元素查詢

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

完整方法列表見 [String 擴充](/zh/api-reference-string) 與 [Element 擴充](/zh/api-reference-element)。