1. 输出指定类型选择器,返回dom节点
先实现兼容不同浏览器的依据选择器获取dom节点
1.1 参数校验
依据正则去校验参数是否符合规范,依据不同的类型执行不同的操作
var idPattern = /^#.{1,}$/ var classPattern = /^\..{1,}$/ var tagPattern = /^[a-zA-Z]+.*$/ if (typeof query !== 'string' || query.length == 0) { throw new Error('请传入string类型的参数,且长度大于1') } else if (idPattern.test(query)) { console.log('id') } else if (tagPattern.test(query)) { console.log('tag') } else if (classPattern.test(query)) { console.log('class') } else { throw new Error('请输出正确的参数,eg:#id,.class,div') }
1.2 id & tagName
id 和 tagName,较为简单,间接应用以下两个函数即可,返回dom的节点,id返回的为单个dom节点,tagName返回的为dom list
if (idPattern.test(query)) { var id = query.slice(1) return document.getElementById(id)} else if (tagPattern.test(query)) { return getElementsByTagName(query)}
1.3 class
// 判断是否有querySelectorAll办法if (!document.querySelectorAll) { return document.querySelectorAll(query);} else { var className = query.slice(1) var children = document.getElementsByTagName('*'); //获取html中所有的DOM节点 var elements = []; //用一个空数组寄存要获取的class类名 for (var i = 0; i < children.length; i++) { var child = children[i]; var classNames = child.className.split(' '); //将节点所有的class节点保留在一个数组之中 for (var j = 0; j < classNames.length; j++) { //遍历循环,将满足要求的class存入elements空数组中 if (classNames[j] == className) { elements.push(child); break; } } }
1.3.1 getElementsByClassName 、 querySelectorAll
这里能够看到,咱们先去判断了是否存在querySelectorAll办法,而没有去判断是否有getElementsByClassName办法
querySelectorAll 返回的是一个 Static Node List,而 getElementsBy 系列的返回的是一个 Live Node List
2. JS继承
3. 残缺代码
https://codepen.io/xiaofute/p...