js 获取被点击元素的名称
时间: 2023-11-21 13:05:13 浏览: 34
你可以使用JavaScript的event对象中的target属性来获取被点击的元素,然后通过该元素的name属性来获取该元素的名称。以下是示例代码:
```javascript
document.addEventListener('click', function(event) {
if (event.target.tagName === 'BUTTON') {
console.log(event.target.name);
}
});
```
在这个示例中,我们添加了一个事件监听器来监听整个文档的点击事件。当用户点击一个按钮元素时,我们检查被点击的元素是否是一个button标签,如果是,则打印出该元素的名称。你可以将button替换为任何你想要监视被点击元素的标签名。
相关问题
js 获取指定兄弟元素
如果要获取指定的某个兄弟元素,可以借助 `previousSibling` 和 `nextSibling` 属性以及 `nodeName` 属性来筛选出需要的元素。
例如,如果要获取元素 `element` 的前一个同级元素中的第一个 `div` 元素,可以使用如下代码:
```javascript
var sibling = element.previousSibling;
while (sibling) {
if (sibling.nodeType === 1 && sibling.nodeName.toLowerCase() === 'div') {
// 找到了符合条件的元素,进行处理
console.log(sibling);
break;
}
sibling = sibling.previousSibling;
}
```
代码中使用了一个 `while` 循环来遍历 `element` 的前一个同级元素列表,通过判断节点类型和节点名称来筛选出需要的元素。如果找到了符合条件的元素,则进行相应的处理,否则继续往前遍历。如果要获取后一个同级元素中的指定元素,可以将 `previousSibling` 替换为 `nextSibling`,并且改变判断条件即可。
js获取 class带空格元素
在JavaScript中,如果要获取带有空格的class元素,我们可以使用querySelectorAll方法,并结合CSS的class选择器来实现。
首先,需要了解CSS的class选择器可以通过"."来选择具有某个class的元素。但是,如果class名称中含有空格,则不能直接使用"."来选择。这是因为空格通常用于表示元素的子孙关系,而不是class本身。
要解决这个问题,可以使用querySelectorAll方法来选择带有空格的class元素。该方法接受一个参数,该参数是一个CSS选择器字符串。我们可以使用特殊的属性选择器[class*=" "]来选择带有空格的class元素。
下面是一个示例代码:
```html
<div class="my-class">这是一个带空格的class元素</div>
<div class="my-class another-class">这是另一个带空格的class元素</div>
<script>
// 通过querySelectorAll方法选择带有空格的class元素
var elements = document.querySelectorAll('[class*=" "]');
// 遍历获取到的元素列表
for (var i = 0; i < elements.length; i++) {
console.log(elements[i].innerHTML);
}
</script>
```
在上面的示例中,我们使用了属性选择器[class*=" "]来选取所有带有空格的class元素。然后,我们遍历获取到的元素列表,并输出每个元素的innerHTML内容。
需要注意的是,使用属性选择器[class*=" "]会匹配包含空格的class名称,并且不区分空格出现的位置。因此,如果有多个class名称,只要其中一个包含空格,就可以被选中。
总结:通过使用属性选择器和querySelectorAll方法,我们可以方便地获取带有空格的class元素。