建構 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 擴充。