Document.createElement()
document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。
appendChild() 方法在节点的子节点列表末添加新的子节点。
insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
用途举例：用这个来实现手动唤起文件上传入口
// 手动调取图片本地上传入口
function onUploadImgLocal(row:any) {
console.log('importBillExcel', row)
const input = document.createElement('input')
input.type = 'file'
input.accept = '.jpeg, .png, .jpg' // 限制选择的文件类型为 .jpg, .png, .jpg
input.style.display = 'none'
document.body.appendChild(input)
input.click()
input.onchange = (e:any) => {
const file = e.target.files[0] // 获取文件对象
console.log('eeeeee', e, file)
// handleExceed([file])
}
}-
创建隐藏的文件输入元素：代码首先通过
document.createElement创建一个input元素，并设置其类型为file，接受的文件类型为.jpeg, .png, .jpg，然后将其隐藏并添加到document.body中。 -
模拟点击文件输入：通过
input.click()方法，模拟用户点击文件输入元素，从而唤起文件选择界面。 -
处理文件选择变化：通过
input.onchange事件监听器，当用户选择文件后，执行箭头函数。该函数从事件目标的files属性中获取第一个文件（e.target.files[0]），并将其传递给handleExceed函数进行进一步处理，同时在控制台打印相关信息。
// 创建一个文件输入元素 const fileInput = document.createElement('input'); fileInput.type = 'file'; fileInput.accept = '.jpeg, .png, .jpg'; // 限制选择的文件类型 // 添加到DOM中 document.body.appendChild(fileInput); // 添加点击事件，例如触发文件选择对话框 fileInput.addEventListener('click', () => { // 可以在这里添加一些额外的逻辑，比如显示提示信息 }); // 监听文件选择变化 fileInput.addEventListener('change', (event) => { const files = event.target.files; // 获取选中的文件列表 if (files && files.length > 0) { // 处理选中的文件 console.log('文件已选择:', files[0]); // 这里可以添加更多处理文件的逻辑 } });
document对象的一些常用方法，并且补充了一些说明和示例。以下是10个常用的方法：
//创建一个新的元素节点。
const newElement = document.createElement('div');
//将一个节点添加到指定父节点的子节点列表的末尾。
document.body.appendChild(newElement);
//通过ID获取文档中的一个元素。
const elementById = document.getElementById('myId');
//通过类名获取文档中的元素集合。
const elementsByClass = document.getElementsByClassName('myClass');
//通过标签名获取文档中的元素集合。
const elementsByTag = document.getElementsByTagName('p');
//返回文档中匹配指定CSS选择器的第一个元素。
const firstMatch = document.querySelector('.myClass');
//返回文档中匹配指定CSS选择器的所有元素的NodeList对象。
const allMatches = document.querySelectorAll('.myClass');
//创建一个文本节点
const textNode = document.createTextNode('Hello, world!');
//从DOM树中删除一个子节点。
document.body.removeChild(newElement);
//向元素添加事件监听器。
input.addEventListener('change', (e) => {
const file = e.target.files[0];
console.log('Selected file:', file);
});
