Javascript基础回顾（2）

数组的操作方法

1. push() ：在数组末尾添加任意多个元素，返回新数组的长度，原数组改变
2. pop()： 在数组末尾删除一个元素，返回被删除的元素，原数组改变
3. unshift() ：在数组开头添加任意多个元素，返回新数组的长度，原数组改变
4. shift()： 在数组开头删除一个元素，返回被删除的元素，原数组改变

//小技巧
var Arr=[1,2,3];
Arr.unshift(Arr.pop())//最后一个元素调到第一个
Arr.push(Arr.shift())//开头一个元素调到最后一个

5. 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元素，组成新数组，原数组改变

6. slice(start, end)：方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。

var heroes1 = ['刘邦', '张良', '韩信', '刘备', '张飞', '关羽']; 
var heroes2 = heroes1.slice(2, 5); // ['韩信', '刘备', '张飞'] 

7. reverse()：颠倒数组元素的顺序
8. 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--
		}
	}
}

数组排序

1. 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))
   

2. 冒泡排序

   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（文档对象模型）

1. 整个文档是一个文档节点
2. 每个 HTML 元素是元素节点
3. HTML 元素内的文本是文本节点
4. 每个 HTML 标签属性是属性节点
5. 注释是注释节点

节点类型

1. 元素节点 ： 各个标签 div、p、ul、li…
   nodeType=1
2. 属性节点 ： 各种属性
   nodeType=2
3. 文本节点 ： 空格、换行符、文本
   nodeType=3

元素节点方法

1. getElementById()
2. getElementsByTagName()
3. getElementsByName()
4. getAttribute() //获取指定元素节点的属性值
5. seAttribute() //设置指定元素节点的属性值
6. removeAttribute() 移除指定元素节点的属性

层次节点属性

1. childNodes ：获取指定元素节点的所有子节点
2. children ： 获取指定元素的子元素
3. firstChild ：获取指定元素节点的第一个子节点
4. firstElementChild： 获取指定元素节点的第一个元素子节点，有兼容性问题
5. lastChild ： 获取指定元素节点的最后一个子节点
6. lastElementChild ： 获取指定元素节点的最后元素子节点，有兼容性问题
7. parentNode ： 获取指定元素的父节点
8. nextSibling ：获取指定元素同级的下一个节点
9. nextElementSibling ：获取指定元素同级的下一个元素节点
10. previousSibling ：获取指定元素同级的上一个节点
11. previousElementSibling ： 获取指定元素同级的上一个元素节点
12. 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)
     }
 }