JavaScript DOM常用操作代码汇总

概述

JavaScript是一种强大的脚本语言，可以用来操作HTML页面中的文本、元素、样式和事件。DOM(Document Object Model)是一种将HTML文档解析成树形结构的API(应用程序接口)，使得JavaScript可以对文档中的元素进行访问和操作。本文将提供JavaScript DOM的常用操作代码汇总，为开发者提供参考和学习。

1. 获取HTML元素

获取元素是DOM中最基本的操作之一，不同的元素可以通过其id、标签名、类名等来获取。

1.1 获取元素的id

var element = document.getElementById("elementId");

1.2 获取元素的标签名

var elements = document.getElementsByTagName("tagName");

1.3 获取元素的类名

var elements = document.getElementsByClassName("className");

2. 修改HTML元素

对于获取到的HTML元素，可以进行一些修改操作，包括修改文本、修改样式和修改属性等。

2.1 修改元素的文本

element.innerHTML = "new text content";

2.2 修改元素的样式

element.style.color = "red";
element.style.backgroundColor = "yellow";

2.3 修改元素的属性

element.setAttribute("attributeName", "attributeValue");

3. 添加和删除HTML元素

3.1 添加HTML元素

var newElement = document.createElement("tagName");
parentElement.appendChild(newElement);

3.2 删除HTML元素

parentElement.removeChild(element);

示例说明

示例1：修改元素的文本和样式

var element = document.getElementById("myDiv");
element.innerHTML = "Hello, World!";
element.style.color = "red";
element.style.fontSize = "24px";

在这个示例中，我们首先通过id获取了元素myDiv，然后对其进行了两次修改操作，分别将文本内容改为了Hello, World!，将字体颜色改为了红色，字体大小改为了24px。

示例2：添加和删除HTML元素

var parentElement = document.getElementById("myDiv");
var newElement = document.createElement("p");
newElement.innerHTML = "This is a new paragraph.";
parentElement.appendChild(newElement);
parentElement.removeChild(document.getElementById("oldElement"));

在这个示例中，我们首先获取了元素myDiv作为父元素，然后通过createElement方法创建了一个新的p元素，并将其文本内容设置为“This is a new paragraph.”，接着将新元素添加到了父元素中。最后，我们又通过removeChild方法删除了原先在myDiv中的某个元素。