Question

我有一个相对较大（500-100行）的HTML表，其中包含一堆<a>个元素。我想在页面顶部添加<select>，并通过为表格中的每个<option>创建<a>来填充它。

我的第一个方法看起来像这样：

    var initSelect = function () {
        var select = document.getElementById('mySelect');
        var items = document.evaluate('//a',  document, null, XPathResult.ANY_TYPE, null);

        var item = items.iterateNext();

        while (item) {
            var elem = document.createElement("option");
            var val = document.createAttribute("value");
            val.value = elem.nodeValue;
            elem.setAttributeNode(val);
            elem.innerHTML = item.innerHTML;
            select.appendChild(elem);
            item = items.iterateNext();
        }  
    };
    window.onload = initSelect;

当我尝试appendChild() <select>时，我得到了UncaughtInvalidStateError。我认为修改DOM会使我的XPathResult迭代器无效，所以我尝试先将所有<option>元素添加到数组中，然后在迭代完所有结果后附加它们。

    var initSelect = function () {
        var select = document.getElementById('src_select');
        var items = document.evaluate('//a',  document, null, XPathResult.ANY_TYPE, null);
        var elems = [];
        var item = items.iterateNext();

        while (item) {
            var elem = document.createElement("option");
            var val = document.createAttribute("value");
            val.value = elem.nodeValue;
            elem.setAttributeNode(val);
            elem.innerHTML = item.innerHTML; 
            elems.push(elem);
            item = items.iterateNext();
        }  

        for (var i = 0; i < elems.length; i++) {
            select.appendChild(elems[i]);
        }
    };
    window.onload = initSelect;

如果我单步执行调试器中的代码，我会在执行items.invalidIteratorState行后看到true转到elem.innerHTML = item.innerHTML。然后，在下一次调用items.iterateNext()时，我收到同样的错误。

我想要工作的第一件事就是看到<select>填充。之后，目标是能够在下拉列表中选择一个元素，并让页面导航到相应的<a>元素将带我去的相同链接。

这是我写的第一个JavaScript，所以我很感激所有反馈。此时，我正在寻找一个纯JavaScript解决方案。一旦我开始工作，我将尝试拉入JQuery并修改它。

Answer 1

document.links为您提供了文档中的所有a href元素，因此无需使用XPath API来访问这些元素。如果您正在寻找特定父母的元素，那么请使用例如document.getElementById('foo').getElementsByTagName('a') a要找到id属性为foo的元素中的所有document.links个元素。我不明白为什么你需要DOM Level 3 XPath API，这在IE中是不支持的。并且getElementsByTagName和{{1}}的结果都不能像XPath迭代器结果那样失效。

如果你真的想使用XPath API，那么尝试使用快照作为结果类型，它不应该因迭代器因文档操作而失败的方式失败。

XPathResult和无效的迭代器状态

1 个答案: