文章目录
- JavaScript 基础
- BOM、DOM、事件
- 1. DOM简单学习：为了满足案例要求
- 2. 事件简单学习
- 3. 案例1_电灯开关
- 4. BOM
- 5. BOM_Window_方法：弹出、打开关闭、定时器
- 8. 案例2_轮播图
- 9. BOM_Location 地址栏对象
- 11. 案例3_自动跳转首页
- 12. BOM_History 历史记录对象
- 13. DOM_概述
- 14. DOM_Document对象_获取Element
- 15. DOM_Element对象
- 16. DOM_Node对象
- 17. 案例4_动态表格_添加和删除
- 18. HTML DOM_innerHTML
- 19. HTML DOM_控制样式
- 20. 事件：概述
- 22. 事件：常见事件演示
- 23. 事件：案例5_表格全选
- 24. 事件：案例6_表单检验
JavaScript 基础
2. JavaScript
- 概念：JavaScript是一门客户端脚本语言
- 运行在客户端浏览器中，每一个浏览器都有JavaScript的解析引擎。
- 脚本语言：不需要编译，直接就可以被浏览器解析执行
- 功能：
- 可以增强用户和html页面的交互过程，可以控制html元素，让页面有一些动态的效果，增强用户的体验。
3. JavaScript 发展史
用户在浏览器填写登录表单，点击登录按钮后，会把信息发送给服务器端，服务器端判断账号、密码…是否正确，再响应回浏览器。
- 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为：
C--，后来更名为：ScriptEase - 1995年，Netscape公司，开发了一门客户端脚本语言：
LiveScript。后来，请来了SUN公司的专家，修改LiveScript，命名为JavaScript。 - 1996年，微软抄袭了
JavaScript开发出JScript语言. - 1997年，ECMA (欧洲计算机制造商协会)，
ECMAScript就是所有客户端脚本语言的标准。
JavaScript = ECMAScript + JavaScript 自己特有的东西 (BOM + DOM)
ECMAScript：客户端脚本语言的标准
- 基本语法
- JS与html结合方式
- 注释
- 数据类型
- 变量
- 运算符
- 流程控制语句
- 基本对象
4. JS与html结合方式
- 内部JS：
定义<script>标签，标签体内容就是js代码 - 外部JS：
定义<script>标签，通过src属性引入外部的js文件
注意： <script>可以定义在html页面的任何地方，但是定义的位置会影响执行顺序。<script>可以定义多个。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
内部JS
外部JS
-->
<script>
alert("hello world");
</script>
<script src="js/a.jsp"></script>
</head>
<body>
<input type="text">
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java"
pageEncoding="UTF-8" %>
alert("我是外部的JS文件");
5. 注释 & 数据类型
注释：
- 单行注释：
//注释内容 - 多行注释：
/*注释内容*/
<script>
//单行注释
/*
多行注释
*/
</script>
数据类型：
3. 原始数据类型（基本数据类型）：
number：数字。整数/小数/NaN（not a number 一个不是数字的数字类型）
string：字符串。“abc”, ‘abc’, “a”
boolean：ture和false
null：一个对象为空的占位符
undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
4. 引用数据类型：对象
6. 变量
- 变量：一小块存储数据的内存空间
- Java语言是强类型语言，JavaScript是弱类型语言。
强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。智能存储固定类型的数据。
弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。 - 语法：var 变量名 =
- 变量 typeof()
<script>
//定义number类型
var num = 1;
var num2 = 1.2;
var num3 = NaN;
//输出到页面上
document.write(num + "---" + typeof(num) + "<br>");
document.write(num2 + "---" + typeof(num2) + "<br>");
document.write(num3 + "---" + typeof(num3) + "<br>");
//定义string类型
var str = "abc"
var str2 = "edf"
document.write(str + "---" + typeof(str) + "<br>");
document.write(str2 + "---" + typeof(str2) + "<br>");
//定义boolean类型
var flag = true;
document.write(flag + "---" + typeof(flag) + "<br>");
//定义null
var obj = null;
var obj2 = undefined;
var obj3;
document.write(obj + "---" + typeof(obj) + "<br>");
document.write(obj2 + "---" + typeof(obj2) + "<br>");
document.write(obj3 + "---" + typeof(obj3) + "<br>");
</script>
7. 运算符
- 一元运算符：只有一个运算数的运算符
++，--，
+(-)正负号，其他类型转number：
string 转 number，按照字面值转换
var b = +"123";
typeof(b) //number类型
如果字面值不是数字，则转为NaN（不是数字的数字）
var b = +"abc"
typeyof(b) //NaN类型
boolean 转 number，true 转为1，false 转为 0
var flag = + true; //转类型，要加正号
var flag2 = + false;
typeof(flag) //number
flag //1
flag2 //0
- 算数运算符：
+，-，*，/，% - 赋值运算符：
=，+=，-= - 比较运算符：
>，<，>=，<=，==，===
类型相同，直接比较
类型不同，先进行类型转换，再比较
(3 > 4) //false
字符串，按照字典顺序比较，按位逐一比较，直到得出大小为止。
("abc" > "acd") //false
把字符串转成数字，再和数字比
("123" == 123) //true
===全等于，在比较之前，先判断类型，如果类型不一样，直接返回false
("123" === 123) //false
- 逻辑运算符：
&&：短路，如果左边为false，右边就不运算了
||：短路
!
var flag = true;
(flag) //true
(!flag) //false
其他类型转boolean
number，0或NaN为假，非0为真
var num = 3;
var num2 = 0;
var num3 = NaN;
(!num) //false
(!num2) //true
(!num3) //true
string 除了空字符串，其他都为true
var s = "abc"; //true
var s2 = ""; //false
null & undefined：都是false
对象：都是true
- 三元运算符
var a = 3;
var b = 4;
var c = a > b ? 1 : 0; //c=0
7. JS特殊语法
- 语句以
;结尾，如果一行只有一条语句则;可以省略（不建议） - 变量的定义使用
var关键字，也可以不使用
用：定义的变量是局部变量
不用：定义的变量是全局变量（不建议）
8. 流程控制语句
- if…else
- switch：
在java中，switch语句可以接受的数据类型：byte、int、char、枚举、string
在js中
var a = 1;
switch(a)：
case 1：
alert("number");
break;
case "abc":
alert("string);
break;
case true:
alert("true");
break;
case null:
alert("null");
break;
case undefine:
alert("undefined");
break;
- while
var sum = 0;
var num = 1;
while(num <= 100) {
sum += num;
num ++;
}
alert(sum);
- do…while
- for
<script>
var sum = 0;
for(var i = 1; i <= 100; i++){
sum += i
}
alert(sum);
</script>
9. 练习 99乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>99乘法表</title>
<style>
td{
border: 1px solid;
}
</style>
<script>
document.write("<table align='center>'");
//1. 完成基本的for循环嵌套，展示乘法表
for (var i = 1; i <= 9; i++) {
document.write("<tr>");
for (var j = 1; j <= i; j++) {
document.write("<td>");
document.write(i + "*" + j + "=" + (i * j) + "  ");
document.write("</td>");
}
document.write("</tr>");
}
//2. 完成表格嵌套
document.write("</table>");
</script>
</head>
<body>
</body>
</html>
10. Function对象
function对象：函数对象
<script>
/*创建方式：
function 方法名称（形参列表）{ 方法体 }
*/
function fun2(a, b){
alert(a + b);
}
fun2(3, 4); //输出7
var fun3 = function(a, b){
alert(a + b);
}
fun2(3, 4);
</script>
特点：1. 方法定义时，形参类型不用写，返回值类型也不写
2. 方法是一个对象，如果定义名称相同的方法，会覆盖
3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
<script>
function fun2(a, b){
alert(a);
alert(b);
}
fun2(1, 2); //可以运行，输出1和2
fun2(1); //可以运行，输出1和undefined
fun2(1, 2, 3); //可以运行，输出1，2
</script>
- 在方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数
求任意个数的和
<script>
function add() {
var sum = 0;
for(var i = 0; i < arguments.length; i++){
sum += arguments[i];
}
return sum;
}
var sum = add(1, 2, 3, 4);
alert(sum); //输出10
</script>
11. array 数组对象
- 创建
<script>
var arr1 = new Array(1, 2 ,3); //1,2,3
var arr2 = new Array(5); //.....，5表示数组长度，可以为空
var arr3 = [1, 2, 3, 4]; //1,2,3,4
</script>
- 方法
join()：将数组中的元素按照指定的分隔符拼接成字符串
push():
<script>
</script>
- 属性: length
- 特点：
- JS中，数组元素的类型可变。
- JS中，数组长度可变
<script>
var arr = [1, "abc", true]; //1,abc,true
arr[0] //1
arr[1] //abc
arr[2] //true
arr[3] //undefined
arr[10] = "hehe" //打印出来hehe
arr[9] //打印出来undefined
arr.length; //11
arr.join("--"); //1--abc--true----------hehe
arr.push(11); //1--abc--true----------hehe--11
</script>
12. Date 日期对象
toLocaleString(): 返回当前date对象对应的时间本地字符串格式
getTime(): 获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差。
<script>
var date = new Date();
date;
//打印出来是美国日期的字符串格式：
//Thu May 17 2018 14:59:59 GMT+0800(中国标准时间)
date.toLocaleString();//2018/5/17 下午3:01:55
date.getTime()
</script>
13. Math 对象
Math 对象不用创建，直接使用
属性：PI
方法：
<script>
Math.PI; //3.1415926
Math.random() //0～1之间的随机数，含0不含1
Math.round(3.14) //四舍五入 3
Math.ceil(3.14) //向上取整 4
Math.floor(3.14) //向下取整 3
</script>
取1～100之间的随机整数
1. Math.random()产生随机数，范围(0, 1]小数
2. 乘以 100 --> [0, 99.9999] 小数
3. 舍弃小数部分，floor --> [0, 99]整数
4. +1 --> [1,100]
<script>
var number = Math.floor(Math.random() * 100)) + 1;
</script>
14. RegExp 正则表达式对象
- 正则表达式：定义字符串的组成规则
- 单个字符:[]
[a] 表示有一个字符是a [ab] a或者b [a-zA-Z0-9_] \d: 单个数字字符 [0-9] \w: 单个单词字符[a-zA-Z0-9_]- 量词符号
? 表示出现0次或1次 * 出现0次或多次 + 出现1次或多次 {m, n} m<= 数量 <=n {, n} 最多n次 {m, } 最少m次- 开始结束符号
^ 开始，$结束
- 正则对象：
- 创建
- 方法
test()验证指定的字符串是否符合正则定义的规范
<script>
var reg = new RegExp("\w{6,12}");
var reg2 = /^\w{6,12}$/;
var username = "zhangsan";
var flag = res2.test(username) //flag=true
</script>
15. Global 全局对象
- 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。
- 方法：
encodeURI()：url编码
decodeURI()：url解码
encodeURIComponent()：url编码，编码的字符更多
decodeURIComponent()：url解码 - URL编码
传智播客，假设是GBK编码：8个字节，1个字节8个二进制位。每个字节转为一个16进制的数字，两个数字前加一个%
var str = "传智播客";
var encode = encodeURI(str);
//编码：打印encode：%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
var s = decodeURI(encode);
//解码：打印s：传智播客
var encode1 = encodeURIComponent(str);
var s1 = decodeURIComponent(encode);
//打印结果一样
- paseInt()：将字符串转为数字
逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
var str = "123abc";
var number = parseInt(str); //打印出123
BOM、DOM、事件
1. DOM简单学习：为了满足案例要求
功能：控制html文档的内容
代码：获取页面标签（元素）对象 Element
document.getElementById("id值");通过元素的id获取元素对象
操作Element对象：
- 设置属性值
- 明确获取的对象是哪一个？
- 查看API文档，找其中有哪些属性可以设置
- 修改标签体内容
属性：innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img id="img1" src="img/3.jpg">
<h1 id="title">标题1111111</h1>
<script>
//通过id获取元素对象
var img1 = document.getElementById("img1");
alert("我要换图片了。。。");
img1.src = "img/4.jpg";
//1. 获取h1标签对象
var title = document.getElementById("title");
alert("我要换内容了");
//2. 修改内容
title.innerHTML = "标题2222222";
</script>
</body>
</html>
2. 事件简单学习
- 功能：某些组件被执行了某些操作后，触发某些代码的执行。
造句：xxxx被xxxx，我就xxxx。如：我方水晶被摧毁后，我就责备队友。 - 如何绑定事件
- 直接在html标签上，指定事件的属性（操作），属性值就是js代码
事件：onclick— 单机事件 - 通过js获取元素对象，指定事件属性，设置一个函数
- 直接在html标签上，指定事件的属性（操作），属性值就是js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
</head>
<body>
<!--第一种方式-->
<img id="img1" src="img/3.jpg" onclick="fun();">
<!--第二种方式-->
<img id="img2" src="img/3.jpg">
<script>
<!--第一种方式-->
function fun() {
alert('我被点了');
}
<!--第二种方式-->
//1. 获取 light2 对象
var img2 = document.getElementById("img2");
//2. 绑定事件
img2.onclick = fun;
</script>
</body>
</html>
3. 案例1_电灯开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯开关</title>
</head>
<body>
<img id="img1" src="img/3.jpg">
<script>
/*
分析：
1. 获取图片对象
2. 绑定单击事件
3. 每次点击切换图片
* 规则：
* 如果是图片1，切换为图片2
* 如果是图片2，切换为图片1
* 使用标记 flag 来完成
*/
var image = document.getElementById("img1");
var flag = false; //代表灯是灭的
image.onclick = function () {
if (flag) { //如果是图片1，则换成图片2
image.src = "img/4.jpg"
flag = false;
} else {
//如果是图片2，则换成图片1
image.src = "img/3.jpg"
flag = true;
}
}
</script>
</body>
</html>
4. BOM
- 概念：Browser Object Model 浏览器对象模型
将浏览器的各个组成部分封装成对象。 - 组成：
Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象
5. BOM_Window_方法：弹出、打开关闭、定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="openBtn" type="button" value="打开窗口">
<input id="closeBtn" type="button" value="关闭窗口">
<script>
/*
Window: 窗口对象
1. 创建
2. 方法
1. 与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
* 如果用户点击确定按钮，则方法返回true
* 如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框
* 返回值：获取用户输入的值
2. 与打开、关闭有关的方法：
close() 关闭浏览器窗口
* 谁调用我，我关谁
open() 打开一个新的浏览器窗口
* 返回一个新的Window对象
3. 与定时器有关的方法：
setTimeout() 在指定的毫秒数后调用函数或计算表达式
* 参数：
1. js代码或者方法对象
2. 毫秒值
* 返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的timeout
3. 属性
1. 获取其他BOM对象
history
location
Navigator
Screen
2. 获取DOM对象
document
4. 特点
* Window对象不需要创建可以直接使用 window使用，window.方法名();
* window引用可以省略。 方法名();
*/
/**
* 1. 弹出方法
*/
alert("hello window");
// 等价于：window.alert("hello a");
var flag = confirm("你确定要退出吗？");
if (flag) {
//退出操作
alert("欢迎再次光临！");
} else {
//提示：手别抖
alert("手别抖");
}
/**
* 2. 打开、关闭方法
* @type {string}
*/
//输入框
var res = prompt("请输入用户名：");
alert(res); //弹出用户输入的信息（用户名）
//打开新窗口
var openBtn = document.getElementById("openBtn");
var newWindow;
openBtn.onclick = function () {
//打开新窗口
newWindow = open("https://cn.bing.com");
}
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function () {
//关闭新窗口
newWindow.close();
}
/**
* 3. 定时器方法
*/
//一次性定时器
var id = setTimeout(fun, 2000);
clearTimeout(id);
function fun() {
alert("boom~~");
}
//循环定时器
var id = setInterval(fun, 2000); //2秒炸一次
clearTimeout(id);
/**
* 4. 属性（window可省略）
*/
//获取history，获取当前页面的历史记录
var h1 = window.history;
var h2 = history;
//获取Dom对象
window.document.getElementById("");
document.getElementById("");
</script>
</body>
</html>
8. 案例2_轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<img id="img" src="img/bg_1.jpeg" width="700dp" height="500dp">
<script>
/*
分析：
1. 在页面上使用img标签展示图片
2. 定义一个方法，修改图片的src属性
3. 定义一个定时器，每隔3秒调用方法一次
*/
//修改图片的src属性
var num = 0;
function fun() {
num++;
var img = document.getElementById("img");
img.src = "img/bg_" + num % 3 + ".jpeg"; //1%3=1,2%3=2,3%3=0
}
//定义定时器
setInterval(fun, 1000);
</script>
</body>
</html>
9. BOM_Location 地址栏对象
- 创建（获取）：
- widown.location
- location
- 方法
- reload() 重新加载当前文档。刷新
- 属性
- href
效果：
点击刷新按钮，会刷新页面，并重新弹出href
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Location</title>
</head>
<body>
<input type="button" id="btn" value="刷新">
<input type="button" id="goBing" value="去必应">
<script>
//reload方法，定义一个按钮，点击按钮，刷新当前页面
//1. 获取按钮
var btn = document.getElementById("btn");
//2. 绑定单机事件
btn.onclick = function () {
//3. 刷新页面
location.reload();
}
//获取href
//var href = location.href;
//alert(href);
//点击按钮，去访问https://cn.bing.com官网
//1. 获取按钮
var goBing = document.getElementById("goBing");
//2. 绑定单机事件
goBing.onclick = function () {
//3. 刷新页面
location.href = "https://cn.bing.com";
}
</script>
</body>
</html>
11. 案例3_自动跳转首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动跳转</title>
<style>
p {
text-align: center;
}
span {
color: red;
}
</style>
</head>
<body>
<p>
<span id="time">5</span>秒之后，自动跳转到首页...
</p>
<script>
/*
分析：
1. 显示页面效果 <p>、<span>
2. 倒计时读秒效果实现
1. 定义一个方法，获取span标签，修改span标签体的内容：时间--
2. 定义一个定时器，1秒执行一次该方法
3. 在方法中判断，时间如果<=0，则跳转到首页
*/
// 2. 倒计时读秒效果实现
var second = 5;
var time = document.getElementById("time");
function showTime() {
second--;
if (second <= 0) {
location.href = "https://cn.bing.com";
}
time.innerHTML = second + ""; //变成字符串类型的
}
//设置定时器，1秒执行一次该方法
setInterval(showTime, 1000);
</script>
</body>
</html>
12. BOM_History 历史记录对象
- 创建（获取）：
- window.history
- history
- 方法
back()加载 history 列表中的前一个 URL。
forward()加载 history 列表中的下一个 URL。
go()加载 history 列表中的某个具体页面。
* 参数：
* 正数：前进几个历史记录
* 负数：后退几个历史记录 - 属性
length 返回当前窗口历史列表中的 url 数量
代码：
history对象1：属性length、方法forward和go
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id="btn" value="获取历史记录个数">
<a href="https://cn.bing.com">必应</a>
<input type="button" id="forward" value="前进">
<script>
/*
1. length 属性
*/
//1. 获取按钮
var btn = document.getElementById("btn");
//2. 绑定单机事件
btn.onclick = function () {
//3. 获取历史记录的个数
var length = history.length;
alert(length);
}
/*
2. 方法
*/
//1. 获取按钮
var forward = document.getElementById("forward");
//2. 绑定单机事件
forward.onclick = function () {
//3. 前进方法，前进到下一个页面去
// 等价于history.forward();
history.go(1);
}
</script>
</body>
</html>
history对象2：方法back和go
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<img id="img" src="img/bg_1.jpeg" width="700dp" height="500dp">
<input type="button" id="back" value="后退">
<script>
/*
分析：
1. 在页面上使用img标签展示图片
2. 定义一个方法，修改图片的src属性
3. 定义一个定时器，每隔3秒调用方法一次
*/
//修改图片的src属性
var num = 0;
function fun() {
num++;
//获取img对象
var img = document.getElementById("img");
img.src = "img/bg_" + num % 3 + ".jpeg"; //1%3=1,2%3=2,3%3=0
}
//定义定时器
setInterval(fun, 1000);
//1. 获取按钮
var back = document.getElementById("back");
//2. 绑定单机事件
back.onclick = function () {
//后退
//history.back();等价于
history.go(-1);
}
</script>
</body>
</html>
13. DOM_概述
- 概念：Document Object Model 文档对象模型
将标记语言文档的各个组成部分，封装为对象。
可以使用这些对象，对标记语言文档进行CRUD的动态操作
- W3C 定义的 DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- Document：文档元素
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
- Node：节点对象，其他5个的父对象
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
- 核心 DOM - 针对任何结构化文档的标准模型
- 学习
- 核心DOM模型：
- Document：文档元素
- Element：元素对象
- Node：节点对象，其他5个的父对象
- HTML DOM
- 核心DOM模型：
14. DOM_Document对象_获取Element
Document：文档元素
- 创建（获取）：在html dom模型中可以使用window对象来获取
- window.document
- document
- 方法
- 获取 Element 对象
getElementById()根据id属性值获取元素对象。id 属性值一般唯一。getElementsByTagName()根据元素名称获取元素对象们。返回值是一个数组。getElementsByClassName()根据Class的属性值获取元素对象们。返回值是一个数组。getElementsByName()根据name属性值获取元素对象们。返回值是一个数组。
- 创建其他DOM对象
createAttribute(name)
createComment()
createElement()
createTextNode()
- 获取 Element 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div class="cls1">div4</div>
<div class="cls2">div5</div>
<input type="text" name="username">
<script>
//2.根据元素名称获取元素对象们。返回值是一个数组
var divs = document.getElementsByTagName("div");
alert("getElementsByTagName：" + divs.length);
//3.根据Class属性值获取元素对象们。返回值是一个数组
var div_cls = document.getElementsByClassName("cls1");
alert("getElementsByClassName：" + div_cls.length);
//4.根据name属性值获取元素对象们。返回值是一个数组
var ele_username = document.getElementsByName("username");
alert("getElementsByName：" + ele_username.length);
//创建一个table标签，但是看不到效果，只能看到它是一个HTMLTable元素对象
var table = document.createElement("table");
alert(table);
</script>
</body>
</html>
- 属性：Element对象，Node对象
15. DOM_Element对象
Element: 元素对象
获取/创建：通过document对象来获取和创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a>点我试一试</a>
<input type="button" id="btn_set" value="设置属性">
<input type="button" id="btn_remove" value="删除属性">
<script>
//获取btn
var btn_set = document.getElementById("btn_set");
btn_set.onclick = function () {
//1.获取a标签
var element_a = document.getElementsByTagName("a")[0];
element_a.setAttribute("href", "https://www.baidu.com");
}
//获取btn
var btn_remove = document.getElementById("btn_remove");
btn_remove.onclick = function () {
//1.获取a标签
var element_a = document.getElementsByTagName("a")[0];
element_a.removeAttribute("href");
}
</script>
</body>
</html>
16. DOM_Node对象
Node: 节点对象，其他5个的父对象
- 特点：所有DOM对象都可以被认为是一个节点
- 方法：CRUDdom树
- appendChild(): 向节点的子节点列表的结尾添加新的子节点
- removeCild(): 删除（并返回）当前节点的指定子节点
实现效果：
初始效果：
点击删除子节点：
点击添加子节点
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border: 1px solid red;
}
#div1 {
width: 200px;
height: 200px;
}
#div2 {
width: 100px;
height: 100px;
}
#div3 {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">div2</div>
div1
</div>
<a href="javascript:void(0);" id="del">删除子节点</a>
<a href="javascript:void(0);" id="add">添加子节点</a>
<script>
/*
删除子节点
*/
//1. 获取超链接
var element_a = document.getElementById("del");
//2. 绑定单机事件
element_a.onclick = function () {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
//删除子节点
div1.removeChild(div2);
}
/*
超链接功能：
1. 可以被点击：样式
2. 点击后跳转到href指定的url
需求：保留功能1，去掉功能2
实现：href = "javascript:void(0);"，注销掉跳转功能
*/
/*
添加子节点
*/
//1. 获取超链接
var element_add = document.getElementById("add");
//2. 绑定单机事件
element_add.onclick = function () {
var div1 = document.getElementById("div1");
//给div1添加子节点
//创建div节点
var div3 = document.createElement("div");
div3.setAttribute("id", "div3");
div1.appendChild(div3);
}
</script>
</body>
</html>
17. 案例4_动态表格_添加和删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table {
border: 1px solid;
margin: auto;
width: 500px;
}
td, th {
text-align: center;
border: 1px solid;
}
div {
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
</table>
<script>
/*
分析：
1.添加：
1. 给添加按钮绑定单击事件
2. 获取文本框的内容
3. 创建td，设置td的文本为文本框的内容。
4. 创建tr
5. 将td添加到tr中
6. 获取table，将tr添加到table中
2.删除：
1.确定点击的是哪一个超链接
<a href="javascript:void(0);" οnclick="delTr(this);" >删除</a>
2.怎么删除？
removeChild():通过父节点删除子节点
*/
//1. 获取按钮，绑定单机事件
document.getElementById("btn_add").onclick = function () {
//2. 获取文本框内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//3. 创建td，赋值td的标签体
//(1).id 的 td
var td_id = document.createElement("td");//创建td
var text_id = document.createTextNode(id);//创建一个文本节点text_id
td_id.appendChild(text_id);//把文本节点放在里面
//(2).name 的 td
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
//(3).gender 的 td
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
//(4).a标签 的 td
var td_a = document.createElement("td");
var ele_a = document.createElement("a");
//设置a标签的属性javascript:void(0);和delTr(this)
ele_a.setAttribute("href", "javascript:void(0);");
ele_a.setAttribute("onclick", "delTr(this);");
var text_a = document.createTextNode("删除");//创建一个文本节点
ele_a.appendChild(text_a);//把文本节点加入到a标签里面
td_a.appendChild(ele_a);//把a标签加入到td里面
//4. 创建 tr
var tr = document.createElement("tr");
//5. 添加 td 到 tr 中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//6. 获取table（就一个table，根据标签名称获取）
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
//删除
function delTr(obj) {
//参数 obj/this 代表当前的超链接对象/当前的a标签
//通过a标签，获取它的父节点td，再获取它的父节点tr（获取两次），获取第三次是table
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
18. HTML DOM_innerHTML
HTML标签体的设置和获取：innerHTML
使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTMLDOM</title>
</head>
<body>
<div id="div1">
div_text
</div>
<script>
//1. 获取标签体
var div = document.getElementById("div1");
var innerHTML = div.innerHTML;
// alert(innerHTML);
//2. div标签中替换一个文本输入框（把"div_text"变成了文本输入框）
div.innerHTML = "<input type='text'>";
//3. div标签中追加一个文本输入框
div.innerHTML += "<input type='text'>"
</script>
</body>
</html>
动态表格的添加操作：
<script>
//使用innerHTML添加
//1. 获取按钮，绑定单机事件
document.getElementById("btn_add").onclick = function () {
//2. 获取文本框内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//3. 获取table（就一个table，根据标签名称获取）
var table = document.getElementsByTagName("table")[0];
//4. 追加一行
table.innerHTML += "<tr>\n" +
" <td>" + id + "</td>\n" +
" <td>" + name + "</td>\n" +
" <td>" + gender + "</td>\n" +
" <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\">删除</a></td>\n" +
" </tr>";
}
</script>
19. HTML DOM_控制样式
- 标签体的设置和获取：innerHTML
- 使用html元素对象的属性（查API文档学习）
- 控制元素的样式
- 使用元素的style属性来设置
- 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制样式</title>
<style>
.d1 {
border: 1px solid red;
width: 100px;
height: 100px;
}
.d2 {
border: 1px solid red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="div1">
div1_text
</div>
<div id="div2">
div2_text
</div>
<script>
var div1 = document.getElementById("div1");
//修改样式方式1：使用style的属性设置
div1.onclick = function () {
// style后面加css的属性的键的名称，值就是属性对应的值
div1.style.border = "1px solid red";//1个像素的实线的红色边框
div1.style.width = "200px";//红色边框宽度设为200
//font-size --> fontSize
div1.style.fontSize = "20px";//字的大小
}
//修改样式方式2：通过元素的className属性来设置class属性值
var div2 = document.getElementById("div2");
div2.onclick = function () {
div2.className = "d1";
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
