JS实现继承，获取dom元素

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 document.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继承

2.1 构造函数继承

function Parent(author){
 this.author = author;
 this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.getName = function(){
 console.log(this.author);
}

function Child(author,age){
 Parent.call(this,author);// 第二次调用 Parent()
 this.age = age;
}

Child.prototype = new Parent(); // 第一次调用 Parent()

var child1 = new Child('xiaofute',18);
var child2 = new Child('lulu',19);

2.2 寄生组合式继承

function inheritPrototype(subType, superType) {
  var prototype = Object(superType.prototype); //创建对象
  prototype.constructor = subType; //增强对象
  subType.prototype = prototype; //指定对象
}

function SuperClass(createTime) {
  this.author = "xiaoxue";
  this.createTime = createTime;
}
SuperClass.prototype.getDom = (query) => getDom(query);

function SubClass(createTime) {
  SuperClass.call(this, createTime); //第二次调用SuperType
}

inheritPrototype(SubClass, SuperClass);

3. 完整代码

https://codepen.io/xiaofute/p...