使用 querySelector 添加和删除元素类名称

dom（文档对象模型）是网络浏览器表示和操作网页的方式。DOM 是 javascript 中网页的面向对象表示，它允许访问和操作网页的元素、属性和样式。每次在浏览器中加载网页时，浏览器都会解析 html 以创建分层树状结构。此网页的元素表示为此树中的项目。这些项目可以通过 JavaScript 中的 DOM 访问、修改和操作。

DOM 可以在 HTML 文档中用于： 

• 更改 HTML 元素的内容

• 更改 HTML 元素的 css 样式

• 添加和删除 HTML 元素（类名）

• 在网页中创建新的 HTML 元素

在本文中，我们将学习如何使用 HTML DOM 通过 javaScript 添加和删除类名。

使用queryselector

该querySelector方法用于选择与 CSS 选择器匹配的第一个元素。例如，您可以使用以下代码来选择具有特定 ID 的元素container。

const mainElement = document.querySelector('#container');

使用querySelector，您还可以根据类或标签名称选择元素。例如，您可以使用以下代码来选择类名为 的所有 div 元素： contents

const theContent = document.querySelectorAll('div.contents');

上面的示例代码片段每个都返回一个nodeList对象，该对象可用于修改或操作已选择的元素。

添加类名

add属性中有一种叫做方法的东西classList。这可用于向元素添加类名。例如，如果您想firstClass向具有 id 的元素添加类名firstID，则可以使用以下代码：

1    const myElement = document.querySelector('#firstId');    
2    myElement.classList.add('firstClass');

删除类名

就像 add 方法一样，属性中还有一个方法classList可用于从元素中删除类名。就是remove方法。例如，如果你想删除firstClass添加到元素的类名，你可以使用以下代码：

1    const myElement = document.querySelector('#firstId');    
2    myElement.classList.remove('firstClass');

添加和删除类名的示例querySelector

querySelector这是一个演示使用添加和删除元素类名的迷你项目。

See the Pen  querySelector: add and remove class names by Envato Tuts+ (@tutsplus)  on CodePen.

在上面的示例中，我们首先使用querySelector来获取对textHead元素和两个按钮（addButton和removeButton）的引用。然后，我们向按钮添加事件***器，以便在单击它们时，它们将使用 和classList.add方法从元素中添加或删除类。 classList.removestyletextHead

当通过单击添加类style按钮将类添加到元素时，它会将元素的颜色更改为绿色并为其提供 10 像素的填充，因为您已经定义了具有这些属性的 CSS 类。当通过单击移除类按钮移除类时，文本的颜色将返回到其原始值并且填充将被移除。textHead style

使用添加和删除元素的示例querySelector

让我们看一个更高级的项目来演示如何在现实世界中应用这个概念。我们将使用HTML、CSS 和 JavaScript 构建一个简单的待办事项列表应用程序，用户可以在其中添加和删除待办事项。

See the Pen  To-do List - querySelector by Envato Tuts+ (@tutsplus)  on CodePen.

用户可以通过在输入字段中输入任务并单击“添加待办事项”按钮来将任务添加到该项目的待办事项列表中。添加任务后，它会作为列表项出现在任务列表中。每个任务项旁边都会有一个删除按钮，以便用户可以将其从列表中删除。用户可以单击每个项目，这会在项目上画一条线以指示任务已完成。

这个项目用了querySelector几次：找到输入框，找到添加待办事项按钮，找到任务列表的容器div。 

1    const newTaskInput = document.querySelector('#new-task');    
2    const addTaskButton = document.querySelector('#add-task');    
3    const taskList = document.querySelector('#task-list');

稍后，我们以各种方式使用这些元素。我们给按钮添加一个事件监听器：

addTaskButton.addeventListener('click', addTask);

然后，当单击该按钮时，我们获取新任务输入字段的值并将新元素添加到任务列表。 

1    function addTask() {    
2    
3      //get the value of the input field     
4      const newTask = newTaskInput.value;    
5    
6      //if the new task string is not empty     
7      if (newTask) {    
8    
9        //create a new list element     
10        const li = document.createElement('li');    
11    
12        //give it the string value from the new task input     
13        li.textContent = newTask;    
14    
15        //append it to the task list     
16        taskList.appendChild(li);    
17    
18        //and clear the new task input field     
19        newTaskInput.value = '';    
20    
21        //...

实践项目学习querySelector

在构建 Web 应用程序时，可以通过多种方式应用此方法。以下是我建议更多地练习这个概念的几个例子：

响应式导航菜单

您可以使用该querySelector方法来选择按钮或图标元素并向其添加事件***器。这将在用户单击按钮或图标时切换导航菜单的显示。

验证用户表单输入

使用该querySelector方法选择表单元素并在提交表单之前验证用户的输入。

创建动画和效果

用于querySelector选择元素并应用 CSS 过渡或动画，以便能够创建滚动动画、淡入效果或切换动画。 

结论

在本文中，我们研究了如何使用该方法选择元素、更改元素以及从元素中添加或删除类名querySelector。您现在应该能够准确地使用此方法。尝试实施实践项目以进一步巩固您对这一概念的了解。