JavaScript 創(chuàng)建 DOM

DOM（文檔對(duì)象模型）是網(wǎng)頁(yè)中所有元素的層次結(jié)構(gòu)。可以使用 JavaScript 創(chuàng)建、修改、刪除和插入 DOM 元素。

如下就是一個(gè)簡(jiǎn)單的例子，創(chuàng)建一個(gè)包含有兩個(gè)段落的 div 元素，然后將其添加到頁(yè)面中：

let div = document.createElement("div");
let p1 = document.createElement("p");
let p2 = document.createElement("p");
let text1 = document.createTextNode("這是第一個(gè)段落。");
let text2 = document.createTextNode("這是第二個(gè)段落。");
p1.appendChild(text1);
p2.appendChild(text2);
div.appendChild(p1);
div.appendChild(p2);
document.body.appendChild(div);

上述代碼通過(guò) JavaScript 動(dòng)態(tài)創(chuàng)建了一個(gè)包含兩個(gè)段落的 div 元素，并將其添加到頁(yè)面中?？梢钥吹?，DOM 的創(chuàng)建非常簡(jiǎn)單。

創(chuàng)建元素

可以使用 document.createElement() 方法創(chuàng)建元素，例如：

let para = document.createElement("p");

上述代碼創(chuàng)建了一個(gè) p 元素?？梢栽诶ㄌ?hào)里傳遞任何合法的 HTML 標(biāo)簽名，例如 div、span、table 等等。

設(shè)置元素屬性

可以使用 setAttribute() 方法設(shè)置元素的屬性，例如：

para.setAttribute("class", "my-class");
para.setAttribute("id", "my-id");

上述代碼設(shè)置了 p 元素的 class 和 id 屬性。

添加元素到 DOM 中

可以使用 appendChild() 方法將元素添加到另一個(gè)元素中，例如：

let div = document.createElement("div");
div.appendChild(para);

上述代碼將 p 元素添加到了 div 元素中。

獲取元素

可以使用 document.getElementById() 方法獲取頁(yè)面中的元素，例如：

let elem = document.getElementById("my-id");

上述代碼獲取了具有 id 為 "my-id" 的元素。

刪除元素

可以使用 removeChild() 方法從 DOM 中刪除元素，例如：

let elem = document.getElementById("my-id");
elem.parentNode.removeChild(elem);

上述代碼刪除了具有 id 為 "my-id" 的元素。

修改元素

可以使用 innerHTML 屬性修改元素的內(nèi)容，例如：

para.innerHTML = "這是新的內(nèi)容。";

上述代碼將 p 元素的內(nèi)容設(shè)置為 "這是新的內(nèi)容。"。

總結(jié)一下，DOM 的創(chuàng)建、修改、刪除和插入非常容易，只需要使用一些簡(jiǎn)單的 JavaScript 方法即可完成。掌握 DOM 操作是網(wǎng)頁(yè)開(kāi)發(fā)中非常重要的一部分。