Let’s start with a question: what do we do to retrieve siblings of an element using the DOM API?

The code is as follows:

<! DOCTYPE html> <html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge"</title> </head> <body> <ul> <li id="item1"> Option 1</li> <li id="item2"> Option 2</li> <li id="item3"> Option 3</li> <li id="item4"> Option 4</li> <li id="item5"5 > options < / li > < / ul > < script > var allChildren = item3. ParentNode. Children var array = {length: 0}for (let i = 0; i < allChildren.length; i++) {
      if(allChildren[i] ! == item3) { array[array.length] = allChildren[i] array.length += 1 } } console.log(array) </script> </body> </html>Copy the code

The effect is shown in Figure 1:

And then we wrap it, and we wrap it with a name and we write a function:

functionGetSiblings (node) {/* allChildren = node.parentNode.children var array = {length:0}for (let i = 0; i < allChildren.length; i++){
  if(allChildren[i] ! == node){ array[array.length] = allChildren[i] array.length +=1 } }return array
}
console.log(getSiblings(item3))
Copy the code

Operation effect is shown in Figure 2:

Ok, an API written by myself is now working properly!

Then write an AP that adds the class

Function addClass(node, classes){}

If we want to add three classes to Item3, we need to add a,b, and c:

item3.classList.add('a')
item3.classList.add('b')
item3.classList.add('c')
Copy the code

The effect is shown in Figure 3:

This code is ugly! Is there a neat way to do this:

var classes = ['a'.'b'.'c']
classes.forEach((value)=> item3.classList.add(value))
Copy the code

Is it possible to add and remove? Do it with a hash:

var classes = {'a':true.'b':false.'c':true}

for(let key in classes){
  var value = classes[key]
  if(value){
    item3.classList.add(key)
  }else{
    item3.classList.remove(key)
  }
}
Copy the code

The effect is shown in Figure 4:

Next, encapsulate:

function addClass(node,classes){
   /* var classes = {'a':true.'b':false.'c':true} * /for(let key in classes){
    var value = classes[key]
    if(value){
      node.classList.add(key)
    }else{
      node.classList.remove(key)
    }
  }
}
addClass(item3,{'a': true.'b': false.'c': true})
Copy the code

The effect is shown in Figure 5:

The complete code is as follows:

<! DOCTYPE html> <html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge"</title> </head> <body> <ul> <li id="item1"> Option 1</li> <li id="item2"> Option 2</li> <li id="item3"> Option 3</li> <li id="item4"> Option 4</li> <li id="item5"> Option 5</li> </ul> <script>function getSiblings(node) {
    var allChildren = node.parentNode.children
    var array = {
    length:0
  }
  for (let i = 0; i < allChildren.length; i++) {
    if(allChildren[i] ! == node){ array[array.length] = allChildren[i] array.length += 1 } }return array
  }
  console.log( getSiblings(item3) )
  
  function addClass(node,classes){
     /* var classes = {'a':true.'b':false.'c':true} * /for(let key in classes){
      var value = classes[key]
      if(value){
        node.classList.add(key)
      }else{
        node.classList.remove(key)
      }
    }
  }
  
  addClass(item3,{'a': true.'b': false.'c': true})
  
  </script>
</body>
</html>
Copy the code

Let’s optimize the code:

function addClass(node,classes){
   /* var classes = {'a':true.'b':false.'c':true} * /for(let key in classes){
    var value = classes[key]
    var methodName = value ? 'add' : 'remove'
    node.classList.add[methodName](key)
  }
}
Copy the code

So these two apis are written. Let’s call it jamDom

function getSiblings(node) {
  var allChildren = node.parentNode.children
  var array = {
  length:0
}
for (let i = 0; i < allChildren.length; i++) {
  if(allChildren[i] ! == node){ array[array.length] = allChildren[i] array.length += 1 } }return array
}

functionaddClass(node,classes){ classes.forEach( (value)=> node.classList.add(value) ) } window.jamDom = {} jamDom.getSiblings =  getSiblings jamDom.addClass = addClass jamDom.getSiblings(item3) jamDOm.addClass(item3 , ['a'.'b'.'c'])
Copy the code

Optimize it again:

window.jamDom = {}
jamDom.getSiblings = function (node) {
  var allChildren = node.parentNode.children
  var array = {
  length:0
}
for (let i = 0; i < allChildren.length; i++) {
  if(allChildren[i] ! == node){ array[array.length] = allChildren[i] array.length += 1 } }return array
}

jamDom.addClass = function(node,classes){ classes.forEach( (value)=> node.classList.add(value) ) } jamDom.getSiblings(item3) jamDOm.addClass(item3 ['a'.'b'.'c'])
Copy the code

If we want to use

item3.addClass( ['a','b','c'] )
Copy the code

So in this case, what do we do?

There are two ways to do this. Method 1: Modify the Node prototype directly

Node.prototype.getSiblings = function () {
  var allChildren = this.parentNode.children
  var array = {
  length:0
}
for (let i = 0; i < allChildren.length; i++) {
  if(allChildren[i] ! == this) { array[array.length] = allChildren[i] array.length += 1 } }return array
}
Node.prototype.addClass = function (classes){
  classes.forEach( (value)=> this.classList.add(value) )
}

console.log(item3.getSiblings())
item3.addClass(['a'.'b'.'c']) // Item3.getsiblings. Call (item3) // Item3.addClass.call (item3,[item3.addClass.call)'a'.'b'.'c'])
Copy the code

Method two: Do not change the Node prototype

window.jQuery = function (node){
  return{
    getSiblings: function(){
      var allChildren = node.parentNode.children
      var array = {
        length:0
       }
      for (let i = 0; i < allChildren.length; i++){
        if(allChildren[i] ! == node) { array[array.length] = allChildren[i] array.length += 1 } }return array
   },
    addClass: function(){
      classes.forEach( (value)=> node.classList.add(value) )
    }
  }
}

var node2 = jQuery(item3)
node2.getSiblings()
node2.addClass()
Copy the code