根据类和属性值选择元素_根据css属性选择元素_尝试根据元素值选择节点 - 腾讯云开发者社区

根据类和属性值选择元素

基础概念

在前端开发中，根据类（class）和属性值（attribute value）选择元素是一种常见的DOM操作。通过这些选择器，可以精确地定位到页面上的特定元素，从而进行进一步的操作，如样式设置、事件绑定等。

类型

类选择器：使用 . 符号后跟类名来选择具有该类的所有元素。例如，.myClass 会选择所有具有 myClass 类的元素。
属性选择器：使用 [attribute=value] 语法来选择具有特定属性值的元素。例如，[type="text"] 会选择所有 type 属性值为 text 的元素。

应用场景

样式设置：根据类和属性值选择元素，然后应用特定的CSS样式。
事件绑定：选择特定元素并为其绑定事件处理程序，如点击事件、鼠标悬停事件等。
动态操作：在JavaScript中动态地选择和操作页面元素，如添加、删除或修改元素。

示例代码

以下是一个使用JavaScript根据类和属性值选择元素的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="input1">
        <input type="text" id="input2">
    </div>
    <button onclick="highlightInputs()">Highlight Inputs</button>

    <script>
        function highlightInputs() {
            // 根据类选择元素
            const container = document.querySelector('.container');
            // 根据属性值选择元素
            const inputs = container.querySelectorAll('input[type="text"]');
            inputs.forEach(input => {
                input.classList.add('highlight');
            });
        }
    </script>
</body>
</html>