Question

document.getElementsByTagName返回了一个NodeList对象。

我想删除一些项目（假设我想删除NodeList中的第一项）

有办法吗？（我知道我可以手动将所有节点复制到一个数组中，但如果NodeList本身已经具有删除其中元素的功能，我不希望这样做。）

我知道从NodeList删除项目对显示器没有影响（并且不应该导致任何浏览器显示刷新或类似的东西，我只是不希望NodeList对象保持对该节点的引用）

有办法吗？（或者我是否被迫将NodeList中的所有项目复制到数组中？）

Answer 1

正如您在specification中所看到的，没有方法可以从列表中删除元素。

无论如何都没有意义。此NodeList 实时，这意味着只要您访问某个属性，就会再次搜索DOM，例如length。来自MDC：

（...）返回的列表是实时的，这意味着它会自动更新DOM树。（...）

所以你必须将节点复制到一个数组中。

您可以使用Array方法轻松完成此操作。例如。复制它并直接删除第一个元素：

var nodes = [].slice.call(elements, 1);

NodeList是类似数组的对象。因此，我们可以使用call ^[docs]将数组函数应用于它。 [].slice只是获取slice ^[docs]方法引用的简写。

Answer 2

与您拥有相同的用例。

对于ES6，您可以执行以下操作：

const myNodeList = ele.childNodes;

const [head, ...tail] = myNodeList;

console.log('the first item: ', head);

console.log('the remaining items: ', tail);

JavaScript ES6— The Spread Syntax (…)

Answer 3

var MySet = { 0: {value: document.body, enumerable: true}, 1: {value: document.head, enumerable: true}, 2:{value: document.documentElement, enumerable: true}, length: {value: 3}};
var protoNodelist = document.createDocumentFragment().childNodes;
var MyNodelist = Object.create(protoNodelist, MySet);
MyNodelist; // Output: NodeList {0: body, 1: head, 2: html, length: 3}
removeNode(MyNodelist, 1); // Output: NodeList {0: body, 1: html, length: 2}
    function removeNode(NodeList, i){
        var newElementSet = {};
        var newElementSeti = 0;
        for(NodeListi = 0; NodeListi < NodeList.length; NodeListi++){
            if(NodeListi != i){
                newElementSet[newElementSeti] = {value: NodeList[NodeListi], enumerable: true};
                newElementSeti += 1;
            };
        };
        newElementSet['length'] = {value: newElementSeti};
        var nodelist = document.createDocumentFragment().childNodes;
        var newNodelist = Object.create(nodelist, newElementSet);
        newNodelist.__proto__ = newNodelist.__proto__.__proto__;
        return newNodelist;
    };

我们可以直接从NodeList中删除节点吗？

3 个答案: