一、新的选择器

getElementByClassName
  var oDiv = document.getElementsByClassName('box')[0];
  var oDiv = document.getElementsByClassName('box view')[0];
querySelector
  var oDiv = document.querySelector('#div1');
  // 只能选择一组中的第一个元素
  var oDiv = document.querySelector('.box');
  var oDiv = document.querySelector("[title=hello]");
querySelectorAll
  var aLi = document.querySelectorAll("li");
  var aDiv = document.querySelectorAll(".box");

二、class列表属性操作

classList： 获取元素中类名类似与数组的对象
alert( oDiv.classList );
length: class的长度
alert( oDiv.classList.length );
add(): 添加class方法
  oDiv.classList.add('box3');
remove(): 删除class方法
  oDiv.classList.remove('box4');
toggle(): 切换class方法
  oDiv.classList.toggle('view2');

三、拖拽操作

拖拽使能draggable
  // draggable设置为true，元素就可以拖拽
  <div id="box" draggable="true"></div>
拖拽元素事件(被拖拽的元素)
   - dragstart: 拖拽前触发 
   - drag: 拖拽前、拖拽结束之间，连续触发
   - dragend: 拖拽结束触发
目标元素事件
  - dragenter: 进入目标元素触发，相当于mouseover
  - dragover: 进入目标、离开目标之间，连续触发
  - dragleave: 离开目标元素触发，相当于mouseout
  - drop: 在目标元素上释放鼠标触发(如果要触发该事件，需要在dragover中阻止其默认事件)
火狐下拖拽问题
必须设置dataTransfer对象才可以拖拽除图片外的其他标签(图片默认就是可以拖拽的);
  // 不是固定的，只要有设置值即可
  ev.dataTransfer.setData('name', 'hello');
dataTransfer对象
  - setData() : 设置数据 key和value(必须是字符串)
     ev.dataTransfer.setData('name', 'hello');
  - getData() : 获取数据，根据key值，获取对应的value
     ev.dataTransfer.getData('name');
  - setDragImage(): 三个参数：指定的元素，坐标X，坐标Y
    ev.dataTransfer.setDragImage(oBt, 0, 0);
  - files
     获取外部拖拽的文件，返回一个filesList列表
    filesList下有个type属性，返回文件的类型

四、FileReader读取文件信息

readAsDataURL: 参数为要读取的文件对象，将文件读取为DataUrl
  // 获取外部文件列表
  var files = ev.dataTransfer.files;
  var fileRead = new FileReader();
  fileRead.readAsDataURL(files[0]);
onload: 当读取文件完成的时候触发此事件
  this.result , 来获取读取的文件数据，如果是图片，将返回base64格式的图片数据
  fileRead.onload = function(){
      alert(this.result);
  }

案例: 上传图片预览功能
案例: 拖拽购物车

作者：西门奄
链接：https://www.jianshu.com/u/77035eb804c3
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。