How to use the dojo/dom.byId function in dojo

if (sourceControl !== this.subgraphsGrid && this.subgraphsGrid.store) {
            this.subgraphsGrid.setSelection(selectedGlobalIDs);
        }
        if (sourceControl !== this.verticesGrid && this.verticesGrid.store) {
            this.verticesGrid.setSelection(selectedGlobalIDs);
        }
        if (sourceControl !== this.edgesGrid && this.edgesGrid.store) {
            this.edgesGrid.setSelection(selectedGlobalIDs);
        }

        //  Refresh Graph Controls  ---
        if (sourceControl !== this.main) {
            this.setMainRootItems(selectedGlobalIDs);
        }

        var propertiesDom = dom.byId(this.id + "Properties");
        propertiesDom.innerHTML = "";
        for (var i = 0; i < selectedGlobalIDs.length; ++i) {
            this.global.displayProperties(this.wu, selectedGlobalIDs[i], propertiesDom);
        }
        var context = this;
        if (selectedGlobalIDs.length) {
            var edges = arrayUtil.filter(selectedGlobalIDs, function (id) {
                return id && id.indexOf && id.indexOf("_") >= 0;
            });
            if (edges.length === 1) {
                WsWorkunits.WUCDebug(context.params.Wuid, "").then(function (response) {
                    if (lang.exists("WUDebugResponse.Result", response)) {
                        context.global.displayTrace(response.WUDebugResponse.Result, propertiesDom);
                    }
                });
            }

ui: { components: ["compass", "zoom"] }
        });
        this.mapView.ui.move("zoom", "bottom-right");
        this.mapView.ui.move("compass", "bottom-right");

        this.environmentLayer = new AnimatedEnvironmentLayer({
            id: "ael-layer",
            url: this._dataOptions[0].url,
            displayOptions: this._dataOptions[0].displayOptions
        });

        this.map.add(this.environmentLayer);

        //setup some event handlers to react to change of options       
        on(dom.byId("data-select"), "change", (evt) => this._dataChange(evt.target.value));
        on(dom.byId("basemap-select"), "change", (evt) => this._basemapChange(evt.target.value));

        // subscribe to the point-report event and display the values in UI.
        let windLayerAny: any = this.environmentLayer;
        windLayerAny.on("point-report", (rpt: PointReport) => {
            dom.byId("direction").innerHTML = rpt.degree ? rpt.degree.toFixed(1) : "n/a";
            dom.byId("speed").innerHTML = rpt.velocity ? rpt.velocity.toFixed(2) : "n/a";
        });
    }

// change up some display options to make it look different for global wind 2.
        let globalWind2: DataOption = {
            url: "./data/global-wind2.json",
            id: "Global wind 2",
            displayOptions: {
                maxVelocity: 15,
                particleMultiplier: 3
            }
        };

        this._dataOptions.push(globalWind);
        this._dataOptions.push(ausSwell);
        this._dataOptions.push(globalWind2);

        let select = dom.byId("data-select");
        this._dataOptions.forEach((opt) => {
            let element = document.createElement("option");
            element.id = opt.id;
            element.innerHTML = opt.id;
            select.appendChild(element);
        });
    }

this.subgraphsGrid.setSelection(selectedGlobalIDs);
    }
    if (sourceControl !== this.verticesGrid && this.verticesGrid.store) {
        this.verticesGrid.setSelection(selectedGlobalIDs);
    }
    if (sourceControl !== this.edgesGrid && this.edgesGrid.store) {
        this.edgesGrid.setSelection(selectedGlobalIDs);
    }

    //  Refresh Graph Controls  ---
    if (sourceControl !== this._graph) {
        const items = this._gc.items(selectedGlobalIDs);
        this._graph.selection(items);
    }

    var propertiesDom = dom.byId(this.id + "Properties");
    propertiesDom.innerHTML = "";
    let html = "";
    for (const id of selectedGlobalIDs) {
        html += this._gc.calcGraphTooltip(id, this.findText);
    }
    propertiesDom.innerHTML = html;
    var context = this;
    if (selectedGlobalIDs.length) {
        var edges = arrayUtil.filter(selectedGlobalIDs, function (id) {
            return id && id.indexOf && id.indexOf("_") >= 0;
        });
        if (edges.length === 1) {
            WsWorkunits.WUCDebug(context.params.Wuid, "").then(function (response) {
                if (lang.exists("WUDebugResponse.Result", response)) {
                    // context.global.displayTrace(response.WUDebugResponse.Result, propertiesDom);
                }

storyAffectedArea = new Graphic(evt.geometry, symbol, {});
    storiesLayer.clear();
    storiesLayer.add(storyAffectedArea);

    domClass.remove('story-affected-areas-label', 'field-required');
  }
}

map.on('load', function () {
  toolbar = new Draw(map);
  toolbar.on('draw-end', addToMap);
  toolbar.activate(Draw.POINT);
});

on(dom.byId('submit-button'), 'click', function () {

  storyTitle = dom.byId('story-title-input').value;
  storyLocation = dom.byId('story-location-input').value;
  storyDate = dom.byId('story-date-input').value || '';
  storyDetails = dom.byId('story-details-textarea').value;
  storyVideo = dom.byId('story-video-input').value;
  //storyMedia = dom.byId('story-media-input').value;
  storyName = dom.byId('story-title-input').value;
  storyEmail = dom.byId('story-email-input').value;

  storyTitleValid = storyTitle !== '';
  storyAffectedAreaValid = storyAffectedArea !== undefined;
  storyEmailValid = storyEmail !== '' && validateWeb.isEmailAddress(storyEmail) === true;

  if (storyTitleValid) {
    domClass.remove('story-title-label', 'field-required');

}

  if (storyAffectedAreaValid) {
    domClass.remove('story-affected-areas-label', 'field-required');
  } else {
    domClass.add('story-affected-areas-label', 'field-required');
  }

  if (storyEmailValid) {
    domClass.remove('story-email-label', 'field-required');
  } else {
    domClass.add('story-email-label', 'field-required');
  }

  if (storyTitleValid === false) {
    focusUtil.focus(dom.byId('story-title-input'));
  } else if (storyAffectedAreaValid === false) {
    dom.byId('story-affected-areas-label').scrollIntoView();
  } else if (storyEmailValid === false) {
    focusUtil.focus(dom.byId('story-email-input'));
  }

  if (storyTitleValid &&
    storyEmailValid &&
    storyAffectedAreaValid) {

    storyAffectedArea.attributes.Title = storyTitle;
    storyAffectedArea.attributes.Location = storyLocation;
    storyAffectedArea.attributes.Date = storyDate;
    storyAffectedArea.attributes.Details = storyDetails;
    storyAffectedArea.attributes.Video = storyVideo;
    storyAffectedArea.attributes.Name = storyName;

_onAbout() {
        html.set(dom.byId(this.id + "InfoDialogContent"), "<div style="width: 320px; height: 120px; text-align: center;"><p>" + this.i18n.Version + ":  " + this.main.getVersion() + "</p><p>" + this.main.getResourceLinks() + "</p>");
        this.infoDialog.set("title", this.i18n.AboutHPCCSystemsGraphControl);
        this.infoDialog.show();
    }
</div>

on(dom.byId('submit-button'), 'click', function () {

  storyTitle = dom.byId('story-title-input').value;
  storyLocation = dom.byId('story-location-input').value;
  storyDate = dom.byId('story-date-input').value || '';
  storyDetails = dom.byId('story-details-textarea').value;
  storyVideo = dom.byId('story-video-input').value;
  //storyMedia = dom.byId('story-media-input').value;
  storyName = dom.byId('story-title-input').value;
  storyEmail = dom.byId('story-email-input').value;

  storyTitleValid = storyTitle !== '';
  storyAffectedAreaValid = storyAffectedArea !== undefined;
  storyEmailValid = storyEmail !== '' && validateWeb.isEmailAddress(storyEmail) === true;

  if (storyTitleValid) {
    domClass.remove('story-title-label', 'field-required');
  } else {
    domClass.add('story-title-label', 'field-required');
  }

  if (storyAffectedAreaValid) {
    domClass.remove('story-affected-areas-label', 'field-required');
  } else {
    domClass.add('story-affected-areas-label', 'field-required');
  }

initGraph() {
        this.graphStatus = dom.byId(this.id + "GraphStatus");
        this._graph = new GraphWidget()
            .target(this.id + "MainGraphWidget")
            .layout("Hierarchy")
            .applyScaleOnLayout(true)
            .showToolbar(false)
            .allowDragging(false)
            .on("progress", what => {
                switch (what) {
                    case "start":
                    case "layout-start":
                    case "layout-tick":
                        this.graphStatus.innerText = this.i18n.PerformingLayout;
                        break;
                    case "layout-end":
                    case "end":
                    default: