将onmouseover函数()附加到页面中的所有引用和srcs以访问它们？

Question

我想通过简单地附加onmouseover =函数来访问href和src链接。以下是我的尝试代码：

HTML

<p><a href="https://dannychoo.com/en/instagram/p/BYnMQSpBcmY">Lass</a></p>
<a href="https://developer.mozilla.org">interest</a>
<p><a src="https://mirai-instagram-images.s3.ap-northeast-1.amazonaws.com/dannychoo/17897602822049811/21296657_120344735358000_817812329218441216_n.jpg">stuff</img></p>

Javascript：

document.querySelectorAll("a").onmouseover = function() {
let g, i; 
g = document.querySelectorAll("a").getAttribute("href")
for (i = 0; i < g.length; i++) {
location.assign(g[i]);
      }
 } 

谢谢你的帮助。

Answer 1

假设您想要获得这些属性，而不管标记类型如何，您可以使用querySelectorAll查询多个选择器。您还可以使用forEach循环查看结果。

您可以使用CSS通过属性以元素为目标，您可以阅读更多关于该这里的信息。

现代浏览器支持循环遍历querySelectorAll结果，但如果需要旧浏览器支持查看这篇文章以寻找替代方案。

​

var links = document.querySelectorAll("[src], [href]");
links.forEach(link => {
  link.addEventListener("mouseover", e => {
    const href = e.target.href;
    const src = e.target.getAttribute("src");
    if (src) console.log(src);
    if (href) console.log(href);
  });
});

<p><a href="https://dannychoo.com/en/instagram/p/BYnMQSpBcmY">Lass</a></p>
<a href="https://developer.mozilla.org">interest</a>
<p><img src="https://mirai-instagram-images.s3.ap-northeast-1.amazonaws.com/dannychoo/17897602822049811/21296657_120344735358000_817812329218441216_n.jpg">stuff</p>

​

小提琴

Answer 2

尝试下面的代码片段。document.querySelectorAll返回一个数组，因此您需要循环它来附加事件。

​

let elements = document.querySelectorAll("a")

elements.forEach(element => {
    element.addEventListener("mouseenter", function() {
        console.log(element.href);
        console.log(element.getAttribute('src'));
         } )
});

 <p><a href="https://dannychoo.com/en/instagram/p/BYnMQSpBcmY">Lass</a></p>
<a href="https://developer.mozilla.org">interest</a>
<p><a src="https://mirai-instagram-images.s3.ap-northeast-1.amazonaws.com/dannychoo/17897602822049811/21296657_120344735358000_817812329218441216_n.jpg">stuff</img></p>

​

let elements = document.querySelectorAll("a")

elements.forEach(element => {
  element.addEventListener("mouseenter", function() {
    console.log(element.href);
    console.log(element.getAttribute('src'));
  })
});