How to improve my JS code? Avoid repeated element I'm trying to learning JS good practices. With jQuery, everything was easier and organized. With JS, I really don't know if I doing this right.

I must repeat the element I am manipulating all the time? For example:

elementHere.className = "";
elementHere.classList.add(test);
elementHere.addEventListener(etc, function() {
}, true);


Is it a a good code, for example? Is it DRY? I really need to repeat the element name all the time? How to improve?

I would like tips to improve and make it DRY! I did not find any tutorial on the internet.

I think it is also not good for maintenance.
This code is perfectly fine (aside from the fact that it's weird to clean up className and then add one item to classList—might as well set className directly).

DRY is about repetition of logic (which is dangerous because you may forget to change it in one place when you change it in the other place). Repetition of variable name is totally fine. 

In fact, sometimes some verbosity is preferred to excessive succinctness.

// Bad

sb.className = "";
sb.classList.add(test);
sb.dataset.kind = 'web';
sb.addEventListener('click', function() {
}, true);


// Good

searchWebButton.className = "";
searchWebButton.classList.add('search');
searchWebButton.dataset.kind = 'web';
searchWebButton.addEventListener('click', function() {
}, true);


You're not repeating yourself—these are several distinct actions, and they are obvious.
There is nothing to simplify here.

As noted by Greg, if you did this sequence of calls for several elements, you could have extracted them into a function:

// Hm-kay

searchWebButton.className = "";
searchWebButton.dataset.kind = 'web';
searchWebButton.classList.add('search');
searchWebButton.addEventListener('click', function() {
}, true);

searchHistoryButton.className = "";
searchHistoryButton.dataset.kind = 'history';
searchHistoryButton.classList.add('search');
searchHistoryButton.addEventListener('click', function() {
}, true);


// Good

function setupSearchButton(btn, kind) {
  btn.className = "";
  btn.classList.add('search');
  btn.dataset.kind = kind;
  btn.addEventListener('click', function() {
  }, true);
}

setupSearchButton(searchWebButton, 'web');
setupSearchButton(searchHistoryButton, 'history');


Note that btn by itself is short but not descriptive, and it would make a bad name in outer scope, but as a parameter to setupSearchButton it's obvious so we can keep it short.

It also might be a good idea to extract initialisation code if the initialization is long and you have several other elements to initialize (and maybe something else) in one function:

// Hm-kay

function initialize() {
  searchField.className = "";
  searchField.classList.add('search');
  searchField.addEventListener('change', function() {
    search();
  }, true);
  searchField.addEventListener('focus blur', function() {
    refreshSearchPlaceholder();
  }, true);

  searchWebButton.className = "";
  searchWebButton.dataset.kind = 'web';
  searchWebButton.classList.add('search');
  searchWebButton.addEventListener('click', function() {
  }, true);

  doSomethingElseForInitialization();
}


// Good

function initialize() {
  initializeSearchField(searchField);
  initializeSearchButton(searchWebButton);
  doSomethingElseForInitialization();
}

function initializeSearchField(field) {
  field.className = "";
  field.classList.add('search');
  field.addEventListener('change', function() {
    search();
  }, true);
  field.addEventListener('focus blur', function() {
    refreshSearchPlaceholder();
  }, true);
}

function initializeSearchButton(btn) {
  btn.className = "";
  btn.classList.add('button');
  btn.dataset.kind = 'web';
  btn.addEventListener('click', function (e) {
    e.preventDefault();
    search();
  }, true);
}


For some ideas about easy-to-maintain JS code, read Airbnb Javascript Guide (or any other popular guide, for that matter).