js 属性选择器

// 示例代码：使用 JavaScript 的属性选择器

// 1. 通过 getElementsByTagName 获取所有具有特定标签名的元素
var elements = document.getElementsByTagName('input');
console.log(elements); // 返回 HTMLCollection，包含所有 <input> 元素

// 2. 通过 getElementsByClassName 获取所有具有特定类名的元素
var elements = document.getElementsByClassName('special-class');
console.log(elements); // 返回 HTMLCollection，包含所有具有 'special-class' 类的元素

// 3. 通过 querySelector 使用 CSS 选择器获取第一个匹配的元素
var element = document.querySelector('input[name="username"]');
console.log(element); // 返回第一个匹配的 <input name="username"> 元素

// 4. 通过 querySelectorAll 使用 CSS 选择器获取所有匹配的元素
var elements = document.querySelectorAll('input[type="text"]');
console.log(elements); // 返回 NodeList，包含所有 <input type="text"> 元素

// 解释：
// - getElementsByTagName 和 getElementsByClassName 返回的是 HTMLCollection，它是动态的，当 DOM 发生变化时会自动更新。
// - querySelector 和 querySelectorAll 返回的是静态的 NodeList 或单个元素，它们不会随 DOM 变化而自动更新。
// - querySelector 和 querySelectorAll 支持更复杂的 CSS 选择器，如属性选择器、伪类等。