текстовое содержание против. Кроссбраузерное решение innerText

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

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

Потребовалось некоторое время, чтобы понять, что именно часть .textContent вызывает проблемы с ie.

Вчера поменял .textContent на .innerText. Глядя внутрь аналитики, кажется, что проблема была решена для ie, но теперь 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);
}

Таким образом, использование или с двойной чертой || присваивает первое ненулевое значение?


person Doug Fir    schedule 25.04.2015    source источник
comment
Обычно я просто пишу element.textContent || element.innerText.   -  person Josh Crozier    schedule 25.04.2015
comment
Есть ли причина, по которой вы не просто используете библиотеку-оболочку DOM, такую ​​​​как jQuery?   -  person Korvin Szanto    schedule 26.04.2015
comment
Тесно связано: Кросс-браузерный innerText для установки значений   -  person Bergi    schedule 26.04.2015
comment
@JoshCrozier спасибо за совет, я добавлю несколько строк к моему вопросу, основываясь на ваших отзывах. у корвина да есть - это потому что я новичок и не знаю что это такое   -  person Doug Fir    schedule 26.04.2015
comment
@Doug Firr elem.textContent || elem.innerText — это правильный путь, и именно так jQuery реализует свои текстовые функции lib, и да, на ваш последний вопрос, вы можете просто поставить ( ) вокруг вашего elem.textContent || elem.innerText должен быть (elem.textContent || elem.innerText)   -  person Amr Elgarhy    schedule 26.04.2015
comment
[ ] - квадратные скобки для свойства объекта - вместо ().   -  person Sidd    schedule 26.04.2015


Ответы (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.

person Sidd    schedule 25.04.2015
comment
Привет, Сидд, спасибо, что нашли время ответить. Там есть новый для меня синтаксис var txtProp = (innerText in brand[i]) ? внутренний текст || текстовое содержание;. Что именно это делает? Что там за вопросительный знак? - person Doug Fir; 26.04.2015
comment
Круто, рад, что помогло. Просто хотел добавить, что, поскольку вы явно используете здесь цикл, txtProp будет оцениваться (без необходимости) каждый раз, когда цикл запускается. Вы можете вынести его за пределы цикла, но обязательно протестируйте его на элементе, существующем в DOM (иначе скрипт выдаст ошибку). - person Sidd; 26.04.2015
comment
Круто, спасибо, что заметили это, отредактирую свой пост. (Очень глупо с моей стороны, очевидно, что все без строковых кавычек должно быть определенной переменной!) - person Sidd; 26.04.2015