JavaScript操作选择对象的简单实例

下面我将为您详细讲解“JavaScript操作选择对象的简单实例”的完整攻略。

1. 选择对象

要操作 HTML 中的元素，我们必须首先找到它。找到元素的最常用方法是使用 id 属性。我们可以使用 document.getElementById() 方法来选择一个有 id 的元素。

比如，我们有如下HTML代码:

<div id="demo">我的文本</div>

我们可以使用以下方式来获取这个 div 元素:

const myDiv = document.getElementById("demo");

除了使用 id 选择元素，我们还可以使用标签名、类名、层级关系等方式来选择元素。以下是一些常用的选择元素的方法：

• document.getElementsByTagName() 方法按照标签名获取元素。
• document.getElementsByClassName() 方法按照类名获取元素。
• document.querySelector() 方法按照层级关系获取元素，返回第一个匹配的元素。
• document.querySelectorAll() 方法按照层级关系获取元素，返回一个包含所有匹配的元素的 NodeList。

2. 操作选择的对象示例说明

示例 1：修改元素的文本内容

我们可以使用 innerHTML 属性来修改一个元素的内容。比如，如果我们想要修改上面例子中的 div 元素的文本，可以使用如下代码：

myDiv.innerHTML = "我的新文本";

示例 2：添加修改样式

我们可以使用 style 属性来修改元素的样式。比如，如果我们想要修改上面例子中的 div 元素的背景颜色和字体颜色，可以使用如下代码：

myDiv.style.backgroundColor = "red";
myDiv.style.color = "white";

这些就是 JavaScript 操作选择对象的简单实例，希望能帮助您更好的理解并使用 JavaScript。