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

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);
});