文件 v2.0.3

建構 DOM 元素

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

第一次渲染:鏈式 DOM 建構

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

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
});

元素查詢

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

完整方法列表見 String 擴充 與 Element 擴充。

EN