JS之DOM操作笔记
DOM的概述
document object modelhtml文档加载到浏览器的内存中后，我们认为形成了一颗DOM树，即html标签按照层级结构而形成了一颗“家谱树”，而任何一个html标签、标签属性和文本都是这个树上的节点元素。
我们可以通过js的DOM组件中的方法对内存中的DOM树上的结构和内容进行修改，即通过js动态的修改内存中的那一份html及css的代码。
JS的DOM操作（重点！）
一、标签元素的操作
-
1.获取元素对象
根据id获取元素 getElementByid("id值")
根据标签获取多个元素
根据类名获取多个元素
根据name属性获取多个元素
2.创建一个新元素：createElement()
-
3.对子节点进行操作
hasChildNodes():判断是否有子节点
removeChild(子节点):删除子节点
replaceChild(新节点,旧节点):替换子节点
-
4.标签体的获取与设置
innerHTML
innerText
二、属性设置
1.获取属性的值：getAttribute(name)
2.设置属性的值：setAttribute(name,value)
3.删除某个属性：removeAttribute(name)
案例一:隔行换色的案例
<script type="text/javascript"> //1.当页面加载完毕的时候获取所有的tr window.onload = function(){ var trs = document.getElementsByTagName("tr") //遍历每一个tr //前面两行不设置颜色 for(i=2;i<trs.length;i++){ if(i % 2 == 0){ //奇数行 //设置该行的背景色为红色 trs[i].style.backgroundColor = "red" }else{ //偶数行 //设置该行的背景色为绿色 trs[i].style.backgroundColor = "green" } } //当鼠标移动到某一行，给该行的颜色设置成灰色。当鼠标移开的时候，又恢复成原来的颜色 //遍历出每一行 var color = "white" for (i=0;i<trs.length;i++) { trs[i].onmouseover = function(){ //绑定鼠标移入事件 //在改变之前，先使用一个变量记住原本的颜色 color = this.style.backgroundColor //将该行的背景色设置成灰色 this.style.backgroundColor = "gray" } trs[i].onmouseout = function(){ //绑定鼠标移出事件 //将该行的颜色还原成原来的颜色 this.style.backgroundColor = color } } } </script>
案例二:全选全不选的案例
<script type="text/javascript"> //一、实现全选功能 window.onload = function(){ //找到所有的子选框 var items = document.getElementsByClassName("itemSelect") //给全选框绑定点击事件 //1.找到全选框 var all = document.getElementById("checkAll") //2.绑定点击事件 all.onclick = function(){ //点击之后，设置所有子选框的选中状态和全选框一样 //4.遍历出每一个子选框，并设置其选中状态 for(i=0;i<items.length;i++){ items[i].checked = this.checked } } //二、实现反选功能 //1.给反选按钮绑定点击事件 var re = document.getElementById("rev") re.onclick = function(){ //2.点击的时候，要实现反选----->设置所有子选框的选中状态和原本的相反 /*for(i=0;i<items.length;i++){ //遍历出每一个子选框 //设置每一个子选框的选中状态为原来的相反值 items[i].checked = !items[i].checked }*/ //反选其实就相当于将所有的子选框再点击一遍 for(i=0;i<items.length;i++){ //遍历出每一个子选框，并且调用click()点击一下 items[i].click() } } //三、实现点击子选框控制全选框的选中状态 //1.给每一个子选框绑定点击事件 for(i=0;i<items.length;i++){ //给每一个子选框绑定事件 items[i].onclick = function(){ //控制全选框的选中状态。 //什么时候全选框应该不选中？只要有一个子选框不选中 //只要当前点击的这个子选框不选中，那么全选框一定不选中 if(!this.checked){ all.checked = false }else{ /*var count = 0 //当前点击的子选框为选中状态，再次遍历所有子选框，看是否每一个子选框都选中 for(j=0;j<items.length;j++){ //有一个选中，计数器就+1 if(items[i].checked){ count ++ } } //判断，计数器的大小，是否和子选框的个数相等，如果相等表示所有子选框都选中 if(count == items.length){ //表示所有的子选框都选中了，那么就设置全选框选中 all.checked = true }*/ var count = 0;//记录未选中的标签 for(j=0;j<items.length;j++){ //有一个选中，计数器就+1 if(!items[j].checked){ count ++ } } if(count == 0){ //表示所有的都选中 all.checked = true } } } } } </script>
JS的内置对象（不重要）
与java一样，js也内置一些现成的对象供我们使用，js中内置对象有如下几个：
Array对象
Array对象是数组对象，跟java中的数组一个意思，但是使用语法上稍微有些区别。
-
1.创建数组对象
创建一个空数组：var arr = new Array();
创建一个指定大小的数组：var arr = new Array(size);
创建数组并填充元素：var arr = new Array(element0, element1, ..., elementn);
直接创建元素数组：var arr = [element0, element1, ..., elementn];
-
2.数组中的元素获取
-
跟java一样通过索引的方式获得数组中的元素： 获得数组中的一个元素：arr[0]
遍历获得数组中的所有元素： for(var i=0;i<arr.length;i++){ alert(arr[i]); }
-
-
多维数组的操作
-
js中的数组跟java中的集合相似，也就是数组中的元素还是数组
arr = [
[1,2,3], [4,5,6], [7,8,9] ]
获取数组中的8数字可以：
arr[2][1]
-
String对象(比较重要)
获取指定位置的字符：charAt()
查找某个字符的第一次出现的下标：indexOf()
查找某个字符最后一次出现的下标：lastIndexOf
切割字符串：split()
截取字符：substring(i,j)
substr(i,j),表示从i下标开始，截取j个字符
日期对象(比较重要)
-
创建方式
创建当前日期时间：var date = new Date();
创建指定日期时间：var date = new Date(毫秒值);其中毫秒值为1970-01-01至今的时间毫秒值
-
时间的获取
获得年：getFullYear() 从 Date 对象以四位数字返回年份。
获得月：getMonth() 从 Date 对象返回月份 (0 ~ 11)。
获得星期：getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
-
获得日：getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
获得毫秒值：getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
Math对象
Math对象是数学对象，是一个工具对象，因此Math对象不用使用new的方式创建，直接使用Math就可以调用对象内部的方法。
abs(x) 返回数的绝对值。
ceil(x) 对数进行上舍入。
floor(x) 对数进行下舍入。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
案例三:省市二级联动
<script type="text/javascript"> // 定义二维数组:准备数据 var items = [["长沙市","岳阳市","衡阳市","邵阳市"],["广州市","深圳市","东莞市","惠州市"],["武汉市","黄冈市","荆州市","襄阳市"],["昆明市","大理市","玉溪市","丽江市"]] //当页面加载完毕之后，给省份的下拉选择框绑定一个onchange事件 window.onload = function(){ //1.获取省份的下拉选择框 var pro = document.getElementById("provinceId") //找到城市的下拉选择框 var ct = document.getElementById("cityId") //2.绑定onchange事件 pro.onchange = function(){ //每次改变之前，要将之前的城市下拉选择框中的内容清空 ct.innerHTML = "<option value=''>----请-选-择-市----</option>" //3.绑定之后，获取当前显示的是哪个option--->其实就是要获取当前显示的option的value //我们可以通过这个value，到二维数组中取出该省份对应的城市数组 var cities = items[this.value] for (i=0;i<cities.length;i++) { //4.每遍历出来一个城市创建一个option标签 //<option value='i'>当前遍历出来的城市名</option> var opt = document.createElement("option") //设置这个标签的value属性 opt.setAttribute("value",i) //设置这个标签的文本 opt.innerText = cities[i] ct.appendChild(opt) } } } </script>