JavaScript学习笔记:jQuery内容选择器的原生实现

in #javascript6 years ago

深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器

jQuery 很好用,但如果只是偶尔用到,那么引入这么大一个库恐怕就得不偿失了。何况学习的时候,总是要搞明白各种实现方法的。偏偏网上大多数试图实现 no jQuery 的教程都浅尝辄止,没有涉及到内容选择器等没有对应 CSS 选择器的语法。在自己摸索出 :contains 的原生实现后,查到了这篇博文——写得很好,我决定用 ES6 语法重写一下。

$('span:contains("test")').css('color','red')

const spans = document.getElementsByTagName('span');
for (const span of spans) {
    if(span.textContent.includes('text')) {
        span.style.color = 'red';
    }
}

原作者已经提供了详细的过程,我就不重复了,总之思路就是用循环语句获取全部元素再来判断。