1回答

好帮手慕糖

2020-03-30

同学你好，这里由于涉及到正则的内容，稍微有些不好理解，可以多看几遍视频哦，这里我们要了解document.getElementsByClassName方法获取DOM元素存在兼容性， 有的浏览器不支持这个方法。

然后， 我们在来理解这节课的主要目的，  就是封装了一个方法getElementsByClassName， 用来处理document.getElementsByClassName方法的兼容性问题。也可以结合以下加了注释的代码来理解下。

var getElementsByClassName = function(opts) {
var searchClass = opts.searchClass; // 存储要查找的类名
var node = opts.node || document; // 存储要出查找的范围
var tag = opts.tag || '*'; // 存储一定范围内要查找的标签
var result = [];
// 判断浏览器支不支持getElementsByClassName方法
if (document.getElementsByClassName) { // 如果浏览器支持
// 通过getElementsByClassName获取所有的元素
var nodes = node.getElementsByClassName(searchClass);
// 判断是否传入了指定范围， 如果传入的li， 那么就只返回对应类名为searchClass的li标签
if (tag !== "*") {
// 这里的node = nodes[i++]表示直到nodes集合中的最后一个元素。停止循环。这个就是循环条件哦。
/**
             *  可以这样理解for循环中间的代码是用来判断是否满足循环条件的
             *  当i = nodes.length;时候， nodes[nodes.length]值为undefined。 所以node的也被赋值为undefined， 
             *  此时通过隐士类型转换， undefined会被转成false，不满足循环条件了，也就退出循环了
             */
for (var i = 0; node = nodes[i++];) {
// 判断获取元素的标签名和指定的标签名是否相等
if (node.tagName === tag.toUpperCase()) {
// 相等的话，就将获取的元素存在到一开始定义的数组中
result.push(node);
}
}
} else { // 直接将获取的所有元素赋值给result
result = nodes;
}
// 最后返回获取的元素
return result;
} else { // 使用IE8以下的浏览器能够支持该属性
// 所有浏览器都会支持getElementsByTagName这个方法， 所以用给这个方法来兼用不支持getElementsByClassName的方法
var els = node.getElementsByTagName(tag);
// 获取所有元素
var elsLen = els.length;
var i, j;
// 这里是定义一个正则表达式， 用来匹配传入的类名
/**
         * 正则表达式的定义及相关用法，后面会有对应的章节详细讲解， 同学目前只需要简单了解即可哦
        */
var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
/**
         * 通过for循环， 将标签中拥有类名元素找到， 赋值给result
         */
for (i = 0, j = 0; i < elsLen; i++) {
// 检测正则表达式，
if (pattern.test(els[i].className)) {
result[j] = els[i];
j++;
}
}
return result;
}

然后在html中调用。

最终结果：获取了所有类名light的li标签元素， 没有获取到类名为light的div元素

这里的确稍微有点难。可以先结合代码实现的效果， 简单了解一下，不用深究， 随着我们深入的学习， 在返回来看这里的知识就会很容易理解了。

祝学习愉快~

1