jQuery的原生替代，参考自你不需要jQuery，对其进行了更清晰的总结与分类，现代游览器基本都支持（ie10+以上），只整理了最简洁实用的原生代码，过分累赘的实现没有加入
元素获取
| $(selector) | document.querySelectorAll(selector) |
| $(el).find(selector) | el.querySelectorAll(selector) |
| $(el).prev() | el.previousElementSibling |
| $(el).next() | el.nextElementSibling |
| $(el).first() | el.firstElementChild |
| $(el).last() | el.lastElementChild |
| $(el).parent() | el.parentNode |
| $(el).offsetParent() | el.offsetParent |
| $(el).children() | el.children |
| $(el).siblings() | Array.prototype.filter.call(el.parentNode.children, child => child !== el) |
dom操作
| $(el).before(htmlString) | el.insertAdjacentHTML(‘beforebegin‘, htmlString) => el.before(string) |
| $(el).after(htmlString) | el.insertAdjacentHTML(‘afterend‘, htmlString) => el.after(string) |
| $(parent).prepend(el) | parent.insertBefore(el, parent.firstChild) => el.prepend(htmlString) |
| $(parent).append(el) | parent.appendChild(el) => el.append(htmlString) |
| $(el).remove() | el.parentNode.removeChild(el) => el.remove() |
| $(el).clone() | el.cloneNode(true) |
| $(el).empty() | el.innerHTML = ‘‘ |
| $(el).replaceWith(string) | el.outerHTML = string |
| $(el).html(string) | el.innerHTML = string |
| $(el).text(string) | el.textContent = string |
| $(el).val(string) | el.value = string |
| $(el).html() | el.innerHTML |
| $(el).text() | el.textContent |
| $(el).val() | el.value |
样式操作
| $(el).hasClass(className) | el.classList.contains(className) |
| $(el).addClass(className) | el.classList.add(className) |
| $(el).removeClass(className) | el.classList.remove(className) |
| $(el).toggleClass(className) | el.classList.toggle(className) |
| $(el).css(ruleName) | getComputedStyle(el)[ruleName] |
| $(el).css(‘width‘, ‘20px‘) | el.style.width = ‘20px‘ |
属性操作
| $(el).attr(‘title‘) | el.getAttribute(‘title‘) |
| $(el).attr(‘title‘, string) | el.setAttribute(‘title‘, string) |
位置/尺寸
| $(el).position() | { left: el.offsetLeft, top: el.offsetTop } |
| $(el).offset() | el.getBoundingClientRect() |
| $(el).outerWidth() | el.offsetWidth |
| $(el).outerHeight() | el.offsetHeight |
| $(el).scrollTop() | el.scrollTop |
| $(el).scrollLeft() | el.scrollLeft |
特效
| $(el).hide() | el.style.display = ‘none‘ |
| $(el).show() | el.style.display = ‘‘ |
dom载入完毕
| $(方法) | document.addEventListener(‘DOMContentLoaded‘, 方法) |
jQuery的原生替代
原文地址：https://www.cnblogs.com/kanyu/p/10348885.html