在JavaScript中，有多种方法可以定位和选择不同的页面元素。常用的方法：
1. getElementById
通过元素的id属性选择元素。
const element = document.getElementById('myId');
2. getElementsByClassName
通过元素的class属性选择元素，返回一个HTMLCollection。
const elements = document.getElementsByClassName('myClass');
3. getElementsByTagName
通过元素的标签名选择元素，返回一个HTMLCollection。
const elements = document.getElementsByTagName('div');
4. querySelector
通过CSS选择器选择第一个匹配的元素。
const element = document.querySelector('.myClass'); // 选择第一个具有myClass的元素
5. querySelectorAll
通过CSS选择器选择所有匹配的元素，返回一个NodeList。
const elements = document.querySelectorAll('div.myClass'); // 选择所有具有myClass的div元素
6. getAttribute
获取元素的属性值。
const element = document.getElementById('myId');
const value = element.getAttribute('data-custom'); // 获取data-custom属性的值
7. closest
查找最近的祖先元素，符合指定的选择器。
const element = document.querySelector('.child');
const parent = element.closest('.parent'); // 查找最近的.parent元素
8. children
获取元素的子元素集合。
const parent = document.getElementById('parentId');
const children = parent.children; // 获取parentId的所有子元素
9. firstChild 和 lastChild
获取元素的第一个和最后一个子元素。
const parent = document.getElementById('parentId');
const firstChild = parent.firstChild; // 获取第一个子元素
const lastChild = parent.lastChild; // 获取最后一个子元素
10. nextSibling 和 previousSibling
获取元素的下一个和上一个兄弟元素。
const element = document.getElementById('myId');
const next = element.nextSibling; // 获取下一个兄弟元素
const previous = element.previousSibling; // 获取上一个兄弟元素
11. querySelector 和 querySelectorAll 的组合
可以结合使用选择器来更精确地选择元素。
const element = document.querySelector('div > .myClass'); // 选择div下的第一个.myClass元素
const elements = document.querySelectorAll('ul li.active'); // 选择所有ul下的.active li元素
示例总结
<div id="parentId">
<div class="child myClass" data-custom="value1">Child 1</div>
<div class="child myClass" data-custom="value2">Child 2</div>
</div>
<script>
const elementById = document.getElementById('parentId');
const elementsByClass = document.getElementsByClassName('myClass');
const firstElement = document.querySelector('.myClass');
const allElements = document.querySelectorAll('.myClass');
const customValue = elementById.getAttribute('data-custom');
const closestParent = firstElement.closest('#parentId');
</script>
