今天重温了一遍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……