mui项目中如何使用原生JavaScript代替jquery来操作dom

• 选择元素
  jq

   $('.el');
  

  js

  document.querySelector("div");
  div.querySelectorAll('.el');
  

  mui

  mui(".el")[0];
  

• 父、兄弟元素
  jq

  $('.el').parent();
  $('.el').prev();
  $('.el').next();
  $('.el').last();
  $('.el').first();
  

  js

  document.querySelector('.el').parentNode;
  document.querySelector('.el').previousElementSibling;
  document.querySelector('.el').nextElementSibling; 
  document.querySelector(".el").lastElementChild;
  document.querySelector(".el").children[0];
  

• 获取元素文本
  jq

  $('.el').html();
  $('.el').val();
  $('.el').text();
  $(el).replaceWith(string);
  

  js

  document.getElementById('el').innerHTML;
  document.getElementById('el').value;
  document.getElementById('el').textContent
  document.getElementById('el').outerHTML = string;
  

• 创建元素
  jq

  var newEl = $('<div/>');
  

  js

  var newEl = document.createElement('div');
  

• Set/get属性
  jq

  $('.el').filter(':first').attr('key', 'value');
  $('.el').filter(':first').attr('key');
  $('.el').addClass('class');
  $('.el').removeClass('class');
  $('.el').toggleClass('class');
  $(el).css('border-width', '20px');
  

  js

  document.querySelector('.el').setAttribute('key', 'value');
  document.querySelector('.el').getAttribute('key');
  document.querySelector('.el').classList.add('class');
  document.querySelector('.el').classList.remove('class');
  document.querySelector('.el').classList.toggle('class');
  document.querySelector('.el').style.borderWidth = '20px';
  

• 附加
  jq

  $('.el').append($('<div/>'));
  

  js

  document.querySelector('.el').appendChild(document.createElement('div'));
  

• 克隆
  jq

  var clonedEl = $('.el').clone();
  

  js

  var clonedEl = document.querySelector('.el').cloneNode(true);
  

• 移除
  jq

  $('.el').remove();
  

  js

  var toRemove = document.querySelector(el);
  toRemove.parentNode.removeChild(toRemove);
  

• ajax
  jq

  $.get('url', function (data) {
  
  });
  $.post('url', {data: data}, function (data) {
  
  });
  

  js
  get

  var xhr = new XMLHttpRequest();
  
  xhr.open('GET', url);
  xhr.onreadystatechange = function (data) {
  
  }
  xhr.send();
  

  post

  var xhr = new XMLHttpRequest()
  
  xhr.open('POST', url);
  xhr.onreadystatechange = function (data) {
  
  }
  xhr.send({data: data});
  

• 显示和隐藏
  jq

  $(el).show();
  $(el).hide();
  **js**
  el.style.display = '';
  el.style.display = 'none';
  

• 是否包含某个 class
  jq

      $(el).hasClass(className);
  **js**
  
      if (el.classList)
        el.classList.contains(className);
      else
        new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);　   
  

• 添加 Class
  jq

  $(el).addClass(className);
  

  js

  if (el.classList)
    el.classList.add(className);
  else
    el.className += ' ' + className;
  

• 移除class
  jq

  $(el).removeClass(className);
  

  js

  // removeClass, takes two params: element and classname
  function removeClass(el, cls) {
    var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
    el.className = el.className.replace(reg, " ")
    .replace(/(^\s*)|(\s*$)/g,"");
  }
  

  –如果你只需要支持像IE10+,Chrome,FireFox,Opera和Safari这样较现代的浏览器，那么你可以开始使用HTML5的classList功能，它让增加和删除类变得更简单

  el.classList.add(className);
  el.classList.remove("foo")
  el.classList.contains("foo");
  el.classList.toggle("active");
  

• 插入 HTML
  jq

  $(el).before(htmlString);
  
  $(parent).append(el);
  
  $(el).after(htmlString);
  

  js

  el.insertAdjacentHTML('beforebegin', htmlString);
  parent.appendChild(el);
  el.insertAdjacentHTML('afterend', htmlString);
  

• 获取子节点
  jq

  $(el).children();
  

  js

  el.children
  

• Trim
  jq

  $.trim(string);
  

  js

  string.trim();
  

原文链接