textContent Vs. innerText Cross Browser solution

Question

У меня было трудное время с кросс-браузерной совместимостью и сменой dom. Я добавил отслеживание аналитики данных в транзакции электронной торговли, чтобы захватить продукт и сумму транзакции для каждой покупки.

Первоначально я использовал document.querySelectorAll('#someId')[0].textContent, чтобы получить название продукта, и это работает отлично для каждого браузера, кроме интернет-исследователя.

Понадобилось некоторое время, чтобы выяснить, что это была часть .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 || b потерпит неудачу, даже если существует a, но имеет значение 0 или пустую строку ("") или было установлено значение null.