1.1.1 什么是DOM
l DOM：Document Object Model 文档对象模型，定义访问和操作结构化文档（HTML）的方式。
n 创建的结构化文档：html、xml 等
n DOM包括：核心DOM、HTML DOM、XML DOM。通常情况下HTML DOM 和XML DOM是可以相互使用的。
l HTML DOM 将 整个HTML文档呈现成一颗DOM树，树中有元素、属性、文本等成员。
1.1.1 document文档对象
l 浏览器加载整个HTML文档形成Document 对象，Document 对象可以访问和操作HTML文档中的所有元素。
标签元素的操作
1）获得元素对象：
根据id获得一个元素：getElementById(id属性值)
根据标签名称获得多个元素：getElementsByTagName(标签名称)
根据class属性获得多个元素：getElementsByClassName(class的属性值)
根据name属性获得多个元素：getElementsByName(name属性值)
2）创建一个新元素createElement()
3）将元素放到某个父元素的内部appendChild()
4）标签体的获取与设置：innerHTML
属性的操作
获得属性的值：getAtrribute(name)
设置属性的值：setAtrribute(name,value)
删除某个属性：removeAtrribute(name)
DOM练习1:
<scripttype="text/javascript">
//输出 <input type="text"name="username" value="传智播客10周年_1" id="tid" >标签value属性的值
vartidElement = document.getElementById("tid");
alert(tidElement.value);
//输出 <input type="text"name="username" value="传智播客10周年_1" id="tid" >标签type属性的值
alert(tidElement.type);
</script>
DOM练习2:
<script type="text/javascript">
//获取所有的input元素,返回值是数组
var inputs =document.getElementsByTagName("input");
//测试长度
alert(inputs.length);
//遍历value的值
for(var i=0;i<inputs.length;i++){
alert(inputs[i].value);
}
//输出type="text"中 value属性的值不包含按钮(button)
for(var i=0;i<inputs.length;i++){
if(inputs[i].type=="text")
alert(inputs[i].value);
}
//输出所有下拉选 id="edu"中option标签中 value属性的值
var eduElement =document.getElementById("edu");
var eduOptions =eduElement.getElementsByTagName("option");
for(var i=0;i<eduOptions.length;i++){
alert(eduOptions[i].value);
}
functionshowSelect(){
//输出所有下拉选select的option标签中value的值
//输出选中的值
varoptions = document.getElementsByTagName("option");
for(vari=0; i< options.length;i++){
if(options[i].selected)
alert(options[i].value);
}
}
</script>
DOM练习3:
<script type="text/javascript">
//通过元素的name属性获取所有元素的引用 name="tname"
//测试该数据的长度
//遍历元素,输出所有value属性的值
var inputs =document.getElementsByName("tname");
/*for(var i=0;i<inputs.length;i++){
alert(inputs[i].value);
}*/
//为每个文本框(<inputtype="text">)增加chanage事件,当值改变时,输出改变的值
for(var i=0; i<inputs.length;i++){
inputs[i].onchange=function(){
alert(this.value);
}
}
</script>
DOM练习4:
<script type="text/javascript">
//<li id="xj"value="xingji">星际争霸</li>节点的value属性的值
varxjElement = document.getElementById("xj");
alert(xjElement.getAttribute("value"));
</script>
DOM练习5:
<scripttype="text/javascript">
//给这个节点增加 name属性 <li id="xj"value="xingji" name="xingjizhengba">星际争霸</li>
varxjElement = document.getElementById("xj");
xjElement.setAttribute("name","xingjizhengba");
//测试
alert(xjElement.getAttribute("name"));
</script>
DOM练习6:
<script type="text/javascript">
window.onload=function(){
//在div层中插入 <h1>海马</h1>
//获取div的标签对象
var cityEle =document.getElementById("city");
//属性 innerHTML:获取标签体内容,改变标签体的内容
//alert(cityEle.innerHTML);
//cityEle.innerHTML = "<h1>海马</h1>";
//属性 innerText,设置标签体的内容,无论是什么,都会解析为普通的文本
cityEle.innerText = "<h1>海马</h1>";
}
</script>
DOM练习7:
<script type="text/javascript">
//查看id="edu"的节点是否含有子节点
vareduElement = document.getElementById("edu");
varflag = eduElement.hasChildNodes();
alert(flag);
//查看id="tid_1"的节点是否含有子节点
vartid_1Element = document.getElementById("tid_1");
flag= tid_1Element.hasChildNodes();
alert(flag);
</script>
</html>
DOM练习8:
<script type="text/javascript">
//删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>
varcityElement = document.getElementById("city");
varbjElement = document.getElementById("bj");
//cityElement.removeChild(bjElement);
//获取北京的父节点
var parent = bjElement.parentNode;
alert(parent.id);
</script>
DOM练习9:
<script type="text/javascript">
//点击北京节点， 将被反恐节点替换
var bjElement =document.getElementById("bj");
bjElement.onclick = function(){
var cityElement =document.getElementById("city");
var fkElement =document.getElementById("fk");
cityElement.replaceChild(fkElement,bjElement);
}
</script>
DOM练习10:
<script type="text/javascript">
//增加城市节点<li id="tj" v="tianjin">天津</li>放置到city下
var cityElement =document.getElementById("city");
var tjElement =document.createElement("li");
tjElement.innerHTML="天津";
tjElement.setAttribute("id","tj");
tjElement.setAttribute("value","tianjin");
cityElement.appendChild(tjElement);
</script>
DOM练习11:
<script type="text/javascript">
// 在重庆前面插入新的节点 <li id="tj" name="tianjin">天津</li>
var cityElement =document.getElementById("city");
var tjElement =document.createElement("li");
tjElement.innerHTML="天津";
tjElement.setAttribute("id","tj");
tjElement.setAttribute("value","tianjin");
var cityElement =document.getElementById("city");
var cqElement =document.getElementById("cq");
cityElement.insertBefore(tjElement,cqElement);
</script>
第2章 案例：
第3章 案例：表格隔行换色
3.1 案例描述
开发中，需要使用表格陈列数据，数据过多不易查看，通常使用隔行换色进行表示。
1.1 案例相关JS函数介绍
1.1.1 相关JS事件
l onload() 页面加载成功触发
n 方式1：<body>使用onload属性确定需要执行的函数
<head>
<metacharset="UTF-8">
<title></title>
<scripttype="text/javascript">
//js代码在<body>之前，不能获得<body>标签体中的内容，还没有加载到
vare01 = document.getElementById("e01");
alert(e01); //打印：null
functioninit () {
//页面加载成功之后执行
vare02 = document.getElementById("e01");
alert(e02.value); //打印：传智播客
}
</script>
</head>
<body onload="init()">
<inputtype="text" name="" id="e01" value="传智播客" />
</body>
n 方式2： 通过window.onload 设置匿名函数
<head>
<metacharset="UTF-8">
<title></title>
<scripttype="text/javascript">
window.onload= function () {
//页面加载成功之后执行
vare02 = document.getElementById("e01");
alert(e02.value); //打印：传智播客
}
</script>
</head>
<body>
<inputtype="text" name="" id="e01" value="传智播客" />
</body>
1.1.2 this关键字
l 在函数内部this表示：当前操作的元素。
1.2 案例实现
l 在提供html页面的基础上，编写js代码
<scripttype="text/javascript">
//页面加载完成事件
window.onload = function(){
//获取所有的tr标签
var trs =document.getElementsByTagName("tr");
//从2开始遍历数组
for(var i=2;i<trs.length;i++){
//索引的奇偶数判断
if(i%2==0){
trs[i].style.backgroundColor="#FFFAE8";
}else{
trs[i].style.backgroundColor="#9B70A9";
}
//定义变量,保存变化后的颜色
var color="";
//每行注册鼠标的移入事件
trs[i].onmouseover =function(){
//记录修改后的颜色
color=this.style.backgroundColor;
this.style.backgroundColor="#ccc";
}
//每行注册鼠标移出事件
trs[i].onmouseout =function(){
this.style.backgroundColor=color;
}
}
}
</script>
第1章 案例：复选框全选/全不选
1.1 案例描述
开发中，经常需要对表格数据进行“批量处理”，就需要快速的对列表项进行操作，本案例我们来完成“全选和全不选”
1.2 案例相关的JS属性介绍
1.2.1 单选/复选选中
ele.checked 表示元素是否选中，true表示选中，false表示没有选中
例如：ele.checked = true; //设置元素被选中。
1.3 案例实现
l 步骤1：给复选框添加onclick事件
<input type="checkbox"onclick="selectAll(this)" >
步骤2：编写selectAll(this)处理列表项的复选框是否勾选
<scripttype="text/javascript">
function selectAll(check){
var checkboxs =document.getElementsByClassName("itemSelect");
var checked = check.checked;
for(vari=0;i<checkboxs.length;i++){
checkboxs[i].checked=checked;
}
}
</script>
第2章 JavaScript内置对象
2.1 String对象
JS的对象也分为内置对象和定义对象,Java中Object,String,System属于内置对象,自定义的Person,Student属于自定义的对象.
JS的自定义对象是函数实现的
<scripttype="text/javascript">
/*
String对象
*/
var str = "abc"// typeof 输出string
var str2 = new String(str); //typeof 输出 object
//以上定义方式,都可以使用String对象的方法
var s = "a-b-c-de-FG";
//字符串的长度
//alert(s.length);
//指定索引找字符
//alert(s.charAt(1));
//字符第一次出现的索引
//alert(s.indexOf("c"));
//字符最后一次出现的索引
//alert(s.lastIndexOf("c"));
//切割字符串
/*var strArr = s.split("-");
for(var i = 0 ; i <strArr.length;i++){
alert(strArr[i]);
}*/
//获取索引之间的字符
//alert(s.substring(1,3));
//获取索引开始到长度的字符
//alert(s.substr(1,3));
</script>
2.2 Date对象
JS中的日期对象
<script type="text/javascript">
/*
* Data对象
* 创建方式直接new
*/
var date = new Date();
//拼接年月日
alert(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日");
//获取毫秒值
alert(date.getTime());
</script>
2.3 Math对象
Math是数学计算的对象,此对象无需创建,直接Math.调用
<scripttype="text/javascript">
/*
Math对象
直接调用
*/
//向上取整
alert(Math.ceil(3.14));
//向下取整
alert(Math.floor(3.14));
//四舍五入取整
alert(Math.round(3.14));
</script>
2.4 Array数组对象
<scripttype="text/javascript">
/*
数组对象定义方式
new Array();
new Array(size);
new Array(element0, element0,..., elementn);
*/
//定义数组对象
var arr1 = new Array();
//赋值元素
arr1[0] = 1;
arr1[1] = "a";
arr1[2] = 2.2;
alert(arr1);
//定义数组对象
var arr2 = new Array(3);
//打印数组长度
alert(arr2.length);
//定义数组对象
var arr3 = newArray(3,4,5,"a",true);
alert(arr3);
//开发中最常用方式
var arr4 =[1,2,3,4,"a","b","c"];
for(var i = 0 ; i<arr4.length;i++){
alert(arr4[i]);
}
//定义二位数组
var arr5 = [
[1,2,3],["a",4,"b"],[true,5,false]
];
//打印3
alert(arr5[0][2]);
//打印a
alert(arr5[1][0]);
//打印false
alert(arr5[2][2]);
</script>
2.5 RegExp正则表达式对象
JS中的正则表达式和Java中的正则表达式相似
定义方式: 直接定义和创建对象方式
<script type="text/javascript">
/*
正则表达式定义
1. new RegExp对象
2. 正则被定义在俩个//内
[0-9][a-z][A-Z]{5}
^匹配开头
$匹配结尾
*/
var reg = newRegExp("^[0-9]{5}$");
//正则对象方法test,测试与字符串是否匹配
var flag = reg.test("a2345");
alert(flag);
var reg1 = /^[0-9]{5}$/;
flag = reg1.test("6789 ");
alert(flag);
</script>
第3章 案例：省市二级联动
3.1 案例介绍
在日常应用中，我们需要完善个人信息，“所在地”要求选择省市，当选择省时，该省对应的市将自动的更新。
<select id="provinceId"onchange="selectCity(this.value)" style="width:150px">
<optionvalue="">----请-选-择-省----</option>
<optionvalue="0">北京</option>
<optionvalue="1">吉林省</option>
<optionvalue="2">山东省</option>
<optionvalue="3">河北省</option>
<optionvalue="4">江苏省</option>
</select>
<select id="cityId"style="width:150px">
<optionvalue="">----请-选-择-市----</option>
</select>
1. 步骤2：js实现
<scripttype="text/javascript">
// 定义二维数组:存储省市信息
var pros = [
["朝阳","海淀","昌平"],["长春市","锦州市","吉林市"],["南京市","苏州市","徐州市"]
];
function selectCity(province){
//获取选中省份的市数组
var cityArr = pros[province];
//获取城市的select标签对象
var cityEle =document.getElementById("cityId");
//添加之前先清空option子标签
cityEle.innerHTML="";
//创建请选择的option子标签
var optionEle = document.createElement("option");
optionEle.innerHTML="----请-选-择-市----";
cityEle.appendChild(optionEle);
//遍历数组,几个元素就创建几个子option标签
for(var i = 0;i <cityArr.length;i++){
//创建子标签
var optionEle =document.createElement("option");
//设置子标签的标签体内容
optionEle.innerHTML=cityArr[i];
//添加子标签
cityEle.appendChild(optionEle);
}
}
</script>