Question

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

最初我使用document.querySelectorAll('#someId')[0].textContent来获取产品名称，除了Internet Explorer之外，每个浏览器都能正常运行。

花了一些时间才发现导致问题的是.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或空字符串{{{}也会失败1}}），或设置为""。

textContent Vs. innerText跨浏览器解决方案

1 个答案: