1

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

最初我是document.querySelectorAll('#someId')[0].textContent用来获取产品名称的，这对于除 Internet Explorer 之外的所有浏览器都可以正常工作。

花了一些时间才弄清楚这.textContent是导致问题的部分。

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

我希望在不编写 if 语句来检查.textContentor的功能的情况下找到解决方案.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);
}

那么使用或使用双杠||会分配第一个非空值？

4

1 回答 1

1

回复：您的编辑，不完全是。访问对象（例如 DOM 元素）上的方法或属性的方法是，如果您有名称本身，则使用点表示法，或者在变量/表达式的情况下使用方括号（也适用于字符串，如 in 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。至于问题符号（我之前犯了一个错误，使用||，正确使用的是 a :），

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。

于 2015-04-25T21:13:46.467 回答