Question

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

例如，以下html代码：

firstChild.InnerHTML

我想将<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>中，所以我可以获取title属性以输入图像路径以显示在模态窗口/弹出窗口中。

使用相同的功能BTW将显示相同的模态窗口。

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

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

更新：我正在寻找适用于从版本7升级的IE的代码。

我的解决方案：在根据this answer的详细信息将showImg()和firstElementChild组合后，我最终使用了getAttribute方法。

我的最终解决方案如下：

children[0]

这是剧本：

<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>

感谢您的见解。

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])"

Answer 2

您应该使用getAttribute功能

<a href="#" onclick="showImg(this.firstElementChild.getAttribute('title')">

Answer 3

使用this.firstElementChild.outerHTML

<a href="#" onclick="alert(this.firstElementChild.outerHTML)">
  <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属性中的Javascript在html中获取子元素标记

3 个答案: