dom操作和axios的基本知识梳理
一、DOM操作
1.选择元素
document.getElementById(id): 根据元素的ID选择单个元素。document.getElementsByClassName(className): 根据类名选择多个元素（返回HTMLCollection）。document.getElementsByTagName(tagName): 根据标签名选择多个元素（返回HTMLCollection）。document.querySelector(selector): 根据CSS选择器选择单个元素。document.querySelectorAll(selector): 根据CSS选择器选择多个元素（返回NodeList）。
2.创建和修改元素
创建元素: 使用
document.createElement(tagName)创建新的元素。设置内容: 使用
element.textContent或element.innerHTML设置元素的文本或HTML内容。修改属性: 使用
element.setAttribute(attributeName, value)修改属性，或者直接访问属性如element.src。添加类名: 使用
element.classList.add(className)添加类名，element.classList.remove(className)移除类名。
3.插入和删除元素
插入:
parentElement.appendChild(newElement): 在父元素末尾插入子元素。parentElement.insertBefore(newElement, referenceElement): 在指定元素前插入新元素。
删除:
parentElement.removeChild(childElement): 从父元素中删除子元素。element.remove(): 删除自身元素。
4.样式操作
element.style.propertyName: 直接修改内联样式。element.classList.toggle(className): 切换类名，从而改变样式。
二、常见事件处理
1.事件监听
element.addEventListener(event, function): 为元素添加事件监听器，可以添加多个监听器。element.removeEventListener(event, function): 移除事件监听器。
2.常见事件类型
鼠标事件:
click: 鼠标点击事件。dblclick: 双击事件。mouseover/mouseout: 鼠标移入/移出事件。
键盘事件:
keydown: 按键按下事件。keyup: 按键抬起事件。
表单事件:
submit: 表单提交事件。change: 表单元素值变化事件。
窗口事件:
load: 页面或资源加载完成事件。resize: 窗口大小变化事件。
3.事件对象
在事件处理函数中，可以访问事件对象（通常命名为
event），它包含关于事件的详细信息，如event.target（事件目标）、event.type（事件类型）等。
4.事件冒泡和捕获
事件冒泡: 事件从目标元素向上冒泡到其父元素。
事件捕获: 事件从顶层元素向下传播到目标元素。在
addEventListener中可以通过第三个参数设置为true启用捕获。
三、axios的基本操作
Axios 支持多种 HTTP 请求方法，如 GET、POST、PUT、DELETE 等
1.数据的请求和上传
axios({
url: '目标资源地址',
method: '请求方法',
data: {
参数名: 值
}
}).then(result => {
// 对服务器返回的数据做后续处理
})其中url为获取资源的目标地址，method为请求 方法，常见的有GET、POST、PUT、DELETE 等，其中默认为get方法，可以不写。在使用需要传参的方法时data为上传的数据。
2.axios 错误处理
axios({
// ...请求选项
}).then(result => {
// 处理成功数据
}).catch(error => {
// 处理失败错误
})异常捕获通常在 .catch 语句中处理。可以根据错误的状态码进行特定的处理。
axios.get('/endpoint')
.then(response => {
console.log(response.data);
})
.catch(error => {
if (error.response) {
// 请求已发出，但服务器响应状态码不在 2xx 范围内
console.error('Error Response:', error.response.status);
console.error('Data:', error.response.data);
} else if (error.request) {
// 请求已发出，但没有收到响应
console.error('Error Request:', error.request);
} else {
// 其他错误
console.error('Error Message:', error.message);
}
});