javascript - textContent Vs. innerText Cross Browser solution -

i've been having hard time cross browser compatibility , scrapping dom. i've added data analytics tracking ecommerce transactions in order grab product , transaction amount each purchase.

initially using document.queryselectorall('#someid')[0].textcontent product name , working fine every browser except internet explorer.

it took time figure out .textcontent part causing ie problems.

yesterday changed .textcontent .innertext. looking inside analytics seems issue has been resolved ie firefox failing.

i hoping find solution without writing if statement check functionality of .textcontent or .innertext.

is there cross browser solution .getthetext?

if not best way around this? there simple solution? (i ask given knowledge , experience scripting, limited)

** added following comments ** if code block:

// build products object var prods = []; var brand = document.queryselectorall('.txtstayroomlocation'); var name = document.queryselectorall('.txtstayroomdescription'); var price = document.queryselectorall('.txtstayroomsplashpriceamount');  for(var = 0; < brand.length; i++) {  //set granular vars var prd = {};  //add 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 prods array prods.push(prd); } 

then if understand syntax comments , question linked in comment, should do:

// build products object var prods = []; var brand = document.queryselectorall('.txtstayroomlocation'); var name = document.queryselectorall('.txtstayroomdescription'); var price = document.queryselectorall('.txtstayroomsplashpriceamount');  for(var = 0; < brand.length; i++) {  //set granular vars var prd = {};  //add 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 prods array prods.push(prd); } 

so using or double bar || assigns first non null value?

re: edit, not quite. way access methods or properties on object (eg dom element) use dot notation if have name itself, or square brackets in case of variables/expressions (also works strings, in obj["propname"], equivalent obj.propname). can test property against 1 element , use there on:

// build products object var prods = []; var brand = document.queryselectorall('.txtstayroomlocation'); var name = document.queryselectorall('.txtstayroomdescription'); var price = document.queryselectorall('.txtstayroomsplashpriceamount');  for(var = 0; < brand.length; i++) {  //set granular vars var prd = {};  //add prd object var txtprop = ("innertext" in brand[i]) ? "innertext" : "textcontent"; //added string quotes 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 prods array prods.push(prd); } 

regarding line:

var txtprop = (innertext in brand[i]) ? innertext : textcontent; 

the in keyword checks object access property (syntax: var property in object). question notation (i made error earlier, using ||, correct thing use :),

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

as expression, evaluates stuff before ?, , if it's true, returns expression before :, else 1 after. above same / shorthand for:

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

since checking between 2 properties , wanting assign 1 or other, shortest way indeed be:

var txtprop = brand[i].innertext || brand[i].textcontent; 

it test first property, , if false or undefined, use second one. reason (pedantically) avoid using because first test of || b fail if a existed had value of 0, or empty string (""), or set null.