在HTML訪問nextElementSibling

Question

我在平原JS寫入一個燈箱腳本：

HTML：

<img onclick="pLightbox(this)" src="MyPhoto.jpg" /> 

JS：

function pLightbox(objPhoto){ 
    var path=objPhoto.src; 
    HTMLtext = '<img src="' + path + '">'; 
    containerDiv.innerHTML = HTMLtext; 
} 

（代碼縮寫爲清楚起見）

這工作正常。現在我試圖訪問DIV中的下一個兄弟。我曾嘗試：

HTMLtext += '<img src="images/Next.png" onclick="pLightbox(' + objPhoto.nextElementSibling + ')">'; 

這不工作 - 試了不同的變化（nextElementSibling.src等），但沒有任何工程。

如何從HTML字符串訪問下一個兄弟？

Answer 1

Eh，no。不要連接DOM元素和字符串。不要使用事件處理程序。特別是，不要使用事件處理程序內容屬性。

這是正確的方法。 HTML中沒有事件。沒有討厭的字符串操作。沒有HTML注入漏洞。

document.querySelector('img').addEventListener('click', pLightbox); 
 
function pLightbox() { 
 
    containerDiv.innerHTML = ""; 
 
    var img = document.createElement('img'); 
 
    img.src = this.src; 
 
    img.addEventListener('click', pLightbox.bind(this.nextElementSibling)); 
 
    containerDiv.appendChild(img); 
 
}

<img src="//stackoverflow.com/favicon.ico" /> 
 
<img src="//scifi.stackexchange.com/favicon.ico" /> 
 
<img src="//superuser.com/favicon.ico" /> 
 
<img src="//crossvalidated.com/favicon.ico" /> 
 
<div id="containerDiv">Click the first image. Then keep clicking the new image</div>