Manipulation of DOM

1

I’m a bit out of habit with explicit manipulation of the DOM due to framework like Angular or Vue.

Frequent records of the form:

 document.getElementById('...').classList.add("...");

Depress me, how do you solve this?

I tried to create a separate structure for the reproduction of the behavior to which he quickly got used:

import {Controller} from "stimulus"

import Domulus from ‘dumulus’

export default class extends Controller {

static targets = ["source"];

connect() {
    Domulus.connect(this);
}

disconnect() {
    Domulus.disconnect(this);
}

Then in my controller I will indicate:

<div data-controller="example">
 <input data-target="example.source" type="text" value="1">
  <div data-show="example.source != 1">
      <h1>Show text only value 1 or true </h1>
  </div>
</div>

How much is my expectation far?
Do we really need to write such things explicitly, even if we need to hide a button or display a message about the validation error?