使用(无框架)javascript操作DOM

使用无框架的JavaScript操作DOM是指在不使用任何JavaScript库或框架（如jQuery、React、Vue等）的情况下，直接使用原生JavaScript代码来操作文档对象模型（Document Object Model，简称DOM）。DOM是一个与平台和语言无关的接口，允许开发者访问和操作HTML和XML文档的内容、结构和样式。

以下是使用无框架的JavaScript操作DOM的一些常见方法：

1. 选择元素：使用document.getElementById()、document.getElementsByClassName()、document.getElementsByTagName()等方法选择页面上的元素。
2. 修改元素内容：使用element.innerHTML、element.textContent等属性修改元素的内容。
3. 修改元素样式：使用element.style属性修改元素的样式。
4. 添加和删除元素：使用element.appendChild()、element.insertBefore()、element.removeChild()等方法添加和删除元素。
5. 添加和删除类：使用element.classList.add()、element.classList.remove()等方法添加和删除元素的类。
6. 监听事件：使用element.addEventListener()、element.removeEventListener()等方法监听和移除元素的事件。

以下是一个简单的示例，演示如何使用无框架的JavaScript操作DOM：

// 选择一个元素
var element = document.getElementById("myElement");

// 修改元素内容
element.innerHTML = "Hello, world!";

// 修改元素样式
element.style.color = "red";
element.style.fontSize = "24px";

// 添加一个新元素
var newElement = document.createElement("div");
newElement.innerHTML = "I am a new element!";
element.appendChild(newElement);

// 删除一个元素
element.removeChild(newElement);

// 添加一个类
element.classList.add("myClass");

// 监听事件
element.addEventListener("click", function() {
  alert("You clicked me!");
});

需要注意的是，使用无框架的JavaScript操作DOM可能会导致代码量增加，且不易于维护。因此，在实际开发中，通常会使用一些流行的JavaScript库或框架来简化操作。