Debug-023-Document.createElement()的使用

本文主要是介绍Debug-023-Document.createElement()的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 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,  .jpginput.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])}
}

1. 创建隐藏的文件输入元素：代码首先通过document.createElement创建一个input元素，并设置其类型为file，接受的文件类型为.jpeg, .png, .jpg，然后将其隐藏并添加到document.body中。

2. 模拟点击文件输入：通过input.click()方法，模拟用户点击文件输入元素，从而唤起文件选择界面。

3. 处理文件选择变化：通过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);
});

这篇关于Debug-023-Document.createElement()的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---