js基础(二)|彻底带你了解js怎么用？

今天重温了一遍js最基础的获取节点、创建节点、属性操作等等，刚好用到的今天的知识点来实现微信登录界面的点击事件，基本的dom操作（由于html格式放不了gif所以只能截个图(╥ ╥)。

那今天都涉及到哪些知识点呢？我们一起来总结一下……

jsDOM操作
属性、文本操作
css操作
对象与数组
面向对象编程

DOM树
DOM节点：
元素节点：
属性节点：
文本节点：
js操作节点（增删改查）

一、获取节点：
1、通过id获取
document.getElementById(“id”)
节点.getElementById(“id值”)
！返回的是一个具体的节点

2、通过标签名来获取节点
getElementsByTagName(“div”)
！返回的是一个节点数组,即使只有一个

3、通过标签的Name值来获取
getElementsByName(“标签的name值”)
!返回的是一个节点数组

4、通过class值来获取节点
getElementsByClassName(“类名”)
!返回的是一个节点数组

*5、querySelector(‘选择器’)//根据我选择器的结果集返回第一个
*6、querySelectorAll(‘选择器’)//根据我选择器的结果集返回

!!!getElementsByClassName在IE9以下无效的

7、获取节点.parentNode–>获取到节点的父节点
8、获取节点.children–>获取到节点的子节点集合
获取节点.childNodes–>获取到节点的子节点集合（带有前后两个空白的文本节点）

二、创建插入节点
1、document.createElement(“div”)//创建一个元素节点
2、document.createTextNode(“文本文本”)//创建一个文本节点

被插入的节点.appendChild(创建的节点)//在节点后面添加

父节点.insertBefore(创建的节点，被插入的节点)//在已知父节点的某个孩子前面添加内容
改变文本内容：
选中的元素.innerText=’’;//直接将HTML代码当做字符来处理
选中的元素.innerHTML=’’;//可以识别HTML代码
删除：直接设置为空（""）

替换节点：
父节点.replaceChild(新节点,老节点)

克隆(复制节点)

选中的元素.cloneNode(true/false):
当clone参数为true的时候：选中元素里面所有懂得内容克隆
当clone参数为false的时候：选中元素本身克隆

删除节点：
父节点.removeChild(子节点)

节点的属性操作
如何来获取属性：
选中的元素.getAttribute(“属性名”)
更改属性：
选中的元素.setAttribute(“属性名”,“新的属性值”)
新增属性
选中的元素.setAttribute(“原本没有的属性名”,“属性值”)
删除属性
选中的元素.removeAttribute(“属性名”);

js对象及数组

js对象的分类：

内置对象
js已经提供好的对象，这些对象它有自己的方法和属性。如：
Number，String，Boolean，Date，Math，Array，window，location…

自定义对象
开发人员自己去定义的一个对象

	1、如何来定义对象：
		1)语法：var obj={};
		2)使用我们的new关键字来创建
			var obj=new Object()//创建一个空对象
			var arr = new Array()//创建一个空的数组对象
			var time = new Date()//创建一个初始化的日期对象
		3)通过构造函数的形式来创建对象
			var obj = new Test();
			function Test(num1,num2){
				this.number1 = num1;
				this.number2 = num2
			}
			
		4)通过Object.create()创建对象
			var obj = Object.create(null)
			var obj = Object.create({"name":"tom","age"："3"})
			
	2、对象的属性
		1、对象.属性名 = 属性值
		2、对象属性值可以是任何一种js的数据类型 包括对象
	3、获取对象的属性
		1、对象.属性名
		2、对象[属性名]
	4、遍历对象（for in循环）
		for(var 变量  in 对象){
			//  属性名：变量
			//  属性值: 对象[变量]
		}

二、数组
1、数组内可以存放任意数据类型的数据（本质上它也是对象）
2、数组元素不赋值的情况下 值为undefined
3、如果数组打印的时候，元素不赋值""
4、访问数组范围之外的元素，不会出现越界的问题，undefined
5、定义数组大小，照样可以添加更多元素

定义数组的方法：
1、var arr=[]//定义一个空数组
2、var arr=[10,20,{“name”:“tomy”,“age”:19},0.1,“string”,true,[“aaa”,“bbb”]]//定义的同时赋值
3、var arr=new Array();//定义一个空数组
4、var arr = new Array(10,20,{“name”:“tomy”,“age”:19},0.1,“string”,true,[“aaa”,“bbb”])//定义的同时赋值
5、var arr=new Array(10)//定义一个长度为10的数组

赋值：
数组名[下标] = 值

取值：
数组名[下标]

更改值：
数组名[下标] = 值

数组的分类：
索引数组：下标是数字
关联数组：下标是可以是自定义的字符

一维数组

二维数组:数组里面的元素还是数组
var arr = [[“id”,“aaa”,10],[1,1,2,3],[1,1,1]]

循环二维数组
var arr = [[“id”,“aaa”,10],[1,1,2,3],[[“a”,“b”,“c”],1,1]]

多维数组

js 操作数组的api
！1）concat():连接两个或更多的数组的方法(不修改原数组)
var arr1 = [1,2,3];
var arr2 = [7,8,9];
var newArr = arr1.concat(arr2)
！2）join()：将数组转成字符串，并通过指定的字符分割(未指定默认使用逗号“，”)
var arr=[1,2,3]
var str=arr.join("")
3）toString():吧数组转成字符串然后通过,隔开
var arr=[“a”,“b”,“c”,“d”];
var string = arr.toString()
console.log(string)
！4）slice():从已有的数组中返回指定的元素
语法：
var string = arr.slice(start,end)//start==>开始位置下标 end==>结束位置下标
var Arr = [1,2,3,4,5,6,7,8,9,10]
var subArr = Arr.slice(2,4)
console.log(Arr)
5）splice():删除 插入 会修改原数组
var arr=[]
语法：var temp = arr.splice(num1,num2)
arr:被切割数组
temp：切割完获取数组元素的数组
num1：切割开始的下标
num2：切割多少位

var del = [1,2,3,4,5,6,7,8,9]
var delected = del.splice(3,5)
console.log(delected)
console.log(del)
!6）push：向数组的末尾添加一个或多个的新元素
var arr=[1,2,3,4,5,6,7,8,9]
arr.push(10)

!7) pop:删除并返回最后一个元素(直接修改原数组)
var arr=[1,2,3,4,5,6,7,8,9]
var a = arr.pop()

!8) shift:删除并返回第一个元素
var arr=[1,2,3,4,5,6,7,8,9]
var a = arr.shift()

!9) sort:排序
var arr=[9,1,3,6,7,2,8,5,4]
var a = arr.sort()

10）reverse:颠倒的数组顺序
var arr=[1,2,3,4,5,6,7,8,9]
var a = arr.reverse()

内容比较多，但是总结非常的全，可以挨个挨个练习练习
我的day6 end……