文本内容对比innerText跨浏览器解决方案

Question

我在跨浏览器兼容性方面遇到了困难，因此放弃了 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);
}

所以使用 or 与双条 || 分配第一个非空值？

Answer 1

回复：您的编辑，不完全是。访问对象（例如 DOM 元素）的方法或属性的方法是，如果您有名称本身，则使用点表示法，或者在 variables/expressions 的情况下使用方括号（也适用于字符串，如在 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;

作为一个表达式，它基本上计算 ? 之前的内容，如果为真，则 returns : 之前的表达式，否则为之后的表达式。所以上面和/a shorthand 一样 for:

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

由于您仅在两个属性之间进行检查并希望分配一个或另一个，最短的方法确实是：

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

它基本上会测试第一个属性，如果它是假的或未定义的，它会使用第二个。我（迂腐地）避免使用它的唯一原因是因为即使 a 存在但只有 0 的值或空字符串（"")，或设置为 null.

文本内容对比innerText跨浏览器解决方案

textContent Vs. innerText Cross Browser solution

javascript

innerhtml

innertext