HTML DOM 修改 - 程序员自由职业

HTML DOM（文档对象模型）允许通过 JavaScript 动态地修改文档的结构、样式和内容。以下是一些常见的 HTML DOM 修改操作：

1. 修改元素的内容

可以通过修改元素的 innerHTML、innerText 或 textContent 属性来改变元素的内容。

// 修改元素的 HTML 内容
document.getElementById("elementId").innerHTML = "<p>New HTML content</p>";

// 修改元素的文本内容
document.getElementById("elementId").innerText = "New text content";

2. 修改元素的属性

可以使用 setAttribute、getAttribute 和 removeAttribute 方法来修改元素的属性。

// 设置元素的属性
document.getElementById("elementId").setAttribute("src", "newImage.jpg");

// 获取元素的属性
var value = document.getElementById("elementId").getAttribute("src");

// 移除元素的属性
document.getElementById("elementId").removeAttribute("src");

3. 创建和插入新元素

可以使用 createElement 创建新元素，然后使用 appendChild 或 insertBefore 将其插入到文档中。

// 创建新元素
var newElement = document.createElement("div");
newElement.innerHTML = "New element content";

// 将新元素添加到父元素的末尾
document.getElementById("parentElementId").appendChild(newElement);

// 将新元素插入到某个元素之前
var referenceElement = document.getElementById("referenceElementId");
document.getElementById("parentElementId").insertBefore(newElement, referenceElement);

4. 删除元素

可以使用 removeChild 方法从其父元素中删除子元素。

var parentElement = document.getElementById("parentElementId");
var childElement = document.getElementById("childElementId");

// 从父元素中删除子元素
parentElement.removeChild(childElement);

5. 修改元素的样式

可以通过访问元素的 style 对象来修改其内联样式。

// 修改元素的样式
document.getElementById("elementId").style.color = "red";
document.getElementById("elementId").style.fontSize = "16px";

这些是一些基本的 HTML DOM 修改操作。通过这些操作，你可以在网页中实现动态的效果，响应用户的交互，或者根据特定条件更新页面内容。当进行 DOM 修改时，确保在必要时进行性能优化，并考虑浏览器兼容性。

转载请注明出处：http://www.zyzy.cn/article/detail/4353/HTML