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

Using pure javascript, I want to reference the first inner html element within an <a> element, by using the parent's onclick attribute. I tried to use both firstChild and firstChild.InnerHTML, but I could not get my element.

使用纯javascript,我想通过使用父的onclick属性引用元素中的第一个内部html元素。我试图使用firstChild和firstChild.InnerHTML,但我无法得到我的元素。

For example, the following html code:

例如,以下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>

I want to get the <img> element as a parameter into the function showImg(), so I can obtain the title attribute to feed into an image path to be displayed in a modal window/popup.

我想将使用onclick属性中的Javascript在html中获取子元素标记元素作为参数添加到函数showImg()中,因此我可以获取title属性以提供到图像路径中以在模态窗口/弹出窗口中显示。

The same modal window would be displayed using the same function, BTW.

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

Is this possible to achieve? (Please note that I want to grab the entire element, not just an attribute.)

这有可能实现吗? (请注意,我想获取整个元素,而不仅仅是属性。)

Doing this because there is no permission to add jquery or other similar libraries.

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

UPDATE: I am looking for code that works on IE from version 7 upward.

更新:我正在寻找适用于从版本7向上的IE的代码。

MY SOLUTION: I finally ended using the getAttribute method, after combining both first firstElementChild and children[0] as per details from this answer.

我的解决方案:根据此答案的详细信息,在将第一个firstElementChild和children [0]组合后,我最终使用getAttribute方法结束了。

My final solution looks like this:

我的最终解决方案如下:

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

And this is the script:

这是脚本:

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

Thanks for the insight.

感谢您的见解。

3 个解决方案

#1

This should do the trick:

这应该是诀窍:

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>

If you want the whole element, replace the onclick with: onclick="showImg(this.children[0])"

如果你想要整个元素,用以下命令替换onclick:onclick =“showImg(this.children [0])”

#2

You should use the getAttribute function

您应该使用getAttribute函数

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

#3

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

#1