textContent 对比innerText 跨浏览器解决方案

Question

我在跨浏览器兼容性和废弃 dom 方面遇到了困难。 我在电子商务交易中添加了数据分析跟踪，以便获取每次购买的产品和交易金额。

最初我使用document.querySelectorAll('#someId')[0].textContent 来获取产品名称，这对于除 Internet Explorer 之外的所有浏览器都运行良好。

花了一些时间才发现是 .textContent 部分导致了 ie 问题。

昨天我将.textContent 更改为.innerText。从内部分析来看，ie 的问题似乎已经解决，但现在 Firefox 失败了。

我希望在不编写 if 语句来检查 .textContent 或 .innerText 的功能的情况下找到解决方案。

有没有跨浏览器解决方案.getTheText？

如果不是，最好的解决方法是什么？有简单的解决方案吗？ （鉴于我在脚本方面的知识和经验，我问是有限的）

** 添加以下 cmets ** 如果这是我的代码块：

// 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);
}

如果我理解了 cmets 的语法和评论中链接的问题，我应该这样做：

// 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;

它基本上会测试第一个属性，如果它是 false 或未定义，它将使用第二个。我（学究式地）避免使用它的唯一原因是，即使 a 存在但只有一个值 0 或空字符串 ("") 或已设置， a || b 的第一次测试也会失败到null。