◆ DOM をみやすく作ったり

コピーするためってくらいに使うことが多いですが DOM の要素の初期化なんかが便利です
var input = Object.assign(document.createElement("input"), {
id: "username",
name: "username",
className: "abcd efg",
type: "text",
disabled: true,
value: "NAME",
placeholder: "Please input your username.",
})

こういう感じ

それぞれのプロパティに = で設定してたのをまとめてできます
C# のオブジェクト初期化子みたいな感じ


HTML のエスケープする関数も 1 行で簡単にできます
const escapeHTML = text => Object.assign(document.createElement("div"), {textContent: text}).innerHTML

もうちょっとやってみる

プロパティで children を設定できないので setter を作ります
Object.defineProperty(HTMLElement.prototype, "childElements", {
set(elements){
while(this.firstChild) this.firstChild.remove()
this.append(...elements)
}
})

childElements プロパティに配列を入れれば子要素が置き換わります
例えば
document.body.childElements = [
document.createElement("li"),
document.createElement("div"),
]

こうすれば body の子要素は li  と div です

ネストさせれば
Object.assign(document.body, {
childElements: [
Object.assign(document.createElement("div"), {
id: "div1",
childElements: [
Object.assign(document.createElement("span"), {
innerHTML: "text",
}),
],
}),
Object.assign(document.createElement("ul"), {
id: "list",
childElements: [
Object.assign(document.createElement("li"), {
innerHTML: "a",
}),
Object.assign(document.createElement("li"), {
innerHTML: "b",
}),
],
}),
],
})

このコードを実行すると DOM はこうなります
<body>
<div id="div1">
<span>text</span>
</div>
<ul id="list">
<li>a</li>
<li>b</li>
</ul>
</body>


Object.assign と document.createElement が長いので短くしてみると
const create = (elem_name, property) =>
Object.assign(document.createElement(elem_name), property)

Object.assign(document.body, {
childElements: [
create("div", {
id: "div1",
childElements: [
create("span", {
innerHTML: "text",
}),
],
}),
create("ul", {
id: "list",
childElements: [
create("li", {
innerHTML: "a",
}),
create("li", {
innerHTML: "b",
}),
],
}),
],
})

JavaScript で簡単にプロパティ付き DOM が作れますね