JS中的方法:
一、向数组头部插入元素的方法
1.unshift()
unshift()向数组的开头添加一个或多个元素,原数组被改变并返回数组的长度。
2.Splice()
删除元素并向数组添加新元素,会改变原数组。
语法:arrayObject.splice(index,howmany,item1,.....,itemX)
Index:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
Howmany:必需。要删除的项目数量。如果设置为0,则不会删除项目,而是添加项目。
item1, ..., itemX:可选。向数组添加的新项目。
该函数对数组进行操作后会改变数组,但是返回的结果是被删除的数组元素。
向数组头部添加元素的具体操作:
splice(0,0,element)翻译一下:splice(在索引为0的位置(即数组的开头),不删除元素,并将element元素添加到数组中)
二、向数组尾部插入元素的方法
1.Push()
push()向数组结尾添加一个或者更多的元素,并返回数组长度
三、删除数组中第一个元素的方法
1.shift()
shift()删除并返回数组的第一个元素。删除后原数组改变,并返回删除的内容。
2.Splice()
此处应该注意到,splice既可以向数组添加元素也可以删除。
Splice(0,1):在索引为0的位置(即数组头部)开始,删除一个项目,即删除数组的头部元素。
四、删除数组中尾部元素的方法
pop()删除并返回数组的最后一个元素,删除后原数组改变,并返回删除的内容。
DOM操作元素:
除了以上JS中的方法外,我们还可以通过直接操作DOM,再转换为数组,来实时的添加或删除元素。一般不建议使用,此处不再赘述,仅简单介绍一下。
1.AppendChild()添加节点元素
Document.createElement(‘ ’);
创建一个元素,例如:Document.createElement(‘li’);
parent.appendChild()向父元素的末尾追加子节点,实现的是右侧插入数据。
2.insertBefore() 插入节点元素
node.insertBefore(newnode,existingnode)
在node元素中,将newnode插入到existingnode之前。
node.insertBefore(newnode,node.firstChild)在第一个子元素之前插入newnode,也即向数组的头部插入。
注意:节点之间的空白符,在firefox、chrome、opera、safari浏览器是文本节点。使用.firstChild/.lastChild方法可以获取到。
解决方法:
1.可以通过检测节点类型,过滤子节点。
2.在代码去除节点之间的空白符。
3..removeChild()去除节点
删除HTML元素,您必须首先获得该元素的父元素
parent.removeChild(parent.children[0]);
注:本文仅对数组中头部元素与尾部元素的插入与删除进行了总结,并不是唯一方法,总结不到位之处还望各位前辈指出,当然如果你有更好的方法也可以传授与我,不胜感激!希望本文能对新手前端有一定的帮助。