一、基本概念
JavaScript标签选择器可以通过标签名、id、class和属性等方式来选择和获取DOM元素。其中标签名选择器是最基本的选择器。
以标签名为选择条件，使用document.getElementsByTagName()方法即可获取相应的DOM元素。该方法返回的是一个HTMLCollection对象，可以通过下标来访问其中的元素。
var elements = document.getElementsByTagName("p");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "Hello, World!";
}
id选择器可以通过使用document.getElementById()方法获取元素。该方法返回的是一个DOM元素对象。
var element = document.getElementById("my-id");
element.innerHTML = "Hello, World!";
class选择器可以通过使用document.getElementsByClassName()方法获取元素。该方法返回的也是一个HTMLCollection对象，可以通过下标来访问其中的元素。
var elements = document.getElementsByClassName("my-class");
for (var i = 0; i < elements.length; i++) {
elements[i].style.color = "red";
}
属性选择器可以通过使用document.querySelectorAll()方法获取元素。该方法返回的是一个NodeList对象，可以通过下标来访问其中的元素。
var elements = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < elements.length; i++) {
elements[i].checked = true;
}
二、深入理解
除了使用基本的标签名、id、class和属性选择器，还可以使用伪类、伪元素、组合选择器、属性选择器和层级选择器等高级选择器进行元素的选择。
1. 伪类选择器
伪类选择器可以选择一些没有在DOM中显式定义的状态。比如:hover，可以选择当前鼠标悬浮在上面的元素。
a:hover {
color: red;
}
2. 伪元素选择器
伪元素选择器可以选择一些DOM中不存在的元素。比如::before和::after，可以为元素添加一些额外的内容。
p::before {
content: "前:";
}
p::after {
content: "后.";
}
3. 组合选择器
组合选择器可以根据元素在DOM树中的位置来进行选择。比如子元素选择器（>）可以选择某个元素的直接子元素，后代选择器（空格）可以选择某个元素的后代元素。
ul > li {
font-weight: bold;
}
div p {
color: blue;
}
4. 属性选择器
属性选择器可以选择带有指定属性值的元素。比如[name=’username’]可以选择name属性为username的元素。
input[type='text'] {
border: 1px solid gray;
}
5. 层级选择器
层级选择器可以根据元素在DOM树中的层级关系来进行选择。比如:first-child可以选择某个元素的第一个子元素。
ul li:first-child {
color: red;
}
三、技巧与注意事项
1. 尽可能使用ID选择器
ID选择器具有最高的优先级，因此可以避免选择器的冲突。同时，使用ID选择器可以提高选择器的速度。
2. 不要滥用通配符选择器
通配符选择器（*）可以选择页面上的所有元素，因此很容易导致选择器的失控。避免滥用通配符选择器，尽可能使用更具体的选择器。
3. 避免选择器的嵌套过深
选择器的嵌套过深会影响选择器的速度和可读性。因此，应该尽可能避免选择器的嵌套过深。
4. 属性选择器的注意事项
在使用属性选择器时，应该注意属性值的大小写问题。HTML中的属性值不区分大小写，而CSS中的属性选择器区分大小写。
/* 错误的写法 */
input[type='text'] {
border: 1px solid gray;
}
/* 正确的写法 */
input[type='text' i] {
border: 1px solid gray;
}
5. 使用自定义属性来进行选择
可以使用自定义属性来进行元素的选择。这种做法不太常见，但是在一些场景下很有用。
<div data-role="widget"></div>
div[data-role='widget'] {
border: 1px solid gray;
}
四、总结
JavaScript标签选择器是DOM操作中的重要部分，可以方便地获取和操作DOM元素。除了基本的标签名、id、class和属性选择器，还有一些高级选择器可以进行更加精细的选择。在使用选择器的时候，需要注意选择器的优先级、速度和可读性等问题。
