关于javascript: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 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…