HTML DOM 修改 HTML 内容学习笔记

什么是HTML DOM？

DOM，即文档对象模型（Document Object Model），是用于HTML和XML文档的编程接口。它表示页面的内容为树形结构，使得开发者可以使用编程语言（如Javascript）来修改页面的内容、样式和结构。

如何修改HTML内容？

使用HTML DOM可以很方便地修改HTML内容，下面给出一些示例代码：

修改元素的文本内容

javascriptCopy Code
// 获取id为myElement的元素
var element = document.getElementById("myElement");
// 修改元素的文本内容
element.innerHTML = "新的文本内容";

修改元素的属性值

javascriptCopy Code
// 获取id为myImage的图像元素
var element = document.getElementById("myImage");
// 修改图像元素的src属性值
element.src = "new_image.jpg";

添加、删除和替换元素

javascriptCopy Code
// 创建一个新的div元素
var newDiv = document.createElement("div");
// 给新的div元素添加文本内容
newDiv.innerHTML = "这是一个新的div元素";
// 获取父元素
var parentElement = document.getElementById("parentElement");
// 将新元素添加到父元素中
parentElement.appendChild(newDiv);

// 删除id为childElement的子元素
var childElement = document.getElementById("childElement");
parentElement.removeChild(childElement);

// 替换id为oldElement的元素为新的div元素
var oldElement = document.getElementById("oldElement");
parentElement.replaceChild(newDiv, oldElement);

修改样式

javascriptCopy Code
// 获取id为myElement的元素
var element = document.getElementById("myElement");
// 修改元素的样式
element.style.color = "red";
element.style.backgroundColor = "yellow";

总结

HTML DOM使得开发者可以方便地修改HTML内容、结构和样式，从而实现更好的用户体验。掌握HTML DOM对于网页的开发和优化非常重要。