Events and selectors in native javascript

Question

Like this jQuery dependent code

$('.myElement').click(function () {
  drawMode = !drawMode;
  $icon = $(this).children('i');
  if (drawMode) {
    $icon.removeClass('a').addClass('b');
  } else {
    $icon.removeClass('b').addClass('a');
  }
});

correspond in your own javascript?

I tried

var element = document.getElementsByClassName('myElement')[0];    
element.addEventListener('click', function (e) {
  drawMode = !drawMode;
  var icon = this.children()[0];
  if (drawMode) {
    icon.classList.remove('a').add('b');
  } else {
    icon.classList.remove('b').add('a');
  }
});

but I cannot find the children element correctly.

Answer 1

jQuery childrenallows you to filter by selector, which is not available in the DOM API (you can find all descendants matching the given CSS selector, but you cannot [at the moment] limit it only to children).

If it does not matter whether it is a child or just a descendant, then:

var icon = this.querySelector("i");

, i. , . , , :

<div class="myElement">
    <span>
        <i>You DON'T want this one</i>
    </span>
    <i>You do want this one</i>
</div>

, , , :

var icon = null;
var n;
for (n = 0; n < !icon && this.children.length; ++n) {
    if (this.children[n].tagName.toLowerCase() === "i") {
        icon = this.children[n];
    }
}

ES2015 + ( ), :

let icon = Array.from(this.children)
                .find(child => child.tagName.toLowerCase() === "i");

Answer 2

:

• add remove classList classList, (e.add().remove(), jQuery).
• , jQuery .
• querySelectorAll , ( parentElement, children() jQuery).

:

drawMode = true;
var elements = document.getElementsByClassName('myElement');
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', function() {
    var that = this;
    drawMode = !drawMode;
    var icons = this.querySelectorAll('i');
    for (var j = 0; j < icons.length; j++) {
      var icon = icons[j];
      if (icon.parentElement != that) {
        continue;
      }
      if (drawMode) {
        icon.classList.remove('a');
        icon.classList.add('b');
      } else {
        icon.classList.remove('b')
        icon.classList.add('a');
      }
    }
  });
}

i.a {
  background: red;
}
i.b {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myElement">
  <i>asd</i><br />
  <i>fgh</i><br />
  <span><i>This element will not change because he isn't a direct child</i></span><br />
</div>

Hide result

Answer 3

Generally document.querySelectorAllvery useful when converting jQuery to javascript in vanilla.

Returns a list of elements in the document (using preliminary traversal of the first order of document nodes) that match the specified group of selectors. The returned NodeList object .

// get a NodeList of elements which match CSS Selector '.myElement'
var elements = document.querySelectorAll('.myElement');

for (var i = 0; i < elements.length; i++ ) {
  // loop through every element with class 'myElement'
  var element = elements[i];

  element.addEventListener('click', function(event) {
    drawMode = !drawMode;

    var icon = element.querySelector('i');
    if (drawMode) {
      icon.classList.remove('a');
      icon.classList.add('b');
    } else {
      icon.classList.remove('b');
      icon.classList.add('a');
    }
  });
}

Note. I also used element.querySelectorto match the descendants of the currently processed element.