怎么用原生js做dom

使用原生JavaScript操作DOM的方式主要包括：选择元素、创建元素、修改元素属性、添加事件监听器。以下是详细描述：选择器API、DOM树遍历、事件处理、动态内容的生成。

一、选择器API

选择器API是操作DOM的基础，通过选择器API可以获取页面上的元素，然后对这些元素进行操作。原生JavaScript提供了多种选择器API：

1.1、`getElementById`

getElementById是最常用的选择器之一，可以根据元素的ID属性获取元素。

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

1.2、`getElementsByClassName`

这个方法可以根据元素的类名获取元素集合。

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

1.3、`getElementsByTagName`

这个方法可以根据元素的标签名获取元素集合。

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

1.4、`querySelector`

querySelector方法可以使用CSS选择器语法来选择元素，只会返回第一个匹配的元素。

var element = document.querySelector('.myClass');

1.5、`querySelectorAll`

querySelectorAll方法可以使用CSS选择器语法来选择元素，返回所有匹配的元素。

var elements = document.querySelectorAll('.myClass');

二、DOM树遍历

DOM树遍历是操作DOM的基础，通过遍历DOM树可以获取到页面上的任何元素，并对其进行操作。

2.1、父节点

通过parentNode属性可以获取元素的父节点。

var parent = element.parentNode;

2.2、子节点

通过childNodes属性可以获取元素的所有子节点，返回的是一个NodeList。

var children = element.childNodes;

2.3、兄弟节点

通过nextSibling和previousSibling属性可以获取元素的下一个兄弟节点和上一个兄弟节点。

var nextSibling = element.nextSibling;
var previousSibling = element.previousSibling;

三、事件处理

事件处理是DOM操作中非常重要的一部分，通过添加事件监听器可以让页面元素响应用户的操作。

3.1、添加事件监听器

通过addEventListener方法可以给元素添加事件监听器。

element.addEventListener('click', function() {
    alert('Element clicked!');
});

3.2、删除事件监听器

通过removeEventListener方法可以删除元素的事件监听器。

function handleClick() {
    alert('Element clicked!');
}
element.addEventListener('click', handleClick);
element.removeEventListener('click', handleClick);

四、动态内容的生成

通过创建、修改和删除DOM元素，可以实现动态内容的生成。

4.1、创建元素

通过createElement方法可以创建一个新的元素。

var newElement = document.createElement('div');

4.2、设置元素属性

通过setAttribute方法可以设置元素的属性。

newElement.setAttribute('class', 'myClass');

4.3、插入元素

通过appendChild方法可以将新创建的元素插入到DOM树中。

document.body.appendChild(newElement);

4.4、删除元素

通过removeChild方法可以删除DOM树中的元素。

var parent = document.getElementById('parent');
var child = document.getElementById('child');
parent.removeChild(child);

五、实战案例

为了更好地理解上述内容，下面通过一个实战案例来演示如何使用原生JavaScript操作DOM。

5.1、案例描述

我们将创建一个简单的待办事项应用，用户可以添加新的待办事项，并且可以删除已完成的事项。

5.2、HTML结构

首先，我们需要一个简单的HTML结构：

<!DOCTYPE html>
<html>
<head>
    <title>Todo App</title>
</head>
<body>
    <h1>Todo List</h1>
    <input type="text" id="newTodo" placeholder="New Todo">
    <button id="addTodo">Add Todo</button>
    <ul id="todoList"></ul>
    <script src="app.js"></script>
</body>
</html>

5.3、JavaScript代码

接下来，我们编写JavaScript代码来实现待办事项的添加和删除功能。

document.addEventListener('DOMContentLoaded', function() {
    var newTodoInput = document.getElementById('newTodo');
    var addTodoButton = document.getElementById('addTodo');
    var todoList = document.getElementById('todoList');
    addTodoButton.addEventListener('click', function() {
        var newTodoText = newTodoInput.value;
        if (newTodoText !== '') {
            var newTodoItem = document.createElement('li');
            newTodoItem.textContent = newTodoText;
            var deleteButton = document.createElement('button');
            deleteButton.textContent = 'Delete';
            deleteButton.addEventListener('click', function() {
                todoList.removeChild(newTodoItem);
            });
            newTodoItem.appendChild(deleteButton);
            todoList.appendChild(newTodoItem);
            newTodoInput.value = '';
        }
    });
});

通过上述代码，我们实现了一个简单的待办事项应用，用户可以添加新的待办事项，并且可以删除已完成的事项。这展示了如何使用原生JavaScript操作DOM来实现动态内容的生成。

六、项目管理工具推荐

在实际的项目开发过程中，使用合适的项目管理工具可以提高团队的协作效率。推荐以下两个项目管理工具：

6.1、研发项目管理系统PingCode

PingCode是一款专为研发团队设计的项目管理系统，提供了从需求管理、任务管理到缺陷管理的全流程解决方案。它支持敏捷开发、Scrum、Kanban等多种项目管理方法，帮助团队高效地进行协作和交付。

6.2、通用项目协作软件Worktile

Worktile是一款通用的项目协作软件，适用于各类团队和项目。它提供了任务管理、文件共享、即时通讯等功能，帮助团队成员更好地进行沟通和协作，提高工作效率。

通过本文的学习，你应该已经掌握了如何使用原生JavaScript操作DOM，包括选择器API、DOM树遍历、事件处理和动态内容的生成。在实际开发过程中，选择合适的项目管理工具也能大大提高团队的协作效率。