javascript 我们可以直接从 NodeList 中删除节点吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6545379/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can we Directly remove Nodes from a NodeList?
提问by user8490
document.getElementsByTagNamereturned me a NodeList object.
document.getElementsByTagName返回给我一个 NodeList 对象。
I would like to remove some items (let's say I would like to remove the first item from the NodeList)
我想删除一些项目（假设我想从 NodeList 中删除第一个项目）
Is there a way to do it? (I'm aware that I could manually copy all the nodes into an array but I do not wish to do that if NodeList by itself already has functions for us to remove elements in it)
有没有办法做到这一点？（我知道我可以手动将所有节点复制到一个数组中，但如果 NodeList 本身已经具有让我们删除其中元素的功能，我不希望这样做）
I am aware that removing items from a NodeList has No Effect on the display (and should not cause any browser-display-refresh or stuff like that, I simply do not wish that NodeList object to hold a referennce to that Node)
我知道从 NodeList 中删除项目对显示没有影响（并且不应该导致任何浏览器显示刷新或类似的东西，我只是不希望 NodeList 对象持有对该节点的引用）
is there a way to do it? (Or am i forced to copy all the items in the NodeList into an array?)
有没有办法做到这一点？（或者我是否被迫将 NodeList 中的所有项目复制到一个数组中？）
回答by Felix Kling
As you can see in the specification, there is no method to remove an element from the list.
正如您在规范中所见，没有从列表中删除元素的方法。
It would not make sense anyway. This NodeListis live, meaning the DOM is searched again whenever you access a certain property, e.g. the length. From MDC:
无论如何都没有意义。这NodeList是live，这意味着每当您访问某个属性时都会再次搜索 DOM，例如length. 来自MDC：
(...) The returned list lis live, meaning that it updates itself with the DOM tree automatically. (...)
(...) 返回的列表 li 是实时的，这意味着它会自动使用 DOM 树更新自身。(...)
So you have tocopy the nodes into an array.
所以你必须将节点复制到一个数组中。
You can do this quite easily though by using Arraymethods. E.g. to copy it and directly remove the first element:
虽然通过使用Array方法，您可以很容易地做到这一点。例如复制它并直接删除第一个元素：
var nodes = [].slice.call(elements, 1);
The NodeListis an array-likeobject. Hence we can apply array functions to it, by using call[docs]. [].sliceis just a shorthand to get a reference to the slice[docs]method.
的NodeList是一个类似数组的对象。因此，我们可以使用call[docs]对其应用数组函数。[].slice只是获取对slice[docs]方法的引用的简写。
回答by wk9876
Just have the same use case as you.
只需与您拥有相同的用例。
For ES6 you can do this:
对于 ES6，你可以这样做：
const myNodeList = ele.childNodes;
const [head, ...tail] = myNodeList;
console.log('the first item: ', head);
console.log('the remaining items: ', tail);
回答by Edmond Chow
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;
};
