JavaScript HTML DOM 实例

在 web 开发中，JavaScript 通常用于操作 HTML 文档对象模型（DOM），通过 JavaScript 操作 DOM 可以实现动态的网页交互效果。本章节将介绍一些常见的 JavaScript HTML DOM 操作实例。

获取元素

在 JavaScript 中，我们可以使用 document.getElementById() 方法来获取指定 id 的元素，例如：

var element = document.getElementById('myElement');

除了使用 id，我们还可以使用 document.getElementsByClassName() 和 document.getElementsByTagName() 方法来获取元素，例如：

var elements = document.getElementsByClassName('myClass');
var elements = document.getElementsByTagName('div');

操作元素内容

可以使用 innerHTML 属性来获取或设置元素的 HTML 内容，例如：

var element = document.getElementById('myElement');
element.innerHTML = 'Hello, World!';

如果要获取或设置元素的文本内容，可以使用 innerText 属性，例如：

var element = document.getElementById('myElement');
element.innerText = 'Hello, World!';

添加元素

可以使用 createElement() 方法创建新的元素，然后使用 appendChild() 方法将其添加到指定元素中，例如：

var newElement = document.createElement('div');
newElement.innerText = 'Hello, World!';
document.body.appendChild(newElement);

删除元素

可以使用 removeChild() 方法从父元素中删除指定的子元素，例如：

var element = document.getElementById('myElement');
element.parentNode.removeChild(element);

修改样式

可以使用 style 属性来修改元素的样式，例如：

var element = document.getElementById('myElement');
element.style.color = 'red';
element.style.fontSize = '20px';

以上是一些常见的 JavaScript HTML DOM 操作实例，希望可以帮助你更好地理解如何使用 JavaScript 操作 DOM。