这篇博客详细介绍了JavaScript中的内置对象，包括Array、String、Number、Boolean、Date、Math对象的使用方法和属性。此外，还深入探讨了DOM操作，包括事件处理、BOM对象如Window、Navigator、Screen、History、Location的属性和方法，以及HTML DOM的基本概念、节点操作和事件处理。文章通过实例展示了如何使用JavaScript进行动态HTML操作，并提供了多个实际案例，如随机点名器和轮播图制作，帮助读者巩固理解。
Java学习-16 javaScript内置对象与DOM操作
DOM:文档对象模型（Document Object Model）
1、对象定义和使用
主要使用以下4种方法：
- 原始方式创建
因为对象的属性可以在对象创建后动态定义，所有许多开发者都在 JavaScript 最初引入时编写类似下面的代码：
var oCar = new Object;
oCar.color = "blue";
oCar.doors = 4;
oCar.mpg = 25;
oCar.showColor = function() {
alert(this.color);
};
这里有一个问题，就是如果有多个car，那么就可能需要创建多个 car 的实例，然后再一一的执行上述操作，较为繁琐，最好是能够把一些共性的东西放在一起，个性的东西再各自编写。
- 工厂函数（factory function）。
要解决该问题，开发者创造了能创建并返回特定类型的对象的工厂函数（factory function）。
function createCar() {
var oTempCar = new Object;
oTempCar.color = "blue";
oTempCar.doors = 4;
oTempCar.mpg = 25;
oTempCar.showColor = function() {
alert(this.color);
};
return oTempCar;
}
var oCar1 = createCar();
var oCar2 = createCar();
还可以通过传递参数的方式，创建不同的对象。
function createCar(sColor,iDoors,iMpg) {
var oTempCar = new Object;
oTempCar.color = sColor;
oTempCar.doors = iDoors;
oTempCar.mpg = iMpg;
oTempCar.showColor = function() {
alert(this.color);
};
return oTempCar;
}
var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);
oCar1.showColor(); //输出 "red"
oCar2.showColor(); //输出 "blue"
- 构造函数方式
function Car(sColor,iDoors,iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.showColor = function() {
alert(this.color);
};
}
var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);
上面的代码与工厂方式的差别:
首先在构造函数内没有创建对象，而是使用 this 关键字。使用 new 运算符构造函数时，在执行第一行代码前先创建一个对象，只有用 this 才能访问该对象。然后可以直接赋予 this 属性，默认情况下是构造函数的返回值（不必明确使用 return 运算符）。
- 直接创建自定义对象
var ob = {name:"qq",age:26};
console.log(ob.name);
console.log(ob.age);
var obj={};
obj.name="小白";
obj.say=function () {
console.log("我叫: "+this.name);
};
obj.say();
var obj2={
name:"小明",
age:20,
say:function () {
console.log("我叫: "+this.name+"; 年龄: "+this.age);
},
};
obj2.say();
更多的详细解释见：ECMAScript 定义类或对象
2、对象类型
在 ECMAScript 中，所有对象并非同等创建的。
一般来说，可以创建并使用的对象有三种：本地对象、内置对象和宿主对象。
1、本地对象
ECMA-262 把本地对象（native object）定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。简单来说，本地对象就是 ECMA-262 定义的类（引用类型）。它们包括：
- Object
- Function
- Array
- String
- Boolean
- Number
- Date
- RegExp
- Error
- EvalError
- RangeError
- ReferenceError
- SyntaxError
- TypeError
- URIError
2、内置对象
ECMA-262 把内置对象（built-in object）定义为“由 ECMAScript 实现提供的、独立于宿主环境的所有对象，在ECMAScript 程序开始执行时出现”。这意味着开发者不必明确实例化内置对象，它已被实例化了。ECMA-262 只定义了两个内置对象，即 Global 和 Math （它们也是本地对象，根据定义，每个内置对象都是本地对象）。
3、宿主对象
所有非本地对象都是宿主对象（host object），即由 ECMAScript 实现的宿主环境提供的对象。
所有 BOM 和 DOM 对象都是宿主对象。
3、Array数组
Array 对象用于在单个的变量中存储多个值。
1、创建 Array 对象的语法：
new Array();
new Array(size);
new Array(element0, element1, …, elementn);
- 参数
参数 size 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值。
参数 element …, elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。
- 返回值
返回新创建并被初始化了的数组。
如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0。
当调用构造函数时只传递给它一个数字参数，该构造函数将返回具有指定个数、元素为 undefined 的数组。
当其他参数调用 Array() 时，该构造函数将用参数指定的值初始化数组。
当把构造函数作为函数调用，不使用 new 运算符时，它的行为与使用 new 运算符调用它时的行为完全一样。
2、Array 对象属性
| 属性 | 描述 |
|---|---|
| constructor | 返回对创建此对象的数组函数的引用。 |
| length | 设置或返回数组中元素的数目。 |
| prototype | 使您有能力向对象添加属性和方法。 |
3、Array 对象方法
| 方法 | 描述 |
|---|---|
| concat() | 连接两个或更多的数组，并返回结果。 |
| join() | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 |
| pop() | 删除并返回数组的最后一个元素 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
| reverse() | 颠倒数组中元素的顺序。 |
| shift() | 删除并返回数组的第一个元素 |
| slice() | 从某个已有的数组返回选定的元素 |
| sort() | 对数组的元素进行排序 |
| splice() | 删除元素，并向数组添加新元素。 |
| toSource() | 返回该对象的源代码。 |
| toString() | 把数组转换为字符串，并返回结果。 |
| toLocaleString() | 把数组转换为本地数组，并返回结果。 |
| unshift() | 向数组的开头添加一个或更多元素，并返回新的长度。 |
| valueOf() | 返回数组对象的原始值 |
资料来自W3school：JavaScript Array 对象
4、代码演示：
//内置对象--Array数组
var a1 = new Array(); //定义一个空数组
var a2 = new Array(10); //定义一个长度为10数组（值：undefined）
var a3 = new Array(10,20,30); //定义一个指定数值的数组
console.log(a1.length);
console.log(a2.length);
console.log(a3.length);
var a4 = [10,20,30,40,50]; //快捷定义数组
//数组的遍历
for(var i=0; i<a4.length;i++){
console.log(i,"=>",a4[i]);
}
for(var i=a4.length-1; i>=0;i--){
console.log(i,"=>",a4[i]);
}
for(var i in a4){
console.log(i,"=>",a4[i]);
}
a4.forEach(function(v){
console.log(v);
});
//数组的方法：
console.log(a4.toString());
console.log(a4.join(":"));
var aa = [1,2,3];
console.log(aa.concat(4,5));
var b = [10,50,30,20,70,40];
console.log(b.join(":"));
console.log(b.sort().join(":"));
console.log(b.reverse().join(":"));
var aa = new Array(10,20,30);
console.log(aa.join(":"));
aa.push(50);
aa.push(40);
console.log(aa.join(":"));
aa.pop();
console.log(aa.join(":"));
//清空
console.log(b.join(":"));
b.length = 3;
console.log(b.join(":"));
b = [];
console.log(b.join(":"));
4、String, Number, Boolean
1、String 对象方法
| 方法 | 描述 |
|---|---|
| anchor() | 创建 HTML 锚。 |
| big() | 用大号字体显示字符串。 |
| blink() | 显示闪动字符串。 |
| bold() | 使用粗体显示字符串。 |
| charAt() | 返回在指定位置的字符。 |
| charCodeAt() | 返回在指定的位置的字符的 Unicode 编码。 |
| concat() | 连接字符串。 |
| fixed() | 以打字机文本显示字符串。 |
| fontcolor() | 使用指定的颜色来显示字符串。 |
| fontsize() | 使用指定的尺寸来显示字符串。 |
| fromCharCode() | 从字符编码创建一个字符串。 |
| indexOf() | 检索字符串。 |
| italics() | 使用斜体显示字符串。 |
| lastIndexOf() | 从后向前搜索字符串。 |
| link() | 将字符串显示为链接。 |
| localeCompare() | 用本地特定的顺序来比较两个字符串。 |
| match() | 找到一个或多个正则表达式的匹配。 |
| replace() | 替换与正则表达式匹配的子串。 |
| search() | 检索与正则表达式相匹配的值。 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分。 |
| small() | 使用小字号来显示字符串。 |
| split() | 把字符串分割为字符串数组。 |
| strike() | 使用删除线来显示字符串。 |
| sub() | 把字符串显示为下标。 |
| substr() | 从起始索引号提取字符串中指定数目的字符。 |
| substring() | 提取字符串中两个指定的索引号之间的字符。 |
| sup() | 把字符串显示为上标。 |
| toLocaleLowerCase() | 把字符串转换为小写。 |
| toLocaleUpperCase() | 把字符串转换为大写。 |
| toLowerCase() | 把字符串转换为小写。 |
| toUpperCase() | 把字符串转换为大写。 |
| toSource() | 代表对象的源代码。 |
| toString() | 返回字符串。 |
| valueOf() | 返回某个字符串对象的原始值。 |
需要注意的是，JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。
演示：
//内置对象--String字符串对象
var s1 = "ZhangSanFeng";
document.write(s1+"<br/>");
document.write(s1[5]+"<br/>");
document.write(s1.charAt(5)+"<br/>");
document.write(s1.substr(5,3)+"<br/>");
document.write(s1.substring(5,8)+"<br/>");
document.write("小写："+s1.toLowerCase()+"<br/>");
document.write("大写："+s1.toUpperCase()+"<br/>");
//子串查找
document.write(s1.indexOf("an")+"<br/>");
document.write(s1.lastIndexOf("an")+"<br/>");
//替换
document.write(s1.replace("SanFeng","WuJi")+"<br/>");
//全部替换
document.write("10,20,30,40".replace(/,/g,":")+"<br/>");
var str = "10:23:45:67:87:65";
console.log(str);
console.log(str.split(":"));
var s2 = " zhangsan ";
console.log("#"+s2+"#");
console.log("#"+s2.trim()+"#");
trim方法为去除左右两侧空白。
2、Number 对象方法
| 方法 | 描述 |
|---|---|
| toString | 把数字转换为字符串，使用指定的基数。 |
| toLocaleString | 把数字转换为字符串，使用本地数字格式顺序。 |
| toFixed | 把数字转换为字符串，结果的小数点后有指定位数的数字。 |
| toExponential | 把对象的值转换为指数计数法。 |
| toPrecision | 把数字格式化为指定的长度。 |
| valueOf | 返回一个 Number 对象的基本数字值。 |
3、Boolean 对象方法
| 方法 | 描述 |
|---|---|
| toSource() | 返回该对象的源代码。 |
| toString() | 把逻辑值转换为字符串，并返回结果。 |
| valueOf() | 返回 Boolean 对象的原始值。 |
当调用 toString() 方法将布尔值转换成字符串时（通常是由 JavaScript 隐式地调用），JavaScript 会内在地将这个布尔值转换成一个临时的 Boolean 对象，然后调用这个对象的 toString() 方法。
4、代码演示
//内置对象--基本保装类型
var s1 = 'zhangsan';
console.log(s1.substring(2,5))
//等价于
var s2 = new String("zhangsan");
console.log(s2.substring(2,5));
var num = 20.5678;
var num = new Number(20.5678);
console.log(num.toFixed(2));
5、Date
Date 对象用于处理日期和时间。
1、Date 对象方法
| 方法 | 描述 |
|---|---|
| Date() | 返回当日的日期和时间。 |
| getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
| getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
| getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
| getFullYear() | 从 Date 对象以四位数字返回年份。 |
| getYear() | 请使用 getFullYear() 方法代替。 |
| getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
| getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
| getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
| getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
| getTimezoneOffset() | 返回本地时间与格林威治标准时间 (GMT) 的分钟差。 |
| getUTCDate() | 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。 |
| getUTCDay() | 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。 |
| getUTCMonth() | 根据世界时从 Date 对象返回月份 (0 ~ 11)。 |
| getUTCFullYear() | 根据世界时从 Date 对象返回四位数的年份。 |
| getUTCHours() | 根据世界时返回 Date 对象的小时 (0 ~ 23)。 |
| getUTCMinutes() | 根据世界时返回 Date 对象的分钟 (0 ~ 59)。 |
| getUTCSeconds() | 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。 |
| getUTCMilliseconds() | 根据世界时返回 Date 对象的毫秒(0 ~ 999)。 |
| parse() | 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。 |
| setDate() | 设置 Date 对象中月的某一天 (1 ~ 31)。 |
| setMonth() | 设置 Date 对象中月份 (0 ~ 11)。 |
| setFullYear() | 设置 Date 对象中的年份（四位数字）。 |
| setYear() | 请使用 setFullYear() 方法代替。 |
| setHours() | 设置 Date 对象中的小时 (0 ~ 23)。 |
| setMinutes() | 设置 Date 对象中的分钟 (0 ~ 59)。 |
| setSeconds() | 设置 Date 对象中的秒钟 (0 ~ 59)。 |
| setMilliseconds() | 设置 Date 对象中的毫秒 (0 ~ 999)。 |
| setTime() | 以毫秒设置 Date 对象。 |
| setUTCDate() | 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。 |
| setUTCMonth() | 根据世界时设置 Date 对象中的月份 (0 ~ 11)。 |
| setUTCFullYear() | 根据世界时设置 Date 对象中的年份（四位数字）。 |
| setUTCHours() | 根据世界时设置 Date 对象中的小时 (0 ~ 23)。 |
| setUTCMinutes() | 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。 |
| setUTCSeconds() | 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。 |
| setUTCMilliseconds() | 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。 |
| toSource() | 返回该对象的源代码。 |
| toString() | 把 Date 对象转换为字符串。 |
| toTimeString() | 把 Date 对象的时间部分转换为字符串。 |
| toDateString() | 把 Date 对象的日期部分转换为字符串。 |
| toGMTString() | 请使用 toUTCString() 方法代替。 |
| toUTCString() | 根据世界时，把 Date 对象转换为字符串。 |
| toLocaleString() | 根据本地时间格式，把 Date 对象转换为字符串。 |
| toLocaleTimeString() | 根据本地时间格式，把 Date 对象的时间部分转换为字符串。 |
| toLocaleDateString() | 根据本地时间格式，把 Date 对象的日期部分转换为字符串。 |
| UTC() | 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。 |
| valueOf() | 返回 Date 对象的原始值。 |
2、代码演示
function formatDate(dd){
if(!dd instanceof Date){
return;
}
var y = dd.getFullYear(),
m = dd.getMonth()+1,
d = dd.getDate(),
hh = dd.getHours(),
mm = dd.getMinutes(),
ss = dd.getSeconds();
//判断单位数字前补零操作
hh = hh<10?'0'+hh:hh;
mm = mm<10?'0'+mm:mm;
ss = ss<10?'0'+ss:ss;
return y+"-"+m+"-"+d+" "+hh+":"+mm+":"+ss;
}
var dd = new Date();
//从1970年1月1日零时零分0秒至今的毫秒数
document.write("时间戳："+dd.valueOf());
document.write("<h2>"+formatDate(dd)+"</h2>");
6、Math
1、Math 对象方法
| 方法 | 描述 |
|---|---|
| abs(x) | 返回数的绝对值。 |
| acos(x) | 返回数的反余弦值。 |
| asin(x) | 返回数的反正弦值。 |
| atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |
| atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。 |
| ceil(x) | 对数进行上舍入。 |
| cos(x) | 返回数的余弦。 |
| exp(x) | 返回 e 的指数。 |
| floor(x) | 对数进行下舍入。 |
| log(x) | 返回数的自然对数（底为e）。 |
| max(x,y) | 返回 x 和 y 中的最高值。 |
| min(x,y) | 返回 x 和 y 中的最低值。 |
| pow(x,y) | 返回 x 的 y 次幂。 |
| random() | 返回 0 ~ 1 之间的随机数。 |
| round(x) | 把数四舍五入为最接近的整数。 |
| sin(x) | 返回数的正弦。 |
| sqrt(x) | 返回数的平方根。 |
| tan(x) | 返回角的正切。 |
| toSource() | 返回该对象的源代码。 |
| valueOf() | 返回 Math 对象的原始值。 |
2、代码演示
//内置对象--Math对象
console.log(Math.abs(-20));
console.log(Math.ceil(10.000000001)); //进一取整
console.log(Math.floor(10.9999999)); //舍去取整
console.log(Math.round(10.5)); //四舍五入取整
console.log(Math.max(10,20)); //最大
console.log(Math.min(10,20)); //最小
console.log(Math.random()) //0~1的随机数
console.log(Math.ceil(Math.random()*1000000)%10+1) //1~10的随机数
7、事件
1、Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
2、事件句柄 (Event Handlers)
HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。
| 属性 | 此事件发生在何时… |
|---|---|
| onabort | 图像的加载被中断。 |
| onblur | 元素失去焦点。 |
| onchange | 域的内容被改变。 |
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onerror | 在加载文档或图像时发生错误。 |
| onfocus | 元素获得焦点。 |
| onkeydown | 某个键盘按键被按下。 |
| onkeypress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
| onload | 一张页面或一幅图像完成加载。 |
| onmousedown | 鼠标按钮被按下。 |
| onmousemove | 鼠标被移动。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseup | 鼠标按键被松开。 |
| onreset | 重置按钮被点击。 |
| onresize | 窗口或框架被重新调整大小。 |
| onselect | 文本被选中。 |
| onsubmit | 确认按钮被点击。 |
| onunload | 用户退出页面。 |
**需要注意的是onload事件。**我们之前的js脚本都是写在body之后，这是因为浏览器的解析方式是从上到下，如果写在上面，会不起效果，因为下边的具体内容还没有加载，它根本就获取不到元素。所以就需要onload来解决，即等待页面加载完毕再执行。
3、鼠标 / 键盘属性
| 属性 | 描述 |
|---|---|
| altKey | 返回当事件被触发时，“ALT” 是否被按下。 |
| button | 返回当事件被触发时，哪个鼠标按钮被点击。 |
| clientX | 返回当事件被触发时，鼠标指针的水平坐标。 |
| clientY | 返回当事件被触发时，鼠标指针的垂直坐标。 |
| ctrlKey | 返回当事件被触发时，“CTRL” 键是否被按下。 |
| metaKey | 返回当事件被触发时，“meta” 键是否被按下。 |
| relatedTarget | 返回与事件的目标节点相关的节点。 |
| screenX | 返回当某个事件被触发时，鼠标指针的水平坐标。 |
| screenY | 返回当某个事件被触发时，鼠标指针的垂直坐标。 |
| shiftKey | 返回当事件被触发时，“SHIFT” 键是否被按下。 |
4、Timing 事件
window 对象允许以指定的时间间隔执行代码。
这些时间间隔称为定时事件。
通过 JavaScript 使用的有两个关键的方法：
setTimeout(function, milliseconds)在等待指定的毫秒数后执行函数。setInterval(function, milliseconds)等同于 setTimeout()，但持续重复执行该函数。
setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。
1、setTimeout() 方法
window.setTimeout(function, milliseconds);
window.setTimeout() 方法可以不带 window 前缀来编写。
第一个参数是要执行的函数。
第二个参数指示执行之前的毫秒数。
2、如何停止执行？
clearTimeout() 方法停止执行 setTimeout() 中规定的函数。
window.clearTimeout(timeoutVariable)
window.clearTimeout() 方法可以不带 window 前缀来写。
clearTimeout() 使用从 setTimeout() 返回的变量：
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
3、setInterval() 方法
setInterval() 方法在每个给定的时间间隔重复给定的函数。
window.setInterval(function, milliseconds);
window.setInterval() 方法可以不带 window 前缀来写。
第一个参数是要执行的函数。
第二个参数每个执行之间的时间间隔的长度。
4、如何停止执行？
clearInterval() 方法停止 setInterval() 方法中指定的函数的执行。
window.clearInterval(timerVariable)
window.clearInterval() 方法可以不带 window 前缀来写。
clearInterval() 方法使用从 setInterval() 返回的变量：
myVar = setInterval(function, milliseconds);
clearInterval(myVar);
5、事件绑定
- 在元素中添加事件
- 在js中获取元素再指定事件
两种方式的演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
</head>
<body>
<h1>JavaScript语言实例--事件处理(事件绑定方式)</h1>
<button onclick="fun()">按钮1</button>
<button id="bid">按钮2</button>
</body>
<script>
function fun(){
console.log("按钮1被点击了");
}
document.getElementById("bid").onclick = function(){
console.log("按钮2被点击了");
}
</script>
</html>
6、简单计算器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>JavaScript语言实例--简单计算器</h1>
<form action="" name="myform" method="get">
数值1：<input type="text" name="num1" size="10"/><br/><br/>
数值2：<input type="text" name="num2" size="10"/><br/><br/>
结 果：<input type="text" name="res" readonly style="border:0px;" size="10"/><br/><br/>
<input type="button" onclick="doFun(1)" value="加"/>
<input type="button" onclick="doFun(2)" value="减"/>
<input type="button" onclick="doFun(3)" value="乘"/>
<input type="button" onclick="doFun(4)" value="除"/>
</form>
</body>
<script>
//处理函数
function doFun(c){
var m1 = parseInt(document.myform.num1.value);
var m2 = parseInt(document.myform.num2.value);
//console.log(m1,m2);
switch(c){
case 1: var res = m1+"+"+m2+"="+(m1+m2); break;
case 2: var res = m1+"-"+m2+"="+(m1-m2); break;
case 3: var res = m1+"*"+m2+"="+(m1*m2); break;
case 4: var res = m1+"/"+m2+"="+(m1/m2); break;
}
//将结果放置到第三个输入框中
document.myform.res.value = res;
}
</script>
</html>
readonly属性: 对输入框只读属性
7、简单操作元素标签案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>JavaScript语言实例--js操作元素标签属性（放大和缩小）</h1>
<button onclick="dofun(1)">放大</button>
<button onclick="dofun(2)">缩小</button>
<button onclick="dofun(3)">隐藏</button>
<button onclick="dofun(4)">显示</button>
<br/><br/>
<div style="width:200px;height:200px;background-color:blue;" id="did"></div>
</body>
<script>
var width=200,height=200;
var did = document.getElementById("did");
function dofun(m){
switch(m){
case 1:
width += 10;
height += 10;
did.style.width = width+"px";
did.style.height = height+"px";
break;
case 2:
width -= 10;
height -= 10;
did.style.width = width+"px";
did.style.height = height+"px";
break;
case 3:
did.style.display = "none";
break;
case 4:
did.style.display = "block";
break;
}
}
</script>
</html>
8、鼠标右击菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
<style>
ul,li{margin:0px;padding:0px;}
ul{list-style:none;width:100px;text-align:center;position:absolute;display:none;}
ul li{height:30px;line-height:30px;margin-top:4px;background-color:#ddd;}
ul li:hover{background-color:#fc0;}
</style>
</head>
<body>
<h1>JavaScript语言实例--contextmenu鼠标右击事件</h1>
<ul id="uid">
<li>剪切</li>
<li>复制</li>
<li>粘贴</li>
</ul>
</body>
<script>
document.oncontextmenu = function(ent){
//获取兼容的事件对象
var event = ent || window.event;
//获取鼠标在网页中的点击位置
var x = event.clientX;
var y = event.clientY;
console.log(x,y);
var uid = document.getElementById("uid");
uid.style.top = y+"px";
uid.style.left = x+"px";
uid.style.display = "block";
return false;
}
</script>
</html>
9、图片自动播放效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
<style>
div,img,ul,li{margin:0px;padding:0px;}
#did{width:384px;height:240px;}
#did img{display:none;}
#did img:first-child{display:block}
</style>
</head>
<body>
<h1>JavaScript语言实例--mouse鼠标移入和移出事件</h1>
<div id="did" onmouseover="doStop()" onmouseout="doStart()">
<img src="./images/11.jpg" width="384"/>
<img src="./images/22.jpg" width="384"/>
<img src="./images/33.jpg" width="384"/>
<img src="./images/44.jpg" width="384"/>
</div>
</body>
<script>
var m = 1;
var mytime = null;
//定义函数展示对应的图片
function show(x){
var mlist = document.getElementById("did").getElementsByTagName("img");
for(var i=0; i<mlist.length; i++){
if(x == i+1){
mlist[i].style.display = "block";
}else{
mlist[i].style.display = "none";
}
}
}
//开启定时轮播图片
function doStart(){
if(mytime == null){
mytime = setInterval(function(){
m++;
show(m);
if(m>=4){
m = 0;
}
}, 1000);
}
}
//停止轮播图片
function doStop(){
if(mytime != null){
clearInterval(mytime);
mytime = null;
}
}
doStart();
</script>
</html>
10、鼠标移入小图切换大图效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
<style>
div,img,ul,li{margin:0px;padding:0px;}
#did{width:384px;height:240px;}
#list img{width:85px;border:2px solid #fff;margin-right:2px;}
#list img:hover{border:2px solid red;}
</style>
</head>
<body>
<h1>JavaScript语言实例--onmouseover鼠标移入事件</h1>
<div id="did">
<img id="mid" src="./images/11.jpg" width="384"/>
</div>
<div id="list">
<img src="./images/11.jpg"/>
<img src="./images/22.jpg"/>
<img src="./images/33.jpg"/>
<img src="./images/44.jpg"/>
</div>
</body>
<script>
//获取所有小图列表
var mlist = document.getElementById("list").getElementsByTagName("img");
//遍历这些图片
for(var i=0; i<mlist.length; i++){
mlist[i].onmouseover = function(){
document.getElementById("mid").src = this.src;
}
}
</script>
</html>
11、图片的放大镜效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
<style>
div,img,ul,li{margin:0px;padding:0px;}
#did{width:300px;height:300px;overflow:hidden;display:none;position:absolute;}
</style>
</head>
<body>
<h1>JavaScript语言实例--图片的放大镜效果</h1>
<br/><br/><br/>
<img id="mid" src="./images/33.jpg" width="384" height="240"/>
<div id="did">
<img src="./images/33.jpg"/>
</div>
</body>
<script>
//获取被放大图片和放大镜图片对象
var mid = document.getElementById("mid");
var did = document.getElementById("did");
//为图片添加鼠标移入和移除事件
mid.onmouseover = function(){
//对放大镜进行定位
did.style.top = this.offsetTop+"px";
did.style.left = this.offsetLeft+this.offsetWidth+10+"px";
did.style.display = "block";
}
mid.onmouseout = function(){
did.style.display = "none";
}
//添加鼠标移动事件
mid.onmousemove = function(ent){
//获取兼容的鼠标事件对象
var event = ent || window.event;
//获取鼠标在图片上的位置
var x = event.clientX - this.offsetLeft;
var y = event.clientY -this.offsetTop;
//定位放大镜位置
did.scrollTop = y*5-150;
did.scrollLeft = x*5-150;
}
</script>
</html>
12、拖动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
<style>
div{margin:0px;padding:0px;}
#did{width:200px;height:200px;background-color:#ddd;cursor:move;position:absolute;}
</style>
</head>
<body>
<h1>JavaScript语言实例--拖动效果</h1>
<div id="did"></div>
</body>
<script>
//获取div层对象
var did = document.getElementById("did");
//绑定鼠标按下事件
did.onmousedown = function(ent){
//获取兼容的事件对象
var event = ent || window.event;
//获取鼠标在div层上的位置
var x = event.clientX-this.offsetLeft;
var y = event.clientY-this.offsetTop;
this.style.backgroundColor = "blue";
//绑定鼠标移动事件
document.onmousemove = function(e){
var myevent = e || window.event;
//定位
did.style.top = myevent.clientY-y+"px";
did.style.left = myevent.clientX-x+"px";
}
}
//绑定鼠标松开事件
did.onmouseup = function(){
this.style.backgroundColor = "#ddd";
//取消移动事件
document.onmousemove = null;
}
</script>
</html>
13、表单提交提示案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
</head>
<body>
<h1 id="hid">JavaScript语言实例--表单事件</h1>
<form action="js10.html" name="myform" method="post" onsubmit="return doSubmit()">
账号：<input type="text" name="uname" onblur="checkUname()"/><br/><br/>
密码：<input type="password" name="upass" onblur="checkUpass()" /><br/><br/>
邮箱：<input type="text" name="email"/><br/><br/>
<input type="submit" value="提交"/>
</form>
</body>
<script>
//表单提交事件处理程序
function doSubmit(){
return checkUname() && checkUpass();
}
//验证账号
function checkUname(){
var name = document.myform.uname.value;
if(name.length<=0){
alert("账号不可以为空");
return false;
}
return true;
}
//验证密码
function checkUpass(){
var pass = document.myform.upass.value;
if(pass.length<6){
alert("密码必须大于等于6位");
return false;
}
return true;
}
</script>
</html>
14、自适应下拉选项案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
</head>
<body>
<h1 id="hid">JavaScript语言实例--change事件</h1>
<select name="sid" id="sid">
<option value="">-请选择-</option>
<option value="1">北京</option>
<option value="2">河北</option>
<option value="3">天津</option>
<option value="4">河南</option>
<option value="5">山西</option>
</select>
<select id="cid"></select>
</body>
<script>
var data = new Array();
data[1] = ["海淀区","朝阳区","丰台区","昌平区"];
data[2] = ["石家庄","保定","邯郸","邢台"];
data[3] = ["河东区","河西区","河北区","南开区"];
data[4] = ["郑州","洛阳","开封","驻马店"];
data[5] = ["太原","大同","吕梁","运城"];
//获取两个下拉框元素对象
var sid = document.getElementById("sid");
var cid = document.getElementById("cid");
//绑定change事件
sid.onchange = function(){
//获取下拉框中的值
var v = this.value;
cid.length = 0; //删除cid的下拉项
//判断并循环对应城市信息
if(v != ""){
for(var i=0; i<data[v].length; i++){
//创建一个下拉项并添加到cid下拉框中
cid.add(new Option(data[v][i],i));
}
}
}
</script>
</html>
15、滚动条事件案例
当我们打开淘宝，京东等电商网站的时候，会发现随着右侧竖向滚动条的滚动，它会加载新的东西，这就是通过滚动条事件触发的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言实例</title>
</head>
<body>
<h1 id="hid">JavaScript语言实例--滚动条事件</h1>
<div id="aid" style="height:500px;width:700px;background-color:#ddd;"></div>
<div id="bid" style="height:500px;width:700px;background-color:#eee;"></div>
</body>
<script>
window.onscroll = function(){
var scrollTop = 0;
if(document.documentElement && document.documentElement.scrollTop){
scrollTop = document.documentElement.scrollTop;
}else if(document.body){
scrollTop = document.body.scrollTop;
}
document.getElementById("bid").innerHTML = scrollTop;
}
</script>
</html>
8、BOM
浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话
1、window
所有浏览器都支持 window 对象。它代表浏览器的窗口。
所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至（HTML DOM 的）document 对象也是 window 对象属性：
window.document.getElementById(“header”);
等同于：
document.getElementById(“header”);
Window 对象属性
| 属性 | 描述 |
|---|---|
| closed | 返回窗口是否已被关闭。 |
| defaultStatus | 设置或返回窗口状态栏中的默认文本。 |
| document | 对 Document 对象的只读引用。请参阅 Document 对象。 |
| history | 对 History 对象的只读引用。请参数 History 对象。 |
| innerheight | 返回窗口的文档显示区的高度。 |
| innerwidth | 返回窗口的文档显示区的宽度。 |
| length | 设置或返回窗口中的框架数量。 |
| location | 用于窗口或框架的 Location 对象。请参阅 Location 对象。 |
| name | 设置或返回窗口的名称。 |
| Navigator | 对 Navigator 对象的只读引用。请参数 Navigator 对象。 |
| opener | 返回对创建此窗口的窗口的引用。 |
| outerheight | 返回窗口的外部高度。 |
| outerwidth | 返回窗口的外部宽度。 |
| pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 |
| pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 |
| parent | 返回父窗口。 |
| Screen | 对 Screen 对象的只读引用。请参数 Screen 对象。 |
| self | 返回对当前窗口的引用。等价于 Window 属性。 |
| status | 设置窗口状态栏的文本。 |
| top | 返回最顶层的先辈窗口。 |
| window | window 属性等价于 self 属性，它包含了对窗口自身的引用。 |
- screenLeft
- screenTop
- screenX
- screenY
| 只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。 |
Window 对象方法
| 方法 | 描述 |
|---|---|
| alert() | 显示带有一段消息和一个确认按钮的警告框。 |
| blur() | 把键盘焦点从顶层窗口移开。 |
| clearInterval() | 取消由 setInterval() 设置的 timeout。 |
| clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
| close() | 关闭浏览器窗口。 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
| createPopup() | 创建一个 pop-up 窗口。 |
| focus() | 把键盘焦点给予一个窗口。 |
| moveBy() | 可相对窗口的当前坐标把它移动指定的像素。 |
| moveTo() | 把窗口的左上角移动到一个指定的坐标。 |
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
| print() | 打印当前窗口的内容。 |
| prompt() | 显示可提示用户输入的对话框。 |
| resizeBy() | 按照指定的像素调整窗口的大小。 |
| resizeTo() | 把窗口的大小调整到指定的宽度和高度。 |
| scrollBy() | 按照指定的像素值来滚动内容。 |
| scrollTo() | 把内容滚动到指定的坐标。 |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言</title>
</head>
<body>
<h1>JavaScript中的BOM--window</h1>
<iframe src="js02.html" width="500" height="500"></iframe>
<button onclick="window.open('js02.html','','width=200,height=100');">打开一个新窗口</button>
</body>
<script>
//document.write(window.frames.length);
//window.document.write("hello world!");
window.alert("ok");
b = window.confirm("确定要删除吗？");
if(b){
alert("yes");
}else{
alert("no");
}
var mstr = window.prompt("请输入你的邮箱？");
alert(mstr);
</script>
</html>
2、Navigator
Navigator 对象包含有关浏览器的信息。
Navigator 对象属性
| 属性 | 描述 |
|---|---|
| appCodeName | 返回浏览器的代码名。 |
| appMinorVersion | 返回浏览器的次级版本。 |
| appName | 返回浏览器的名称。 |
| appVersion | 返回浏览器的平台和版本信息。 |
| browserLanguage | 返回当前浏览器的语言。 |
| cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值。 |
| cpuClass | 返回浏览器系统的 CPU 等级。 |
| onLine | 返回指明系统是否处于脱机模式的布尔值。 |
| platform | 返回运行浏览器的操作系统平台。 |
| systemLanguage | 返回 OS 使用的默认语言。 |
| userAgent | 返回由客户机发送服务器的 user-agent 头部的值。 |
| userLanguage | 返回 OS 的自然语言设置。 |
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言</title>
</head>
<body>
<h1>JavaScript中的BOM--navigator浏览器</h1>
</body>
<script type="text/javascript">
with(document) {
write ("你的浏览器信息：<ul>");
write ("<li>代码："+navigator.appCodeName+"</li>");
write ("<li>名称："+navigator.appName+"</li>");
write ("<li>版本："+navigator.appVersion+"</li>");
write ("<li>语言："+navigator.language+"</li>");
write ("<li>编译平台："+navigator.platform+"</li>");
write ("<li>用户表头："+navigator.userAgent+"</li>");
write ("</ul>");
}
//判断当前浏览器
var explorer =navigator.userAgent ;
//ie
if (explorer.indexOf("MSIE") >= 0) {
alert("ie");
}
//firefox
else if (explorer.indexOf("Firefox") >= 0) {
alert("Firefox");
}
//Chrome
else if(explorer.indexOf("Chrome") >= 0){
alert("Chrome");
}
//Opera
else if(explorer.indexOf("Opera") >= 0){
alert("Opera");
}
//Safari
else if(explorer.indexOf("Safari") >= 0){
alert("Safari");
}
//Netscape
else if(explorer.indexOf("Netscape")>= 0) {
alert('Netscape');
}
</script>
</html>
3、Screen
Screen 对象包含有关客户端显示屏幕的信息。
Screen 对象属性
| 属性 | 描述 |
|---|---|
| availHeight | 返回显示屏幕的高度 (除 Windows 任务栏之外)。 |
| availWidth | 返回显示屏幕的宽度 (除 Windows 任务栏之外)。 |
| bufferDepth | 设置或返回调色板的比特深度。 |
| colorDepth | 返回目标设备或缓冲器上的调色板的比特深度。 |
| deviceXDPI | 返回显示屏幕的每英寸水平点数。 |
| deviceYDPI | 返回显示屏幕的每英寸垂直点数。 |
| fontSmoothingEnabled | 返回用户是否在显示控制面板中启用了字体平滑。 |
| height | 返回显示屏幕的高度。 |
| logicalXDPI | 返回显示屏幕每英寸的水平方向的常规点数。 |
| logicalYDPI | 返回显示屏幕每英寸的垂直方向的常规点数。 |
| pixelDepth | 返回显示屏幕的颜色分辨率（比特每像素）。 |
| updateInterval | 设置或返回屏幕的刷新率。 |
| width | 返回显示器屏幕的宽度。 |
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言</title>
</head>
<body>
<h1>JavaScript中的BOM--screen对象</h1>
<a href="js04.html">js04.html</a><br/><br/>
</body>
<script>
document.write( "屏幕宽度："+screen.width+"px
" );
document.write( "屏幕高度："+screen.height+"px
" );
document.write( "屏幕可用宽度："+screen.availWidth+"px
" );
document.write( "屏幕可用高度："+screen.availHeight+"px<br/>" );
document.write( "宽度："+window.innerWidth+"px
" );
document.write( "高度："+window.innerHeight+"px
" );
</script>
</html>
4、History
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
History 对象属性
| 属性 | 描述 |
|---|---|
| length | 返回浏览器历史列表中的 URL 数量。 |
History 对象方法
| 方法 | 描述 |
|---|---|
| back() | 加载 history 列表中的前一个 URL。 |
| forward() | 加载 history 列表中的下一个 URL。 |
| go() | 加载 history 列表中的某个具体页面。 |
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言</title>
</head>
<body>
<h1>JavaScript中的BOM--history对象</h1>
<button onclick="window.history.back();">后退一步</button>
<button onclick="window.history.go(-1);">后退一步</button>
<button onclick="window.history.go(-2);">后退二步</button><br/><br/>
<button onclick="window.history.forward();">前进一步</button>
<button onclick="window.history.go(1);">前进一步</button>
<button onclick="window.history.go(2);">前进二步</button><br/><br/>
<a href="js03.html">js03.html</a><br/><br/>
</body>
<script>
</script>
</html>
5、Location
Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
Location 对象属性
| 属性 | 描述 |
|---|---|
| hash | 设置或返回从井号 (#) 开始的 URL（锚）。 |
| host | 设置或返回主机名和当前 URL 的端口号。 |
| hostname | 设置或返回当前 URL 的主机名。 |
| href | 设置或返回完整的 URL。 |
| pathname | 设置或返回当前 URL 的路径部分。 |
| port | 设置或返回当前 URL 的端口号。 |
| protocol | 设置或返回当前 URL 的协议。 |
| search | 设置或返回从问号 (?) 开始的 URL（查询部分）。 |
Location 对象方法
| 属性 | 描述 |
|---|---|
| assign() | 加载新的文档。 |
| reload() | 重新加载当前文档。 |
| replace() | 用新的文档替换当前文档。 |
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript语言</title>
</head>
<body>
<h1>JavaScript中的BOM--location对象</h1>
<button onclick="window.location.href='http://www.baidu.com'">点击跳转到百度</button>
<button onclick="window.location.reload()">刷新</button>
<script type="text/javascript">
document.write("<br/>当前地址："+window.location.href);
</script>
</body>
<script>
</script>
</html>
9、HTML DOM
1、什么是 DOM？
DOM 是一项 W3C (World Wide Web Consortium) 标准。
DOM 定义了访问文档的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
- Core DOM - 所有文档类型的标准模型
- XML DOM - XML 文档的标准模型
- HTML DOM - HTML 文档的标准模型
2、什么是 HTML DOM？
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：
- 作为对象的 HTML 元素
- 所有 HTML 元素的属性
- 访问所有 HTML 元素的方法
- 所有 HTML 元素的事件
换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
HTML DOM（文档对象模型）：
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被结构化为对象树：
对象的 HTML DOM 树：
通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：
- JavaScript 能改变页面中的所有 HTML 元素
- JavaScript 能改变页面中的所有 HTML 属性
- JavaScript 能改变页面中的所有 CSS 样式
- JavaScript 能删除已有的 HTML 元素和属性
- JavaScript 能添加新的 HTML 元素和属性
- JavaScript 能对页面中所有已有的 HTML 事件作出反应
- JavaScript 能在页面中创建新的 HTML 事件
3、DOM 节点
在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。
DOM 节点：
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
节点父、子和同胞
节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
4、查找 HTML 元素
| 方法 | 描述 |
|---|---|
| document.getElementById(id) | 通过元素 id 来查找元素 |
| document.getElementsByTagName(name) | 通过标签名来查找元素 |
| document.getElementsByClassName(name) | 通过类名来查找元素 |
5、改变 HTML 元素
| 方法 | 描述 |
|---|---|
| element.innerHTML = new html content | 改变元素的 inner HTML |
| element.attribute = new value | 改变 HTML 元素的属性值 |
| element.setAttribute(attribute, value) | 改变 HTML 元素的属性值 |
| element.style.property = new style | 改变 HTML 元素的样式 |
6、添加和删除元素
| 方法 | 描述 |
|---|---|
| document.createElement(element) | 创建 HTML 元素 |
| document.removeChild(element) | 删除 HTML 元素 |
| document.appendChild(element) | 添加 HTML 元素 |
| document.replaceChild(element) | 替换 HTML 元素 |
| document.write(text) | 写入 HTML 输出流 |
7、添加事件处理程序
| 方法 | 描述 |
|---|---|
| document.getElementById(id).onclick = function(){code} | 向 onclick 事件添加事件处理程序 |
8、查找 HTML 对象
首个 HTML DOM Level 1 (1998)，定义了 11 个 HTML 对象、对象集合和属性。它们在 HTML5 中仍然有效。
后来，在 HTML DOM Level 3，加入了更多对象、集合和属性。
| 属性 | 描述 | DOM |
|---|---|---|
| document.anchors | 返回拥有 name 属性的所有 元素。 | 1 |
| document.applets | 返回所有 <applet> 元素（HTML5 不建议使用） | 1 |
| document.baseURI | 返回文档的绝对基准 URI | 3 |
| document.body | 返回 <body> 元素 | 1 |
| document.cookie | 返回文档的 cookie | 1 |
| document.doctype | 返回文档的 doctype | 3 |
| document.documentElement | 返回 <html> 元素 | 3 |
| document.documentMode | 返回浏览器使用的模式 | 3 |
| document.documentURI | 返回文档的 URI | 3 |
| document.domain | 返回文档服务器的域名 | 1 |
| document.domConfig | 废弃。返回 DOM 配置 | 3 |
| document.embeds | 返回所有 <embed> 元素 | 3 |
| document.forms | 返回所有 <form> 元素 | 1 |
| document.head | 返回 <head> 元素 | 3 |
| document.images | 返回所有 <img> 元素 | 1 |
| document.implementation | 返回 DOM 实现 | 3 |
| document.inputEncoding | 返回文档的编码（字符集） | 3 |
| document.lastModified | 返回文档更新的日期和时间 | 3 |
| document.links | 返回拥有 href 属性的所有 <area> 和 <a> 元素 | 1 |
| document.readyState | 返回文档的（加载）状态 | 3 |
| document.referrer | 返回引用的 URI（链接文档） | 1 |
| document.scripts | 返回所有 <script> 元素 | 3 |
| document.strictErrorChecking | 返回是否强制执行错误检查 | 3 |
| document.title | 返回 <title> 元素 | 1 |
| document.URL | 返回文档的完整 URL | 1 |
9、DOM属性操作
属性是节点（HTML 元素）的值，您能够获取或设置。
1、innerHTML 属性
获取元素内容的最简单方法是使用 innerHTML 属性。
innerHTML 属性对于获取或替换 HTML 元素的内容很有用。
2、nodeName 属性
nodeName 属性规定节点的名称。
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
**注释：**nodeName 始终包含 HTML 元素的大写字母标签名。
3、nodeValue 属性
nodeValue 属性规定节点的值。
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
4、nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有：
| 元素类型 | NodeType |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
5、代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的DOM</title>
</head>
<body>
<!-- 注释说明 -->
<h1>JavaScript语言中HTML DOM</h1>
<h3 id ="hid">我们重点学习HTML DOM的什么操作：</h3>
<ul id="uid">
<li>如何改变 HTML 元素的内容</li>
<li>如何改变 HTML 元素的样式（CSS）</li>
<li>如何对 HTML DOM 事件作出反应</li>
<li>如何添加和删除 HTML 元素</li>
</ul>
</body>
<script>
//获取h3元素节点对象
var hid = document.getElementById("hid");
//输出当前节点的名字、值和类型
console.log(hid.nodeName); //H3
console.log(hid.nodeValue); //null
console.log(hid.nodeType); //1
//获取当前节点对象的第一个子节点的值和类型
console.log(hid.childNodes[0].nodeValue); //就是内容
console.log(hid.childNodes[0].nodeType); //3
</script>
</html>
10、各种DOM对象
详见https://www.w3school.com.cn/jsref/index.asp HTML DOM 对象参考手册。
这里给出一个select的操作代码和table的操作代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的DOM</title>
<style>
select{width:100px;height:200px;border:1px solid #ddd;float:left;}
div{width:100px;height:200px;float:left;text-align:center;padding-top:50px;}
</style>
</head>
<body>
<h1>JavaScript语言中HTML DOM 操作-select对象</h1>
<select id="sid1" size="10" multiple>
<option value="0">邓丽君</option>
<option value="1">张国荣</option>
<option value="2">梅艳芳</option>
<option value="3">黄家驹</option>
<option value="4">迈克尔.杰克逊</option>
<option value="5">姚贝娜</option>
<option value="6">张雨生</option>
</select>
<div>
<button onclick="doMove('sid1','sid2')">>></button>
<br/><br/><br/><br/>
<button onclick="doMove('sid2','sid1')"><<</button>
</div>
<select id="sid2" size="10" multiple></select>
</body>
<script>
function doMove(d1,d2){
//分别获取两个下拉框的元素节点对象
var select1 = document.getElementById(d1);
var select2 = document.getElementById(d2);
//获取第一个下拉框中所有的下拉项
var olist = select1.options;
//遍历
for(var i=0; i<olist.length; i++){
//console.log(olist[i].value);
//判断当前项是否被选中
if(olist[i].selected){
olist[i].selected = false; //取消选中
var ob = olist[i];
select1.remove(i);
select2.add(ob);
i--;
}
}
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的DOM</title>
<style>
select,option,div,button{margin:0px;padding:0px;}
#lid,#rid,div{
width:80px;
height:260px;
float:left;
}
div{
text-align:center;
padding-top:60px;
}
</style>
</head>
<body>
<h1>JavaScript语言中HTML DOM 操作-table对象</h1>
<table id="tid" width="500" border="1">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td><button onclick="dodel(this)">删除</button></td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>女</td>
<td>21</td>
<td><button onclick="dodel(this)">删除</button></td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>男</td>
<td>22</td>
<td><button onclick="dodel(this)">删除</button></td>
</tr>
</tbody>
</table>
<br/><br/><br/>
<h2>添加学生信息</h2>
<form action="#" name="myform" onsubmit="return doAdd()">
学号：<input type="text" name="sno"/><br/><br/>
姓名：<input type="text" name="name"/><br/><br/>
性别：<input type="text" name="sex"/><br/><br/>
年龄：<input type="text" name="age"/><br/><br/>
<input type="submit" value="添加"/>
</form>
</body>
<script>
//执行数据删除操作
function dodel(bt){
//获取当前表格元素节点对象
var tab = document.getElementById("tid");
tab.deleteRow(bt.parentNode.parentNode.rowIndex);
}
function doAdd(){
//获取输入框中的内容
var sno = document.myform.sno.value;
var name = document.myform.name.value;
var sex = document.myform.sex.value;
var age = document.myform.age.value;
//获取当前表格对象并申请添加一行
var row = document.getElementById("tid").insertRow();
//为当前行添加一个个字段信息
row.insertCell(0).innerHTML = sno;
row.insertCell(1).innerHTML = name;
row.insertCell(2).innerHTML = sex;
row.insertCell(3).innerHTML = age;
row.insertCell(4).innerHTML = '<button οnclick="dodel(this)">删除</button>';
//清空form表单
document.myform.reset();
return false;
}
</script>
</html>
10、XML DOM
XML 文档对象模型定义访问和操作XML文档的标准方法。
DOM 将 XML 文档作为一个树形结构，而树叶被定义为节点。
1、什么是 XML DOM?
XML DOM 是：
- 用于 XML 的标准对象模型
- 用于 XML 的标准编程接口
- 中立于平台和语言
- W3C 的标准
XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）。
换句话说：
XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。
2、节点
根据 DOM，XML 文档中的每个成分都是一个节点。
DOM 是这样规定的：
- 整个文档是一个文档节点
- 每个 XML 标签是一个元素节点
- 包含在 XML 元素中的文本是文本节点
- 每一个 XML 属性是一个属性节点
- 注释属于注释节点
3、XML DOM 属性
一些典型的 DOM 属性：
- x.nodeName - x 的名称
- x.nodeValue - x 的值
- x.parentNode - x 的父节点
- x.childNodes - x 的子节点
- x.attributes - x 的属性节点
**注释：**在上面的列表中，x 是一个节点对象。
nodeType 属性：
nodeType 属性规定节点的类型。
nodeType 是只读的。
最重要的节点类型是：
| 元素类型 | 节点类型 |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
4、XML DOM 方法
- x.getElementsByTagName(name) - 获取带有指定标签名称的所有元素
- x.appendChild(node) - 向 x 插入子节点
- x.removeChild(node) - 从 x 删除子节点
**注释：**在上面的列表中，x 是一个节点对象。
5、节点操作
替换元素节点：replaceChild() 方法用于替换节点。
cloneNode() 方法创建指定节点的副本。
cloneNode() 方法有一个参数（true 或 false）。该参数指示被复制的节点是否包括原节点的所有属性和子节点。
其他更多见XML DOM
6、案例重现
XML操作select：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
<style>
select{width:100px;height:200px;border:1px solid #ddd;float:left;}
div{width:100px;height:200px;float:left;text-align:center;padding-top:50px;}
</style>
</head>
<body>
<h1>XML DOM 操作-select对象</h1>
<select id="sid1" size="10" multiple>
<option value="0">邓丽君</option>
<option value="1">张国荣</option>
<option value="2">梅艳芳</option>
<option value="3">黄家驹</option>
<option value="4">迈克尔.杰克逊</option>
<option value="5">姚贝娜</option>
<option value="6">张雨生</option>
</select>
<div>
<button onclick="doMove('sid1','sid2')">>></button>
<br/><br/><br/><br/>
<button onclick="doMove('sid2','sid1')"><<</button>
</div>
<select id="sid2" size="10" multiple></select>
</body>
<script>
function doMove(d1,d2){
//获取对应的下拉框节点对象
var select1 = document.getElementById(d1);
var select2 = document.getElementById(d2);
//获取第一个下拉框中的所有option下拉项节点对象
var list = select1.getElementsByTagName("option");
//遍历并判断是否选中
for(var i=0; i<list.length; i++){
if(list[i].selected){
list[i].selected = false;
select2.appendChild(list[i]); //使用XML DOM移动下拉项
i--;
}
}
}
</script>
</html>
操作table：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
<style>
select,option,div,button{margin:0px;padding:0px;}
#lid,#rid,div{
width:80px;
height:260px;
float:left;
}
div{
text-align:center;
padding-top:60px;
}
</style>
</head>
<body>
<h1>JavaScript语言中XML DOM 操作-table对象</h1>
<table id="tid" width="500" border="1">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td><button onclick="dodel(this)">删除</button></td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>女</td>
<td>21</td>
<td><button onclick="dodel(this)">删除</button></td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>男</td>
<td>22</td>
<td><button onclick="dodel(this)">删除</button></td>
</tr>
</tbody>
</table>
<br/><br/><br/>
<h2>添加学生信息</h2>
<form action="#" name="myform" onsubmit="return doAdd()">
学号：<input type="text" name="sno"/><br/><br/>
姓名：<input type="text" name="name"/><br/><br/>
性别：<input type="text" name="sex"/><br/><br/>
年龄：<input type="text" name="age"/><br/><br/>
<input type="submit" value="添加"/>
</form>
</body>
<script>
//执行数据删除操作
function dodel(bt){
bt.parentNode.parentNode.parentNode.removeChild(bt.parentNode.parentNode);
}
function doAdd(){
//获取表单信息
var data = new Array();
data[0] = document.myform.sno.value;
data[1] = document.myform.name.value;
data[2] = document.myform.sex.value;
data[3] = document.myform.age.value;
//获取tbody元素节点对象
var tbody = document.getElementById("tid").getElementsByTagName("tbody")[0];
//创建一个元素节点tr
var tr = document.createElement("tr");
//遍历数据并创建td节点
for(var i=0; i<data.length; i++){
var td = document.createElement("td");
var text = document.createTextNode(data[i]);
td.appendChild(text);
tr.appendChild(td);
}
//添加删除按钮
var td = document.createElement("td");
td.innerHTML = '<button οnclick="dodel(this)">删除</button>';
tr.appendChild(td);
//将行节点tr放置到tbody中
tbody.appendChild(tr);
//清空表单
document.myform.reset();
return false;
}
</script>
</html>
11、牛刀小试
1、随机点名器
为了活跃班级气氛，在班级上张老师想通过一个随机点名器来随机抽取学员回答问题，故安排你来使用 HTML+JavaScript 来实现如下图所示的随机点名器，第一张图是随机点名器的初始页面，当点击开始按钮时，JS 程序中提前准备好人员（数组）名单会随机变换跳动显示，开始按钮变成了停止按钮，如第二张图显示，当点击停止按钮时，名字的随机变换跳动停止，显示出的名字即为随机点击出来的姓名，如第三张图所示。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/rollCall.css">
</head>
<body>
<div id = "background">
<div id = "name">随机点名器</div>
<div id= "control" οnclick="doCall()">开始</div>
</div>
</body>
<script type="text/javascript" src="./js/rollCall.js"></script>
</html>
CSS样式：
*{
margin:0px;
padding:0px;
}
#background,#name,#control{border-radius:10px;}
#background{
background-color: chocolate;
width:600px;
height: 300px;
margin: auto;
position: relative;
top:150px;
left:50%;
margin-left: -300px;
}
#name {
width: 400px;
height: 100px;
position:absolute;
margin: 50px 100px 150px 100px;
background-color: darkgray;
font-size: 60px;
text-align: center;
line-height: 100px;
}
#control {
width: 100px;
height: 40px;
position:absolute;
margin: 205px 250px 55px 250px;
background-color: green;
font-size: 25px;
text-align: center;
line-height: 40px;
border:2px solid snow;
}
#control:hover{cursor: pointer;}
JS
var studentNum = 20;
var studentName = new Array();
for (var i = 0; i < 20;i++){
studentName.push("阿" + (i+1) + "仔");
}
var Sname = document.getElementById("name");
var state = document.getElementById("control");
// console.log(name);
// console.log(studentName)
var flag = 0;
var myTime = null;
function doCall(){
// 点击了开始按钮
if (flag == 0){
// 更改flag
flag = 1;
// 更改按钮状态
changeState(flag);
if (myTime == null){
// 每过一秒更改一次显示内容
myTime = setInterval(changeName, 200);
}
}else{
// 点击了停止按钮
// 更改flag
flag = 0;
// 更改按钮状态
changeState(flag);
// 停止内容变换
clearInterval(myTime);
myTime = null;
}
}
function changeName(){
// 0 - 19 对应数组下标
var number = Math.floor((Math.random() * 20));
console.log(number);
console.log(studentName[number]);
// 更改显示内容为名字
Sname.innerHTML = studentName[number];
}
function changeState(flag){
if (flag == 1){
state.innerHTML = "停止";
state.style.backgroundColor = "red";
}else{
state.innerHTML = "开始";
state.style.backgroundColor = "green";
}
}
遇到的问题：
1、我使用数组的时候又想当然了！
错误代码：
var studentName = new Array(20);
for (var i = 0; i < studentName.length;i++){
studentName[i]="阿" + (i+1) + "仔";
}
运行截图：
在最开始初始化姓名列表的时候，我错误的认为设置了初始长度就可以通过索引的方式把每个数组元素改变为我想要的值，但是，其实全是undefined！
2、最好不要使用name作为变量名称，因为系统中自带有一个name的变量，我在下面这句话使用了name：
var name = document.getElementById(“name”);
结果导致不能正确的获取到元素，获取到的是undefined！因此无法更改其内容。所以改为：
var Sname = document.getElementById(“name”);
3、鼠标的设置
如果没有使用a标签，那么想更改鼠标设置为小手，就把cursor设置为pointer。
2、轮播图制作
如下图所示，简单模仿京东官网首页中轮播图效果。具体要求：
要求每隔 3 秒图片会自动切换一张，以此类推安照给定图片数量轮番切换播放。
当鼠标移入时会自动暂停播放，鼠标移出则会继续。
如下图两边有两个左右方向的按钮，点击则会实现手动切换商品图片。
左下角会按照图片数量显示对应的灰色圆点，点击会显示对应的图片，并圆点加亮显示。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/rotation.css"/>
</head>
<body>
<div id = "background" οnmοuseοver="doStop()" οnmοuseοut="doStart()">
<div id="images" onmouseover="doStop()" onmouseout="doStart()">
<img src="./images/1.jpg" alt="商品图片">
<img src="./images/2.jpg" alt="商品图片">
<img src="./images/3.jpg" alt="商品图片">
<img src="./images/4.jpg" alt="商品图片">
<img src="./images/5.jpg" alt="商品图片">
</div>
<a class="swiper-button-prev" onclick="change(-1)"></a>
<a class="swiper-button-next" onclick="change(1)"></a>
<div class="swiper-pagination-bullet">
<ul>
<li class="button1" onclick="show(1)"></li>
<li class="button2" onclick="show(2)"></li>
<li class="button3" onclick="show(3)"></li>
<li class="button4" onclick="show(4)"></li>
<li class="button5" onclick="show(5)"></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="./js/rotation.js"></script>
</html>
CSS:
/* 清除默认格式 */
div,img,li{margin:0px;padding:0px;}
li{list-style: none;}
/* 背景设置，第一张图片展示，其他隐藏，左右居中 */
#background{width:1226px;height:460px;position: relative;top:100px;left:50%;margin-left: -613px;}
#background #images img{display:none;}
#background #images img:first-child{display:block;width:1226px;height: 460px;}
/* 左右箭头设置 */
.swiper-button-prev, .swiper-button-next{
position: absolute;
width: 41px;
height: 69px;
overflow: hidden;
}
/* 左箭头设置 */
.swiper-button-prev{
background-image: url("../images/icon-slides.png");
background-position:-83px;
top: 195.5px;
left: 0px;
}
/* 右箭头设置 */
.swiper-button-next{
background-image: url("../images/icon-slides.png");
background-position:-123px;
top: 195.5px;
right: 0px;
}
/* 箭头的鼠标悬浮效果 */
.swiper-button-prev:hover{
background-position:0px;
}
.swiper-button-next:hover{
background-position:-41px;
}
/* 右下角圆点设置 */
.swiper-pagination-bullet{
position: absolute;
overflow: hidden;
left:85%;
top:85%;
}
/* 圆点原始形状 */
.swiper-pagination-bullet li{
float: left;
width: 6px;
height: 6px;
background-color:rgba(0,0,0,.4);
border:2px solid slategray;
border-radius: 50%;
margin:4px;
}
/* 圆点鼠标悬浮时的形状 */
.swiper-pagination-bullet li:hover{
cursor: pointer;
background-color:hsla(0,0%,100%,.4);
border:2px solid #fff(0,0%,100%,.4);
}
JS:
var number = 1;
var mytime = null;
// 获取img列表 和 li 列表
var mlist = document.getElementById("images").getElementsByTagName("img");
var blist = document.getElementsByClassName("swiper-pagination-bullet")[0].getElementsByTagName("li");
// 初始第一张图片的圆点导航变化
blist[0].style.backgroundColor= "hsla(0,0%,100%,.4)";
blist[0].style.border = "2px solid #fff(0,0%,100%,.4)";
//定义函数展示对应的图片
function show(number){
for(var i=0; i<mlist.length; i++){
if(number == i+1){
// 显示对应图片 和 更改小圆点样式
mlist[i].style.display = "block";
blist[i].style.backgroundColor= "hsla(0,0%,100%,.4)";
blist[i].style.border = "2px solid #fff(0,0%,100%,.4)";
}else{
// 隐藏对应图片 和 更改小圆点样式
mlist[i].style.display = "none";
blist[i].style.backgroundColor= "rgba(0,0,0,.4)";
blist[i].style.border = "2px solid slategray";
}
}
}
//开启定时轮播图片
function doStart(){
if(mytime == null){
mytime = setInterval(function(){
number++;
if (number > 5){number = 1}; // 这一句是因为不改的话number会在进行自动播放时变成6，因此特殊处理
show(number);
if(number>=5){
number = 0;
}
}, 3000);
}
}
//停止轮播图片
function doStop(){
if(mytime != null){
clearInterval(mytime);
mytime = null;
}
}
doStart();
// 左右箭头更换图片
function change(step){
number = number + step;
if (number > 5){
number = 1;
}else if(number < 1){
number = 5;
}
show(number);
}
运行截图：
遇到的问题：
1、小图片(一个图片里有好几个那种)设置为background-image，这样方便调整在div框内的位置，方便通过左右边距更换图片。
2、子元素是绝对定位，父元素需要相对定位。
3、居中技巧：left：50%，margin-left：一半的盒子长度
3、总结
一定有空多练习一些其他案例，很多东西不够熟悉，甚至查的时候都不清楚查什么。还有就是我们讲的东西还是很少的，很多细节没讲到，需要自己学习了。
扫一扫
3040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
