📌  相关文章
📜  HTML | DOM 选择多个属性(1)

📅  最后修改于: 2023-12-03 15:15:38.121000             🧑  作者: Mango

HTML | DOM 选择多个属性

在 HTML 和 DOM 中，我们经常需要选取多个具有相同属性的元素。可以将多个属性名放在一个选择器中，从而实现选择多个属性。

语法
[attribute1][attribute2][attribute3]...
示例
HTML 示例
<!DOCTYPE html>
<html>
    <head>
        <title>选择多个属性</title>
    </head>
    <body>
        <h1 class="title" id="heading">Hello World!</h1>
        <p class="text" id="para1">This is paragraph 1.</p>
        <p class="text" id="para2">This is paragraph 2.</p>
        <p class="text" id="para3" style="color:red;">This is paragraph 3.</p>
    </body>
</html>
JavaScript 示例
// 选取所有具有 class 属性和 id 属性的元素
var elements = document.querySelectorAll('[class][id]'); 

// 选取所有具有 class 属性和 style 属性的元素
var elements2 = document.querySelectorAll('[class][style]');

// 选取所有具有 class 属性和 id 属性值为 "heading" 的元素
var elements3 = document.querySelectorAll('[class][id="heading"]');

以上 JavaScript 示例分别选取了具有 class 属性和 id 属性、class 属性和 style 属性、class 属性和 id 属性值为 "heading" 的元素。

结论

选取多个属性的元素可以使用多个属性名作为选择器，中间用方括号隔开。在 JavaScript 中，可以使用 document.querySelectorAll 方法来选取多个属性的元素。

这样就可以更精确地选取需要的元素，使代码更加优雅和简单。