querySelector()、querySelectorAll()、localeCompare()方法介绍

57 阅读 0 评论 38 点赞

我是靠谱客的博主眯眯眼马里奥，最近开发中收集的这篇文章主要介绍querySelector()、querySelectorAll()、localeCompare()方法介绍，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、getElementsByClassName()方法不足之处
在之前的学习中，我们了解到，可以根据元素的 class 属性值查询一组元素节点对象，即：getElementsByClassName()，但是这个方法不支持 IE8 及以下的浏览器。

在我们的实际开发中，会特别的受限，为了兼容 IE8 及以下的浏览器，我们可以采用一种新的方法querySelector（）

二、querySelector()、querySelectorAll()方法介绍
【1】document.querySelector()
需要一个选择器的字符串作为参数，可以根据一个 CSS 选择器来查询一个元素节点对象
虽然 IE8 中没有 getElementsByClassName()但是可以使用 document.querySelector()代替
使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个。
【2】document.querySelectorAll()
该方法和 document.querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
即使符合条件的元素只有一个，它也会返回数组

document.querySelectorAll('.module').forEach(item=> {
item.remove();
});//数组
var divs = document.querySelectorAll('div'), i;
for (i = 0; i < divs.length; ++i) {
divs[i].style.color = "green";
}//list

二、localeCompare()方法介绍
定义：用本地特定的顺序来比较两个字符串。
　　语法：stringObject.localeCompare(target)
　　参数：target——要以本地特定的顺序与 stringObject 进行比较的字符串。
　　返回值：说明比较结果的数字。
　　（1）如果 stringObject 小于 target，则 localeCompare() 返回小于 0 的数。
　　（2）如果 stringObject 大于 target，则该方法返回大于 0 的数。
　　（3）如果两个字符串相等，或根据本地排序规则没有区别，该方法返回 0。

说明：把 < 和 > 运算符应用到字符串时，它们只用字符的 Unicode 编码比较字符串，而不考虑当地的排序规则。以这种方法生成的顺序不一定是正确的。localeCompare() 方法提供的比较字符串的方法，考虑了默认的本地排序规则。ECMAscript 标准并没有规定如何进行本地特定的比较操作，它只规定该函数采用底层操作系统提供的排序规则。

if(a.localeCompare(b)>=0&&a.localeCompare©<0){}