在Web开发中，经常需要处理DOM元素的事件，并对这些元素进行查询和选择。
event.target、event.target.hasAttribute、event.target.closest 以及 querySelector 是几种非常有用的方法和属性
1. event.target
event.target 属性返回触发事件的元素。
例如，如果你有一个点击事件监听器绑定在一个按钮上，而用户点击的是这个按钮内部的某个子元素，event.target 将返回最初被点击的子元素。
示例代码：
<button id="myButton">点击我</button>
<script>
document.getElementById('myButton').addEventListener('click', function(event) {
console.log(event.target); // 显示被点击的元素
});
</script>
2. event.target.hasAttribute(name)
hasAttribute(name) 方法用于检查元素的属性是否存在。如果存在指定的属性，则返回 true，否则返回 false。
示例代码：
<button id="myButton" data-action="show">点击我</button>
<script>
document.getElementById('myButton').addEventListener('click', function(event) {
if (event.target.hasAttribute('data-action')) {
console.log('data-action 属性存在');
} else {
console.log('data-action 属性不存在');
}
});
</script>
3. event.target.closest(selector)
closest(selector) 方法返回最接近的祖先元素（包括当前元素）匹配给定选择器的节点。如果没有找到匹配的祖先元素，则返回 null。
示例代码：
<div id="container">
<button id="myButton">点击我</button>
</div>
<script>
document.getElementById('myButton').addEventListener('click', function(event) {
var parentDiv = event.target.closest('div'); // 查找最近的 div 祖先元素
if (parentDiv) {
console.log('找到最近的 div 元素');
} else {
console.log('没有找到 div 元素');
}
});
</script>
4. querySelector(selector) 和 querySelectorAll(selector)
querySelector(selector) 方法返回文档中匹配指定CSS选择器的第一个元素。如果没有找到匹配的元素，则返回 null。
可以检查检查是否包含元素
querySelectorAll(selector) 方法返回一个包含文档中匹配指定CSS选择器的所有元素的静态（非实时）NodeList。如果没有找到匹配的元素，则返回一个空的 NodeList。
示例代码：
<div id="container">
<button id="myButton">点击我</button>
<p>这是一个段落。</p>
</div>
<script>
// 使用 querySelector 获取第一个匹配的元素
var button = document.querySelector('#container > button'); // 获取 container 下的第一个 button 元素
console.log(button); // 显示按钮元素
// 使用 querySelectorAll 获取所有匹配的元素
var paragraphs = document.querySelectorAll('#container > p'); // 获取 container 下的所有 p 元素
console.log(paragraphs); // 显示所有段落元素组成的 NodeList
</script>
