我不知道如何在 Javascript 工具包框架中处理选择 HTML 类属性

Question

I am using the Electron Framework in Javascript called Xel toolkit, and I have the following syntax from main.js :

document.querySelector("menu.selected").className.remove('selected')

Having some Xel code where selected is a pure HTML Class:

<x-tab selected class="menu">

You know, it is a bad practice something just like this, without type a Class="name" . But I don't know how I can catch the selected current value. Checking Console:

Uncaught TypeError: Cannot read property 'className' of null

Answer 1

In your example selected in that context is not a "pure HTML Class". That is an attribute equivalent to selected="true" in HTML5. If you want to use querySelector to find that element and remove the selected attribute with Javascript, you'll need something like this:

document.querySelector("menu[selected]").selected = false;

Answer 2

I'm not sure what exactly you are trying to accomplish here, but I think this may be of some help. the following code sample that I am showing you will grab the attribute of checked based on className which I think is what you are ultimately asking for...

ClickToSeeJsBin

https://jsbin.com/kahona/edit?html,output

    function validate() {
    var CurrentSelected = [];
    //Doing the same thing for checkBox selection
    var GetAllCheckBoxNodes = document.getElementsByClassName("someCheckBox");
    var InputNodesSize = GetAllCheckBoxNodes.length;
    for (var i = 0; i < InputNodesSize; i++) {
        var CurrentCheckBox = GetAllCheckBoxNodes[i];
        if (CurrentCheckBox.checked) {
            CurrentSelected.push(CurrentCheckBox.value);
        }
    }
    //Doing the same thing for radio selection
    var GetAllRadioNodes = document.getElementsByClassName("someRadio");
    var GetAllRadioNodesLength = GetAllRadioNodes.length;
    for (var i = 0; i < GetAllRadioNodesLength; i++) {
        var CurrentRadioNode = GetAllRadioNodes[i];
        if (CurrentRadioNode.checked) {
            CurrentSelected.push(CurrentRadioNode.value);
        }
    }
    //Displaying what is Selected...
    CurrentSelected.forEach(item => { console.log(item); });
}