JavaScript中DOM元素的跨瀏覽器導航

我的一位隊友寫了一些關於短時間內的代碼，該代碼瀏覽了HTML頁面中的DOM元素，以便根據已有數據預先填充模塊中的某些字段對象（模式允許用戶編輯該數據）。這些項目通常從數據庫表中生成。JavaScript中DOM元素的跨瀏覽器導航

function showModal(editImage) { 
    var modal = document.getElementById('myModal'); 
    var span = document.getElementsByClassName("close")[0]; 
    var nameAndTitle = editImage.srcElement.parentElement.innerHTML; 
    var parent = editImage.srcElement.parentElement.parentElement; 
    etc....

問題是，他們只測試了它在Chrome中的工作。看起來，代碼從未在Firefox中工作過。當我嘗試在Firefox中打開模態之一，我得到的控制檯輸出「類型錯誤：editImage.srcElement是未定義」

我的問題是，有沒有更「正確」的方式來訪問這些數據，會爲工作任何瀏覽器，還是我需要檢查我所在的瀏覽器，並根據使用的瀏覽器以不同的方式訪問這些信息？

來源

2016-12-06 icaughtfireonce

看看[Document.querySelector（https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector）（這也適用於HTML元素）。 – gyre

您的直接答案是：將srcElement更改爲target。 Mozilla開發者網絡是一個很好的（很多）資源之一，用於檢查標準符合性。 A visit to their site對於srcElement表示它是非標準的，並以正確的方式提出建議（target）。

不幸的是，即使是標準的API也不一定適用於所有瀏覽器。通常，一個標準的部分被實現了piecemail。使用權威來源進行檢查對於瞭解哪些地方支持至關重要。

其他資源：

的World Wide Web Consortium（W3C）對HTML，CSS，XML和許多其他
爲JavaScript

European Computer Manufacturer's Association

CanIUse.com適合快速兼容性合規檢查

至於你明確的問題：

「我的問題是，有沒有更‘正確’的方式來訪問這些數據，會爲所有瀏覽器中工作，或者我需要檢查我是什麼瀏覽器，並根據瀏覽器訪問一個不同的方式信息正在使用？」

使用標準和檢查支持（通過我上面提供的資源）必須在跨瀏覽器代碼的最好機會。

不寫檢查瀏覽器類型和版本，看看你的代碼將運行（瀏覽器檢測）的代碼，因爲：

有太多的瀏覽器和太多的版本 - 這很爛！
瀏覽器可以和會騙你對他們是什麼！

使用「功能檢測」有疑問時。特徵檢測是評估特徵是否存在的代碼，如果存在則使用它。如果它沒有提供回退。下面是IE8（或更低）的瀏覽器很常見的一個還不支持W3C標準的事件處理：

// Here we are attempting to obtain the value of the 
// addEventListener property of the window object. 
// IE 8 doesn't implement this property so "undefined" 
// will be returned. But, because we are attempting to 
// use the value as the condition of an if/then construct 
// "undefined" will be converted to a boolean. "undefined" 
// is a "falsey" value, so it will convert to false. 
// This means that if the else portion of our construct 
// is reached, we have a browser that doesn't support 
// addEventListener 
if(window.addEventListener){ 
    // W3C standards are supported - do things the standard way 
    obj.addEventListener("click", someFunction, capture); 
} else { 
    // Must be IE 8 or less - do things the IE way 
    obj.attachEvent("onclick", someFunction); 
}

這只是一個方式來使用功能檢測，但它通常取決於一個值轉換成一個布爾值。查看更多關於它here。

來源

2016-12-06 21:57:43

該函數showModal可能是一個事件偵聽器，所以參數editImage實際上是一個Event對象。

因此，報告事件來源的實際屬性（也是Firefox支持的唯一屬性）是目標，而srcElement是由Microsoft和基於Webkit/Blink的瀏覽器創建的遺留屬性，它一直支持它兼容性。但不是Firefox。

簡而言之：使用目標或者，如果您需要支持舊版本的Internet Explorer，請嘗試使用(editImage.target || editImage.srcElement)。

來源

2016-12-06 21:59:35 MaxArt

srcElement來自IE。標準房產是target。

你應該這樣做：

var target = editImage.srcElement || editImage.target;

來源

2016-12-06 22:00:19 mattias

除非你必須支持IE 8或更低版本，否則只需使用'target'即可。 –

JavaScript中DOM元素的跨瀏覽器導航

回答

相關問題