如何用JavaScript提取MDN事件参考页面的所有事件名？

嘿，作为JavaScript新手能想到用querySelectorAll来抓取页面元素已经很棒啦！你遇到的问题是因为当前选择器选中了表格里所有的<a>标签——包括事件名列和“Fired From”列里的链接，所以才会输出多余内容。

解决方案：精准定位事件名列的<a>标签 #

我们只需要修改选择器，让它只选中每行第一列里的<a>标签就行。MDN的这个表格结构里，事件名是放在每行的第一个<td>中的，所以可以用:first-child伪类来精准定位：

// 只选中tbody每行第一列的a标签
var eventLinks = document.querySelectorAll("tbody tr td:first-child a");

// 用forEach循环更简洁（现代JS写法）
eventLinks.forEach(function(link) {
    console.log(link.textContent); // 用textContent比innerHTML更安全，只会获取纯文本内容
});

如果还是想用你原来的while循环，也可以调整：

var eventLinks = document.querySelectorAll("tbody tr td:first-child a");
var i = 0;
while (i < eventLinks.length) {
    console.log(eventLinks[i].textContent);
    i++;
}

为什么这样改？ #

• 原来的tbody tr a会匹配表格行里所有的<a>元素，而我们只需要第一列的事件名链接。
• 用textContent代替innerHTML是更好的习惯：它只会获取元素的纯文本内容，避免了如果标签里有嵌套元素时可能输出的多余HTML代码。

这样运行代码后，console里就只会输出所有事件名啦！

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