前端原生js可以怎么用

前端原生JS的使用方法包括：操作DOM、事件处理、AJAX请求、动画效果、数据存储、模块化开发。

在详细介绍这些方法之前，我们先来详细解释一下操作DOM这一点。DOM（文档对象模型）是指HTML和XML文档的编程接口。通过操作DOM，开发者可以动态地改变网页的内容和结构。原生JavaScript提供了许多方法来查找、添加、修改和删除DOM节点。例如，document.getElementById可以用于查找特定的元素，appendChild可以用于添加新的节点，removeChild可以用于删除节点。掌握这些操作是前端开发的基本技能之一。

一、操作DOM

DOM操作是前端开发中最基础且最常用的技能之一。以下是一些常见的操作方式：

1、查找元素

查找DOM元素是开始任何DOM操作的第一步。原生JavaScript提供了多种查找元素的方法：

document.getElementById(id)：通过元素的ID查找。
document.getElementsByClassName(className)：通过元素的类名查找，返回一个HTMLCollection。
document.getElementsByTagName(tagName)：通过元素的标签名查找，返回一个HTMLCollection。
document.querySelector(selector)：通过CSS选择器查找，返回第一个匹配的元素。
document.querySelectorAll(selector)：通过CSS选择器查找，返回所有匹配的元素，返回一个NodeList。

let elementById = document.getElementById('exampleId');
let elementsByClass = document.getElementsByClassName('exampleClass');
let elementsByTag = document.getElementsByTagName('div');
let firstElementBySelector = document.querySelector('.exampleClass');
let allElementsBySelector = document.querySelectorAll('.exampleClass');

2、修改元素内容

一旦找到元素，可以修改其内容或属性：

element.innerHTML：设置或获取元素的HTML内容。
element.textContent：设置或获取元素的文本内容。
element.setAttribute(name, value)：设置元素的属性。
element.getAttribute(name)：获取元素的属性。
element.style.property：设置或获取元素的内联样式。

let element = document.getElementById('exampleId');
element.innerHTML = 'New Content';
element.textContent = 'New Text';
element.setAttribute('data-example', 'value');
let attributeValue = element.getAttribute('data-example');
element.style.color = 'red';

3、添加和删除元素

通过原生JavaScript，开发者可以动态地添加或删除DOM节点：

document.createElement(tagName)：创建一个新的元素。
parentElement.appendChild(newElement)：向父元素中添加一个子元素。
parentElement.insertBefore(newElement, referenceElement)：在参考元素之前插入一个新的元素。
parentElement.removeChild(childElement)：从父元素中删除一个子元素。

let newElement = document.createElement('div');
newElement.textContent = 'New Element';
document.body.appendChild(newElement);
let referenceElement = document.getElementById('referenceId');
document.body.insertBefore(newElement, referenceElement);
document.body.removeChild(newElement);

二、事件处理

事件处理是前端开发中的核心概念之一。通过事件处理，开发者可以让网页响应用户的操作。

1、添加事件监听器

使用addEventListener方法，可以为DOM元素添加事件监听器：

element.addEventListener(event, function)：为元素添加指定事件的监听器。

let button = document.getElementById('exampleButton');
button.addEventListener('click', function() {
    alert('Button clicked!');
});

2、事件对象

事件处理函数通常会接收一个事件对象，包含了与事件相关的详细信息：

event.type：事件类型。
event.target：触发事件的元素。
event.preventDefault()：阻止默认行为。
event.stopPropagation()：阻止事件冒泡。

button.addEventListener('click', function(event) {
    console.log('Event type:', event.type);
    console.log('Event target:', event.target);
    event.preventDefault();
    event.stopPropagation();
});

三、AJAX请求

AJAX（Asynchronous JavaScript and XML）允许网页在不重新加载的情况下从服务器请求数据。原生JavaScript提供了XMLHttpRequest对象来实现AJAX请求。

1、创建请求

通过XMLHttpRequest对象，可以创建并发送HTTP请求：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        let data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};
xhr.send();

2、处理响应

在请求成功后，可以处理服务器返回的数据：

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            let data = JSON.parse(xhr.responseText);
            console.log('Success:', data);
        } else {
            console.error('Error:', xhr.statusText);
        }
    }
};

四、动画效果

原生JavaScript也可以用于创建简单的动画效果。通过修改元素的样式属性，可以实现动画效果。

1、使用`setInterval`和`setTimeout`

通过定时器，可以实现动画效果：

let box = document.getElementById('box');
let position = 0;
function animate() {
    position += 1;
    box.style.left = position + 'px';
    if (position < 100) {
        requestAnimationFrame(animate);
    }
}
animate();

2、CSS动画和过渡

虽然主要使用CSS来创建动画，但JavaScript可以用来控制动画的开始和结束：

let box = document.getElementById('box');
box.style.transition = 'left 2s';
box.style.left = '100px';

五、数据存储

原生JavaScript提供了多种方式来在客户端存储数据。

1、`localStorage`和`sessionStorage`

localStorage：存储的数据没有过期时间，除非手动删除。
sessionStorage：存储的数据在页面会话结束后被清除。

// localStorage
localStorage.setItem('key', 'value');
let value = localStorage.getItem('key');
localStorage.removeItem('key');
localStorage.clear();
// sessionStorage
sessionStorage.setItem('key', 'value');
let value = sessionStorage.getItem('key');
sessionStorage.removeItem('key');
sessionStorage.clear();

2、`Cookies`

通过document.cookie可以设置和获取cookie：

// 设置cookie
document.cookie = 'username=John Doe; expires=Fri, 31 Dec 2022 23:59:59 GMT; path=/';
// 获取cookie
let cookies = document.cookie;
console.log(cookies);

六、模块化开发

原生JavaScript支持模块化开发，通过import和export关键字，可以实现模块化开发。

1、定义模块

在一个模块文件中，可以使用export关键字导出变量、函数或类：

// module.js
export const name = 'John Doe';
export function greet() {
    console.log('Hello, ' + name);
}

2、导入模块

在另一个文件中，可以使用import关键字导入模块：

// main.js
import { name, greet } from './module.js';
console.log(name);  // John Doe
greet();  // Hello, John Doe

3、默认导出

一个模块可以有一个默认导出：

// module.js
export default function() {
    console.log('Default export');
}

导入默认导出时，可以使用任意名称：

// main.js
import defaultFunction from './module.js';
defaultFunction();  // Default export

结论

原生JavaScript提供了丰富的功能，帮助开发者实现各种前端需求。从基础的DOM操作、事件处理，到高级的AJAX请求、动画效果、数据存储和模块化开发，掌握这些技能将大大提升你的前端开发能力。通过不断实践和探索，你将能够更加高效地开发出功能丰富、用户体验优良的网页应用。如果在项目管理中需要协作，可以考虑使用研发项目管理系统PingCode和通用项目协作软件Worktile来提高团队效率。