在onclick属性中使用Javascript获取html中的子元素标签

Question

使用纯 javascript，我想<a>通过使用父级的onclick属性来引用元素中的第一个内部 html 元素。我尝试同时使用firstChild和firstChild.InnerHTML，但无法获得我的元素。

例如，以下 html 代码：

<a href="#" onclick="showImg(this.firstChild.innerHTML)">
  <img src="imgs/placeholder.png" alt="My Image" title="image-name" >
  <p>This is a paragraph</p>
  <div>This is a div</div>
</a>

我想将<img>元素作为参数传递到函数中showImg()，这样我就可以获取标题属性来输入要在模式窗口/弹出窗口中显示的图像路径。

顺便说一句，使用相同的功能将显示相同的模式窗口。

这有可能实现吗？（请注意，我想获取整个元素，而不仅仅是一个属性。）

这样做是因为没有权限添加 jquery 或其他类似的库。

更新：我正在寻找适用于 IE 7 以上版本的代码。

firstElementChild我的解决方案：在首先结合此答案children[0]中的详细信息之后，我最终结束了使用 getAttribute 方法。

我的最终解决方案如下所示：

<a href="javascript:void(0)" 
   onclick="showImg((this.firstElementChild || 
                     this.children[0]).getAttribute('title'))">
  <img src="imgs/placeholder.png" alt="My Image" title="image-name" >
  <p>This is a paragraph</p>
  <div>This is a div</div>
</a>

这是脚本：

  function getImg(img) {        
    var container = document.getElementById("some-id");
    var imgPath = 'imgs/' +img+ '.png';
    container.src = imgPath;
  }

感谢您的见解。

Answer 1

这应该可以解决问题：

function showImg(image) {
  console.log(image);
  }

<a href="#" onclick="showImg(this.children[0].getAttribute('title'))">
  <img src="imgs/placeholder.png" alt="My Image" title="image-name" >
  <p>This is a paragraph</p>
  <div>This is a div</div>
</a>

如果您想要整个元素，请将 onclick 替换为： onclick="showImg(this.children[0])"