2回答

好帮手慕糖

2019-08-21

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

如果帮助到了你， 祝学习愉快！

0

好帮手慕糖

2019-08-20

同学你好，1、node是个变量名，是个自定义的属性。

opt是参数，：这句代码的意思就是如果用户没有传入要查找的元素， 那么就去document中查找。opts.node就是 函数getElementsByClassName下的属性node

2、正则指的就是正则表达式，正则表达式是描述了一种字符串匹配的模式。书写的这个正则的作用：来直接匹配匹配类名或者左右有空白的类名。

（1）^表示以...开头。

（2）\s匹配任何不可见字符，包括空格、制表符、换页符等等。new RegExp()中的\需要转义，否则就是普通的斜杠，所以变为\\s。

（3）$表示以...结尾。

所以类名应该是：'name'（无空格），' name'（前有空格），‘name ’（后有空格），‘ name ’（前后有空格）。

这个后面的课程中有讲解，这里可以先了解下哦。

3、RegExp 是正则表达式的缩写。通过 new 关键词来定义 RegExp 对象，所在这里就是定义正则表达式的哦。

4、test() 是正则表达式中的一个方法，是检索字符串中的指定值。返回值是 true 或 false。

5、如下这个是一个对象{}，而searchClass是这个对象的属性名。后面的是属性值哦。

6、这里由于涉及到正则的内容，稍微有些不好理解，可以多看几遍视频哦，这里我们要了解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元素

如果觉得不好理解， 可以先结合代码实现的效果， 简单了解一下，先梳理下思路，根据思路来看代码哦。

如果帮助到了你， 欢迎采纳！

祝学习愉快！

0

hlisa呀

h 请问老师，这一节课的内容，以后的实用性高吗？这一章好难啊

h019-08-20

共1条回复