DOM 操作之——元素的增删改、样式修改、插入内容

好的，以下是根据您的要求和参考进行文章创作：

虽然现在我们在开发中已经用不到自己操作 DOM 了，之前有 JQ，现在更是有 VUE、REACT 两大框架供我们使用，但是我们也有必要了解下，关于原生 JS 中的 DOM 操作问题。

DOM 操作基础

DOM（Document Object Model）是 HTML 文档的结构表示。它将 HTML 文档分解为一系列节点，包括元素、文本节点和注释节点等。我们可以通过 JavaScript 来操作 DOM，对 HTML 文档进行修改。

元素的增删改

要添加一个元素，可以使用 document.createElement() 方法来创建一个新的元素。然后，可以使用 appendChild() 方法将新元素添加到另一个元素中。

var newDiv = document.createElement('div');
newDiv.innerHTML = 'Hello World!';
document.body.appendChild(newDiv);

要删除一个元素，可以使用 removeChild() 方法。

var div = document.getElementById('myDiv');
div.parentNode.removeChild(div);

要修改一个元素，可以使用 setAttribute() 方法来设置元素的属性。

var div = document.getElementById('myDiv');
div.setAttribute('style', 'color: red;');

样式修改

要修改元素的样式，可以使用 style 属性。style 属性是一个 CSS 样式字符串，可以用来设置元素的各种样式属性。

var div = document.getElementById('myDiv');
div.style.color = 'red';
div.style.fontSize = '20px';

插入内容

要向元素中插入内容，可以使用 innerHTML 属性。innerHTML 属性是一个 HTML 字符串，可以用来设置元素的内容。

var div = document.getElementById('myDiv');
div.innerHTML = 'Hello World!';

DOM 事件

DOM 事件是当用户与 HTML 文档交互时发生的事件。我们可以使用 JavaScript 来监听 DOM 事件，并在事件发生时执行相应的代码。

要监听 DOM 事件，可以使用 addEventListener() 方法。

var div = document.getElementById('myDiv');
div.addEventListener('click', function() {
  alert('你点击了 div 元素!');
});

总结

DOM 操作是 JavaScript 的一项基本技能。通过 DOM 操作，我们可以对 HTML 文档进行修改，从而实现各种各样的效果。

在实际开发中，我们通常会使用 jQuery 或 Vue、React 等框架来操作 DOM。这些框架提供了丰富的 API，可以帮助我们更轻松地操作 DOM。

但是，了解原生 JS 的 DOM 操作知识仍然非常重要。因为在某些情况下，我们需要直接操作 DOM，比如在开发自定义组件或插件时。