数组的操作方法
push() ：在数组末尾添加任意多个元素，返回新数组的长度，原数组改变
pop()： 在数组末尾删除一个元素，返回被删除的元素，原数组改变
unshift() ：在数组开头添加任意多个元素，返回新数组的长度，原数组改变
shift()： 在数组开头删除一个元素，返回被删除的元素，原数组改变
//小技巧
var Arr=[1,2,3];
Arr.unshift(Arr.pop())//最后一个元素调到第一个
Arr.push(Arr.shift())//开头一个元素调到最后一个
splice() ：可以删除，替换，增加
splice(n)//从索引n开始（包括索引n）删除元素到数组末尾，返回被删除的元素组成的新数组，原数组改变
splice(n,m)//从索引n开始（包括索引n）向后删除m个元素，返回被删除的元素组成的新数组，原数组改变
splice(n,m,x)//从索引n开始（包括索引n）向后删除m个元素,保留剩余元素，并且在n的位置添加x元素，组成新数组，原数组改变。
//相当于替换
splice(n,0,x)//（删除0个元素）在索引n位置添加x元素，组成新数组，原数组改变
slice(start, end)：方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
var heroes1 = ['刘邦', '张良', '韩信', '刘备', '张飞', '关羽'];
var heroes2 = heroes1.slice(2, 5); // ['韩信', '刘备', '张飞']
reverse()：颠倒数组元素的顺序
concat()： 合并多个数组
数组去重
var arr5=[1,2,2,2,2,4,5,4,6,3,4];
for(var i=0;i<arr5.length;i++){
for(var j=i+1;j<arr5.length;j++){
if(arr5[i]==arr5[j]){
arr5.splice(j,1)
j--
}
}
}
数组排序
sort() 从小到大排序
大致原理：不是纯粹比较数值大小，而是比较每两个数的个位数值大小，从小到大排序，如相同，再比较十位数值……
自己封装一个方法，利用sort()实现数值大小的排序
var arr6=[1,123,21,2,3,121,2,7,9,6,11,101]
function sortFn(a,b){ //自定义一个排序函数
if(a<b){
return -1 //这里只要是一个负数就可以 a-b
}else if(a>b){
return 1 //这里只要是一个正数就可以
}else{
return 0
}
}
console.log(arr6.sort(sortFn))
冒泡排序
var temp=""
for(var i=0;i<arr6.length-1;i++){
for(var j=0;j<arr6.length-1-i;j++){
if(arr6[j]>arr6[j+1]){
temp=arr6[j]
arr6[j]=arr6[j+1]
arr6[j+1]=temp
}
}
}
DOM（文档对象模型）
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 标签属性是属性节点
注释是注释节点
节点类型
元素节点 ： 各个标签 div、p、ul、li…
nodeType=1
属性节点 ： 各种属性
nodeType=2
文本节点 ： 空格、换行符、文本
nodeType=3
元素节点方法
getElementById()
getElementsByTagName()
getElementsByName()
getAttribute() //获取指定元素节点的属性值
seAttribute() //设置指定元素节点的属性值
removeAttribute() 移除指定元素节点的属性
层次节点属性
childNodes ：获取指定元素节点的所有子节点
children ： 获取指定元素的子元素
firstChild ：获取指定元素节点的第一个子节点
firstElementChild： 获取指定元素节点的第一个元素子节点，有兼容性问题
lastChild ： 获取指定元素节点的最后一个子节点
lastElementChild ： 获取指定元素节点的最后元素子节点，有兼容性问题
parentNode ： 获取指定元素的父节点
nextSibling ：获取指定元素同级的下一个节点
nextElementSibling ：获取指定元素同级的下一个元素节点
previousSibling ：获取指定元素同级的上一个节点
previousElementSibling ： 获取指定元素同级的上一个元素节点
attributes ：获取指定元素的属性集合
DOM节点常用操作
//write() 前面只能跟上document，将任意字符插入在文档中
document.write("<p>我是一个段落文本</p>")
//createElement() 创建一个元素节点，节点不会直接显示在文档中
var oDiv=document.createElement("div")
//oDiv.innerHTML="<p>我是一个段落文本</p>"
var oText=document.createTextNode("文本节点")
//appendChild() 将新节点追加到指定节点内容后面
//createTextNode("文本内容") 创建一个文本节点
//语法：父节点.appendChild(新节点)
oDiv.appendChild(oText)
var oBox=document.getElementById("box");
oBox.appendChild(oDiv)
//insertBefore() 将新节点插入在指定节点前面
//语法：父节点.insertBefore(新节点,指定节点)
var oList=document.getElementById("list");
oList.insertBefore(oDiv,oList.firstElementChild)
//拓展 （自己封装一个函数 ）
//insertAfter（自定义函数）实现将新节点插入指定节点后面
function insertAfter(newNode,targetNode){
//获取父节点
var parent=targetNode.parentNode
//判断如果最后一个节点是targetNode直接appendChild()
if(parent.lastChild===targetNode){
parent.appendChild(newNode)
}else{
parent.insertBefore(newNode,targetNode.nextSibling)
}
}
insertAfter(oDiv,document.getElementById("item"))
//替换节点
//replaceChild()
//父节点.replaceChild(新节点，被替换的节点)
oBox.replaceChild(oDiv,oBox.firstElementChild)
//cloneNode() 复制节点 cloneNode(true)深度复制
//语法：指定节点.cloneNode()
var oLis=oList.firstElementChild.cloneNode(true)
oBox.appendChild(oLis)
//removeChild() //删除节点
//语法：父节点.removeChild(指定节点)
var oItem=document.getElementById("item")
oItem.parentNode.removeChild(oList.lastElementChild)
DOM操作综合案例
动态生成表格元素，根据表头对应内容切换每行的排列顺序
类似于某宝中的切换为按时间，销量，热度……排序
//获取数据
var userListData=[{
id:1,
name:"张三",
age:19,
num:3,
score:66
},..........]
//获取table元素
var table=document.getElementsByTagName("table")[0]
//自定义生成表头的方法
function creatThead(){
var thead=document.createElement("thead")
thead.innerHTML=`<tr><th type="name">姓名</th>
<th type="age">年龄</th>
<th type="num">学号</th>
<th type="score">分数</th>
</tr>`
return thead
}
//将创建的表头添加到table中
table.appendChild(creatThead())
//自定义生成表格内容的方法
function creatTbody(userListData){
var tbody=document.createElement("tbody")
userListData.forEach(function(data,index){
tbody.innerHTML+=`<tr><td>${data.name}</td>
<td>${data.age}</td>
<td>${data.num}</td>
<td>${data.score}</td>
</tr>
`
})
return tbody
}
//将创建的表格内容添加到table中
table.appendChild(creatTbody(userListData))
//给表头添加单击事件，完成不同排序的切换
var ths=document.getElementsByTagName("th")
for(i=0;i<ths.length;i++){
ths[i].onclick=function(){
var sortname=this.getAttribute("type")
this.flag=this.flag==-1?1:-1
var that=this
userListData.sort(function(a,b){
var x=a[sortname]
var y=b[sortname]
if(x>y){
return that.flag
}else if(x<y){
return -that.flag
}else{
return 0
}
})
var newtbody=creatTbody(userListData)
var oldtbody=document.getElementsByTagName("tbody")[0]
table.replaceChild(newtbody,oldtbody)
}
}
|
|
收藏
淘帖
踩
