21-HTML DOM-innerHTML和控制元素样式

       HTML DOM（Document Object Model，文档对象模型）是指将 HTML 文档中的每个元素都作为一个对象来对待，并以树形结构来表示这些对象之间的关系。通过 HTML DOM，可以使用 JavaScript 来操作 HTML 页面中的任何元素。

        HTML DOM 的根节点是 document 对象，它代表了整个文档。一个 HTML 文档中的其他所有元素都可以作为文档对象的子节点进行访问和操作。例如，如果想访问一个文本框元素，可以通过 document.getElementById("myTextbox") 获取该元素并进行操作。

       在 HTML DOM 中，每个 HTML 元素都被表示为一个对象，这些对象都有特定的属性和方法，可以用来操作这些元素。例如，innerHTML 属性可以获取或设置某个 HTML 元素的内容，而 style 属性可以获取或设置该元素的样式。

       通过使用 HTML DOM，您可以动态地修改 HTML 页面中的任何元素，包括文本、图像、表单、链接等。HTML DOM 还提供了许多有用的方法，如添加和删除元素、更改元素的样式、响应用户事件等。

一、innerHTML常用方法示例：

1、获取元素的 HTML 内容

var element = document.getElementById("myElement"); 
var content = element.innerHTML; console.log(content);

2、设置元素的 HTML 内容

var element = document.getElementById("myElement"); 
element.innerHTML = "<h1>Hello, World!</h1>";

3、在元素的末尾添加新的 HTML 内容

var element = document.getElementById("myList"); 
element.innerHTML += "<li>Item 4</li><li>Item 5</li>";

4、从元素中删除 HTML 内容

var element = document.getElementById("myElement"); 
element.innerHTML = "";

二、HTML DOM控制元素样式

1、使用元素style属性修改样式

var element = document.getElementById("myElement");
element.style.backgroundColor = "red";

2、使用 className 属性

var element = document.getElementById("myElement");
element.className = "newClass";

3、使用 classList 属性

var element = document.getElementById("myElement");
element.classList.add("newClass");
element.classList.remove("oldClass");
element.classList.toggle("highlight");

       我们首先获取了一个 ID 为 `myElement` 的元素，并依次调用了add()、remove() 和 toggle() 方法，从而添加、删除和切换了元素的 class 属性。需要注意的是，使用 classList 属性也可以简化上面的 className示例

var element = document.getElementById("myElement");
element.classList = "newClass";

我们将元素的 classList 属性直接赋值为 newClass，从而应用新的样式。