textContent Vs. innerText跨瀏覽器解決方案

Question

我一直在與跨瀏覽器兼容性和報廢dom困難時期。 我已將數據分析跟蹤添加到電子商務交易中，以便獲取每次購買的產品和交易金額。

最初我使用document.querySelectorAll('#someId')[0].textContent來獲得產品名稱，並且除了Internet Explorer以外，對於每個瀏覽器都能正常工作。

花了一些時間才發現是造成問題的.textContent部件。

昨天我將.textContent更改爲.innerText。從內部分析看來，這個問題似乎已經解決了，但現在Firefox正在失敗。

我希望找到一個解決方案，而不寫if語句來檢查.textContent或.innerText的功能。

是否有跨瀏覽器解決方案.getTheText？

如果不是最好的解決方法是什麼？有一個簡單的解決方案嗎？ （我問給我的腳本編寫的知識和經驗，這是有限的）

**添加以下意見** 如果這是我的代碼塊：

// build products object 
var prods = []; 
var brand = document.querySelectorAll('.txtStayRoomLocation'); 
var name = document.querySelectorAll('.txtStayRoomDescription'); 
var price = document.querySelectorAll('.txtStayRoomSplashPriceAmount'); 

for(var i = 0; i < brand.length; i++) { 

//set granular vars 
var prd = {}; 

//add to prd object 
prd.brand = brand[i].innerText; 
prd.name = name[i].innerText; 
prd.price = price[i].innerText; 
prd.quantity = window.session_context_vars.BookingContext.Booking.ReservationLineItems[i].ReservationCharges.length/2;; 

//add to prods array 
prods.push(prd); 
} 

然後如果我理解從註釋語法並在註釋鏈接到的問題，這是我應該做的：

// build products object 
var prods = []; 
var brand = document.querySelectorAll('.txtStayRoomLocation'); 
var name = document.querySelectorAll('.txtStayRoomDescription'); 
var price = document.querySelectorAll('.txtStayRoomSplashPriceAmount'); 

for(var i = 0; i < brand.length; i++) { 

//set granular vars 
var prd = {}; 

//add to prd object 
prd.brand = brand[i].textContent || brand[i].innerText; 
prd.name = name[i].textContent || name[i].innerText; 
prd.price = price[i].textContent || price[i].innerText; 
prd.quantity = window.session_context_vars.BookingContext.Booking.ReservationLineItems[i].ReservationCharges.length/2;; 

//add to prods array 
prods.push(prd); 
} 

因此，使用或用雙條||分配的第一個非空值？

Answer 1

Re：你的編輯，不完全。訪問對象（例如DOM元素）的方法或屬性的方法是，如果您有名稱本身，則使用點符號;如果使用變量/表達式，則使用方括號（也適用於字符串，如obj["propName"]，等效到obj.propName）。您也可以測試該屬性對一個元素，並使用從那裏：

// build products object 
var prods = []; 
var brand = document.querySelectorAll('.txtStayRoomLocation'); 
var name = document.querySelectorAll('.txtStayRoomDescription'); 
var price = document.querySelectorAll('.txtStayRoomSplashPriceAmount'); 

for(var i = 0; i < brand.length; i++) { 

//set granular vars 
var prd = {}; 

//add to prd object 
var txtProp = ("innerText" in brand[i]) ? "innerText" : "textContent"; //added string quotes as per comments 
prd.brand = brand[i][txtProp]; 
prd.name = name[i][txtProp]; 
prd.price = price[i][txtProp]; 
prd.quantity = window.session_context_vars.BookingContext.Booking.ReservationLineItems[i].ReservationCharges.length/2;; 

//add to prods array 
prods.push(prd); 
} 

關於行：

var txtProp = (innerText in brand[i]) ? innerText : textContent; 

的in關鍵字檢查的對象來訪問屬性（語法：var property in object） 。至於問題的符號（我犯了一個錯誤較早，使用||，使用正確的事情是一個:），

var myVar = (prop in object) ? object[prop] : false; 

作爲一個表達式，它基本上評估?之前的東西，如果這是真的，返回:之前的表達式，否則返回。所以上面是一樣的/的縮寫：

if(prop in object){ 
    var myVar = object[prop]; 
} 
else{ 
    var myVar = false; 
} 

由於您只，並希望爲其分配一個或其他兩個屬性之間的檢查，最近的路確實是：

var txtProp = brand[i].innerText || brand[i].textContent; 

它基本上會測試第一個屬性，如果它是錯誤的或未定義的，它將使用第二個屬性。我（迂迴地）避免使用它的唯一原因是因爲即使存在a但或空字符串（""）或設置爲null，第一個測試a || b也會失敗。