如何获得img id

Question

我有这个简单的代码。但它不起作用。如何创建工作代码？请帮忙

<form action="">
<img id="3323" src="http://site-sample.com/pic.jpg"></img>
<input type="button" value="GET ID" onClick="GetID(this.form)">
</form>

<scirpt>
function GetID(f){
img_id = f.img.attr('id');
alert(img_id);
};
</script>

Answer 1

使用getElementsByTagName()获取具有给定标记名称的元素，然后使用Element.getAttribute()返回元素上指定属性的值。

f.getElementsByTagName('img')[0].getAttribute('id')`

  function GetID(f) {
    img_id = f.getElementsByTagName('img')[0].getAttribute('id');
    alert(img_id);
  };

<form action="">
  <img id="3323" src="http://sait.ru/pic.jpg"></img>
  <input type="button" value="GET ID" onClick="GetID(this.form)" />
</form>

Answer 2

<form action="">
  <img id="3323" src="http://site-sample.com/pic.jpg" />
  <input type="button" value="GET ID" />
</form>

<script>

  function GetID(f) {
    img_id = f.querySelector('img').getAttribute('id');
    alert(img_id);
  } 
  var button =document.querySelector("form input[type=button]");

  button.addEventListener("click",function(){
     GetID(this.form)
  },false);

</script>