在web開發中，圖片的展示是用戶體驗的重要因素之一。而javascript作為一種客戶端腳本語言，可以方便地操作html文檔中的元素。其中，img標簽是展示圖片的重要元素之一，本文將介紹如何使用javascript獲取img標簽的src屬性值。 獲取img標簽的src屬性值可以應用在很多場景中，例如：檢查圖片是否加載完成，獲取圖片的大小等等。在javascript中，獲取img標簽的src屬性值有三種方式，分別是： 1. 使用JavaScript DOM API JavaScript DOM API是JavaScript基于HTML DOM的一種API，通過其成員對象和方法訪問并操作html文檔中的元素。對于img標簽，可以通過document.getElementsByTagName(‘img’)獲取到一個節點列表。代碼示例如下：

//獲取頁面中所有的img標簽并輸出
let imgList = document.getElementsByTagName('img');
for(let i=0;i
console.log(imgList[i].src);
}

2. 使用jQuery庫 jQuery是一個流行的JavaScript庫，用于處理各種任務，包括DOM操作、事件處理程序綁定、Ajax等。通過jQuery的選擇器就可以輕松地獲取img標簽節點，然后通過$.each方法遍歷節點列表。代碼示例如下：

//使用jQuery獲取img標簽的src屬性值并輸出
$('img').each(function(){
console.log($(this).attr('src'));
});

3. 使用正則表達式 如果頁面中只存在一個img標簽，可以使用正則表達式的方式快速獲取其中的src屬性值。代碼如下：

//使用正則表達式獲取img標簽的src屬性值
let reg = /<img.*?src="(.*?)"/;
let result = reg.exec(document.body.innerHTML);
console.log(result[1]);

在使用正則表達式獲取img標簽的src屬性值時，需要注意html代碼的格式，否則正則表達式可能會出錯，導致不能正確獲取到值。 總結：使用javascript獲取img標簽的src屬性值有三種方式，其中使用JavaScript DOM API和jQuery庫是最常見的方式，適用于需要獲取多個img標簽屬性值的情況。如果只需要獲取一個img標簽的屬性值，可以使用正則表達式的方式來快速獲取。掌握這些方法可以方便地處理頁面中的圖片，為用戶提供更好的體驗。