我不知道如何在 Javascript 工具包框架中处理 select HTML Class 属性

Posted 2023-02-22

【中文标题】我不知道如何在 Javascript 工具包框架中处理 select HTML Class 属性

【英文标题】：I don´t know how select HTML Class attribute handled in Javascript toolkit Framework

【发布时间】：2019-08-09 12:13:20

【问题描述】：

我在名为 Xel 工具包的 javascript 中使用 Electron 框架，并且我从 ma​​in.js 获得以下语法：

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

有一些 Xel 代码，其中 selected 是一个纯 html 类：

<x-tab selected class="menu">

你知道，像这样不输入 Class="name" 是一种不好的做法。但我不知道如何捕捉 selected 当前值。检查控制台：

Uncaught TypeError: Cannot read property 'className' of null

【参考方案1】：

在您的示例中，selected 在该上下文中不是“纯 HTML 类”。这是一个等同于 HTML5 中的selected="true" 的属性。如果您想使用querySelector 查找该元素并使用Javascript 删除selected 属性，您需要这样的东西：

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

【参考方案2】：

我不确定您究竟想在这里完成什么，但我认为这可能会有所帮助。 我向您展示的以下代码示例将根据 className 获取已检查的属性，我认为这是您最终要求的...

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); );