1.数组
创建数组
直接创建
let arr=[1,2,3]
let arr=new Array(1,2,3)
let arr=new Array(3)//长度为3的数组
转化
let arr='1,2,3'.split(',')//将字符串转化为数组，用逗号来分隔数组
let arr='123'.split('')//用空字符串分隔
Array.from('123')//只能将满足条件的对象转化成数组。有长度，有下标的
如果想把伪数组转化为数组，可以用Array.from()
合并两个数组得到新数组
arr1.concat(arr2)
截取一个数组的一部分
arr1.slice(1)//从第二个元素开始arr1.slice(0)//从第1个元素开始，常用于复制数组。JS只提供浅拷贝。
增加数组中的元素
- arr.push(item1,item2)在尾部增加新元素。
- arr.unshift(item1,item2)在头部增加元素。
- arr.splice(index,0,item1,item2)在中间添加元素。
- arr[index]=item不推荐这个方法，容易出现稀疏数组。
删除数组中的元素
delete arr['0']这样删只能删除元素值，并填充一个empty进去，length不变。- 直接更改length会使后面的元素直接被删掉。因此尽量不要修改length。
- arr.shift()删掉第一个元素，length也会更改。
- arr.pop()删掉最后一个元素，length也会更改。
- arr.splice()删除数量可以为0.
查看元素
- Object.keys(arr)查看元素属性名,不太靠谱，会找出不是数字编号的属性名。
- Object.values(arr)查看元素属性值，会找出不是数字编号的属性名对应的属性值。
- for循环。for(i=0;i<arr.length;i++){console.log('${i}:${arr[i]}')}
- arr.forEach{(item,index)=>{console.log(`${index}:${item}`)}}遍历函数。
- arr.indexOf(item)查找某元素是否在数组内。存在则返回索引。不存在则返回-1。
- arr.find(fn)找到符合fn的第一个元素。
- arr.findIndex(fn)找到符合fn的第一个元素的索引。
2.节点
增
创建标签节点
- let div=document.createElement('div')
- document.createElement('style')以此类推
创建文本节点
- text1=document.createTextNode('你好')
标签内插入文本
- div1.appendChild(text1)
- div1.innerText='你好'
- div1.textContent='你好'
复制 div2=div1.cloneNode()括号内参数可填true或者false，表示深拷贝后者浅拷贝。
删
- parentNode.childChild(childNode)
- childNode.remove()移除node，之后仍然可以加回去，移除不是删除，还留存在内存中。。删除将node移除后再赋值为null即可。
改
- 改class：div.className='xxx'(全覆盖)
- 改class：div.classList.add('xxx')
- 改style：div.style='xxx'注意覆盖的问题。要写清楚改的是哪部分。
- 改style的一部分：div.style.width='xxx'
- 读属性：div.getAttribute('calss')
- 读属性：div.calssList这两句基本等价，得到的结果会有些许差别。
- 改文本内容：div.innerText='xxx'
- 改文本内容：div.textContent='xxx'
- 改HTML内容：div.innerHTML='xxx'
- 改父节点：newParent.appendChild(div),div会从原来的位置消失，去新的父节点下。
查
-
查父节点：node.parentNode或node.parentElement。向上查二级父节点再操作一次函数即可
-
查子节点：node.childNodes或node.children
-
查同一父节点下的其他同级节点：先父节点再子节点，然后排除自己即可。用node.parentNode.children更好，原因如下↓。 tips 查子节点的长度时，如果用div.childNode.length，会把空格和回车都计算，而用div.children.length就不会。因此用后一个更好。而且两个的length都会实时更新。
-
查第一个子节点：node.firstChild。同理node.lastChild
-
查上一个同级节点：node.previousSibling,同理查下一个：node.nextSibling
tips
