数组的操作方法
- 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)
}
}