想要實(shí)現(xiàn)一個(gè)以下功能
用原生js的DOM API來(lái)實(shí)現(xiàn)一個(gè)類jQuery API的功能

window.jQuery = ???
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可將所有 div 的 class 添加一個(gè) red
$div.setText('hi') // 可將所有 div 的 textContent 變?yōu)?hi

1、首先獲取DOM元素

• 判斷傳入的參數(shù)是元素id還是選擇器

如果傳入?yún)?shù)是個(gè)選擇器，我們通過(guò)DOM API里面的querySelectorAll()方法得到這個(gè)選擇器所代表的節(jié)點(diǎn)，并把節(jié)點(diǎn)存入一個(gè)我們預(yù)先定義好的對(duì)象nodes中；
如果傳入?yún)?shù)是個(gè)元素的id，直接在nodes中將其存入并設(shè)置好length的值即可。

let nodes = {}
// 參數(shù)是元素選擇器
  if(typeof nodeOrSelector === 'string') {
    let temp = document.querySelectorAll(nodeOrSelector)
    for (let i = 0;i < temp.length; i++) {
      nodes[i] = temp[i]
    }
    nodes.length = temp.length
// 參數(shù)是元素節(jié)點(diǎn)
  } else if(nodeOrSelector instanceof Node) {
    nodes = {
      0: nodeOrSelector,
      length: 1
    }
  }

2、 封裝一個(gè)addClass()方法
遍歷nodes，利用DOM API的classList和add()添加class，封裝成一個(gè)addClass函數(shù)

function addClass(nodes, classes) {
    for (let i = 0; i < nodes.length; i++) {
      nodes[i].classList.add(classes)
    }
}

然后使用命名空間的用法改寫(xiě)成這樣

nodes.addClass = function(classes) {
    for (let i = 0; i < nodes.length; i++) {
      nodes[i].classList.add(classes)
    }
}

3、封裝一個(gè)setText()方法
同理，封裝遍歷nodes，利用DOM API的textContent修改文本內(nèi)容，封裝成一個(gè)setText函數(shù)

nodes.setText = function(text) {
    for (let i =0; i < nodes.length; i++) {
      nodes[i].textContent = text
    }
}

4、最終結(jié)果

window.jQuery = function(nodeOrSelector) {
  let nodes = {}
  if(typeof nodeOrSelector === 'string') {
    let temp = document.querySelectorAll(nodeOrSelector)
    for (let i = 0;i < temp.length; i++) {
      nodes[i] = temp[i]
    }
    nodes.length = temp.length
  } else if(nodeOrSelector instanceof Node) {
    nodes = {
      0: nodeOrSelector,
      length: 1
    }
  }
  
  nodes.addClass = function(classes) {
    for (let i = 0; i < nodes.length; i++) {
      nodes[i].classList.add(classes)
    }
  }
  nodes.setText = function(text) {
    for (let i =0; i < nodes.length; i++) {
      nodes[i].textContent = text
    }
  }
  return nodes
}

window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可將所有 div 的 class 添加一個(gè) red
$div.setText('hi') // 可將所有 div 的 textContent 變?yōu)?hi