用于检测在 IE 中不使用 Xpath 的选择值的 Javascript 替代方法？

Question

我有一个可行的解决方案来使用 Xpath 获取选择的值。发现 IE 不支持 Xpath 并抛出“XpathResult is undefined”错误！！！我正在使用 TMS (DTM)，所以我必须将我的代码注入 Web 应用程序。我无法触摸网络应用程序代码。在研究这个时，我读到一个库 (https://github.com/google/wicked-good-xpath) 可以解决这个问题，但我没有那个选项。如果你在第一页转到https://apply.essexcredit.com/，你会看到只有一个选择“你对哪种贷款感兴趣？”。我需要在这个元素上设置一个事件监听器并获取选择的值（RV 或 Boat 等）。是否有任何其他方法可以用来将事件侦听器附加到此并获取值？这是支持 Xpath 时我拥有的当前代码：

  function _dtmSetProductSel() {

    window.addEventListener("click", function() {

   var prodSel = document.evaluate("//form/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div[@class='option-selected']", document, null, XPathResult.ANY_TYPE, null).iterateNext();

      if (prodSel) {
            var currProd = prodSel.getAttribute("title");

            if (currProd == "RV" || currProd == "Boat" || currProd == "Auto" || currProd == "Auto-IBG" || currProd == "Investment Line of Credit") {

                sessionStorage.setItem("_dtmSelProd", currProd);
            }

        } else {

            setTimeout(_dtmSetProductSel, 1000);
        }

    });

};

Answer 1

检查是否可以使用document.querySelector，如下所示。

var prodSelCSS = document.querySelector("form div.option-selected")

Answer 2

function _dtmSetProductSel() {
window.addEventListener("click", function() {
    var prodSel = document.getElementsByClassName("option-selected");
    var tryAgain = true;
    for(var i=0;i<prodSel.length;i++) {
        var currProd = prodSel[i].getAttribute("title");
        if(currProd && (currProd == "RV" || currProd == "Boat" || currProd == "Auto" || currProd == "Auto-IBG" || currProd == "Investment Line of Credit")) {
            sessionStorage.setItem("_dtmSelProd", currProd);
            tryAgain = false;
            break;
        }
    }
    if(tryAgain) {
        setTimeout(_dtmSetProductSel, 1000);
    }
});

};