document.querySelector()能否按属性选元素？属性为何加方括号？

当然可以！document.querySelector()和document.querySelectorAll()完全支持使用属性选择器作为参数来定位DOM元素，你给出的代码就是一个标准且常用的示例。

之所以要用方括号[]包裹属性名，是因为这是CSS选择器的标准语法规则——属性选择器就是通过方括号来声明的，用来匹配DOM中带有指定属性的元素，无论该属性的具体值是什么。

比如你代码里的[data-tab-value]，会匹配所有带有data-tab-value属性的元素，示例中的<span data-tab-value="#tab_1">Tab-1</span>就会被这个选择器选中。

除了这种匹配“存在该属性”的写法，属性选择器还有几种常见变体：

• 精确匹配属性值：[data-tab-value="#tab_1"]，只会选中属性值恰好是#tab_1的元素
• 包含指定字符串：[data-tab-value*="tab"]，选中属性值里包含tab的元素
• 以指定字符串开头：[data-tab-value^="#tab"]，选中属性值以#tab开头的元素

内容的提问来源于stack exchange，提问作者kirilinko