JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战(动态添加删除表格)
上一博文种讲解了JavaScript基础的ECMAScript,包括基本语法和部分对象,本文中继续讲解JavaScript中比较重要的两部分内容BOM、DOM及事件,后文中有对应的实战练习。
1、DOM简单学习
DOM是用来控制html文档的内容的: 1)document.getElementById("id值"):通过元素id获取元素对象Element。 2)操作Element对象:
- 修改属性值:要明确获取的对象是哪一个,再查看API,找其中有哪些属性可以设置;
- 修改标签体内容:通过属性innerHTML修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM简单应用</title>
</head>
<body>
<img id="nezha" src="../image/2.png">
<h1 id="title"> 百度一下</h1>
<script>
//通过id获取元素对象
var nezha = document.getElementById("nezha");
alert("换图片");
nezha.src = "../image/1.png";
var text = document.getElementById("title");
alert("换标签");
text.innerHTML = "你就知道";
</script>
</body>
</html>
2、事件的简单学习
事件的功能就是,某些组件被执行了某些操作后,触发某些代码的执行,如何绑定事件?
- 直接在html标签上指定事件的属性(操作),属性值就是js代码,耦合度较高;
- 通过js获取元素对象,指定事件属性,设置函数,耦合度比较低;
【举例】:事件的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的简单应用</title>
</head>
<body>
<img id="nezha" src="../image/2.png" onclick="fun();">
<img id="nezha2" src="../image/2.png">
<script>
function fun() {
alert('我被点击了');
}
var nezha2 = document.getElementById("nezha2");
nezha2.onclick = fun;
</script>
</body>
</html>
3、BOM对象
BOM,Browser Object Model,浏览器对象模型,就是将浏览器的各个组成部分封装成对象,如下浏览器示例:
BOM的组成包括:
- Window:窗口对象
- Navigator:浏览器对象
- Screen:显示器屏幕对象
- History:历史记录对象
- Location:地址栏对象
1)Window窗口对象 方法:1、与弹出框有关的: alert(),显示有一段消息或警告窗口; confirm(),显示一段消息以及确认和取消按钮的对话框,用户点击确认按钮,则返回true,否则为false; prompt(),显示可提示用户输入的对话框,用的较少。返回值,获取用户输入的值。 2、与打开关闭有关的: open(),打开新的浏览器窗口,返回一个新的window对象 close(),关闭浏览器窗口,谁调用我我关闭谁
<input id="btnOpen" type="button" value="打开窗口">
<input id="btnClose" type="button" value="关闭窗口">
<script>
var btnOpen = document.getElementById("btnOpen");
var newWindow;
btnOpen.onclick = function(){
newWindow = open("https://www.baidu.com");
}
var btnClose = document.getElementById("btnClose");
btnClose.onclick = function(){
newWindow.close();
}
</script>
3、与定时器有关的: setTimeout(),指定的ms后调用函数或计算表达式,返回值为唯一标识,用于取消定时器; clearTimeout(),取消由setTimeout()方法设置的timeout; setInterval(),按照指定的周期进行,返回值为唯一标识,用于取消定时器; clearInterval(),取消由setInterval()方法 设置的timeout;
属性:1、获取其他BOM对象:history、location、Navigator、Screen; 2、获取DOM对象:window.document. 特点:1、不需要创建对象,可以直接使用,window.方法名(); 2、window引用可以省略,方法名();
【举例】:轮播图的实现,实现思路:
- 页面上使用img标签展示图片;
- 定义一个方法,修改图片对象的src属性;
- 定义一个定时器,每隔3s调用一次方法;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM案例——轮播图</title>
</head>
<body>
<img id="img" src="../image/7演示图片.jpg" width="100%">
<script>
var number = 7;
function fun() {
number++;
if(number>8){
number=7;
}
var img = document.getElementById("img");
img.src = "../image/"+number+"演示图片.jpg";
}
setInterval(fun,3000);
</script>
</body>
</html>
2)Location地址栏对象
创建:1、window.location 2、location 属性:1、href,设置或返回完整的URL 方法:1、reload(),刷新页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Location对象</title>
</head>
<body>
<input id="btn" type="button" value="刷新">
<input id="btn1" type="button" value="去百度">
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
location.reload();
}
//获取href
var href = location.href;
alert(href);
var btn1 = document.getElementById("btn1");
btn1.onclick = function () {
location.href = "https://www.baidu.com";
}
</script>
</body>
</html>
【举例】自动跳转首页,实现思路:
- 1)显示页面效果,p标签
- 2)倒计时读秒效果实现,定义一个方法,获取span标签,修改标签体内容;
- 3)定义一个定时器,1s执行一次
<!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>
var sec = 5;
var time = document.getElementById("time");
function showTime() {
sec--;
if(sec<=0){
location.href = "https:www.baidu.com";
}
time.innerHTML = sec+"";
}
setInterval(showTime,1000);
</script>
</body>
</html>
2)History历史记录对象
当前window窗口访问过 的历史记录。
创建:1、window.history 2、history 属性:1、length,返回当前浏览器窗口的浏览历史记录; 方法:1、back(),加载history 列表中的前一个URL; 2、forward(),加载history列表中的下一个URL; 3、go(),加载history列表中的某一个具体页面;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>History对象</title>
</head>
<body>
<input type="button" id="btn" value="获取历史记录个数">
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
var length = history.length;
alert(length);
}
</script>
</body>
</html>
4、DOM对象
DOM,Document Object Model,文档对象模型,就是将标记语言文档的各个组成部分封装为对象,可以使用这些对象对标记语言文档进行CRUD操作。
W3C DOM 标准被分为3个不同的部分:
- 核心 DOM:针对任何结构化文档的标准模型; Document:文档对象; Element:元素对象; Attribute:属性对象; Text:文本对象; Comment:注释对象; Node:节点对象,其他5个的父对象;
- XML DOM:针对XML文档的标准模型;
- HTML DOM:针对HTML文档的标准模型;
1)Document对象
创建:在html dom模型中,可以使用window对象来获取,window.document、document 方法:1、获取Element对象; getElement()方法,根据id属性值获取元素对象; getElementsByTagName()方法,根据元素名称获取元素对象们,返回值是一个数组; getElementsByClassName()方法,根据class属性值获取元素对象们,返回值是一个数组; getElementsByName()方法,根据name属性值获取元素对象们,返回值是一个数组;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document对象</title>
</head>
<body>
<div id="div1"> div1 </div>
<div id="div2"> div2 </div>
<div id="div3"> div3 </div>
<div class="class1"> div4 </div>
<div class="class1"> div5 </div>
<input type="text" name="username">
<script>
var divs = document.getElementsByTagName("div");
alert(divs.length); //5
var divs1 = document.getElementsByClassName("class1");
alert(divs1.length); //2
var divs2 = document.getElementsByName("username");
alert(divs2.length); //1
</script>
</body>
</html>
2、创建其他DOM对象方法: createAttribute(name) createComment() createElement() createTextNode()
2)Element对象
创建:通过document来创建/获取; 方法:1、removeAttribute(),删除属性; 2、setAttribute(),设置属性;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document对象</title>
</head>
<body>
<a> 点我一下 </a>
<input id="btn" type="button" value="设置a标签属性">
<input id="btn1" type="button" value="删除a标签属性">
<script>
btn = document.getElementById("btn");
btn.onclick = function () {
var ele = document.getElementsByTagName("a")[0];
ele.setAttribute("href","https://www.baidu.com");
}
btn1 = document.getElementById("btn1");
btn1.onclick = function () {
var ele = document.getElementsByTagName("a")[0];
ele.removeAttribute("href");
}
</script>
</body>
</html>
3)Node对象,是其他5个对象的父对象
特点:所有dom对象都可以被认为是一个节点; 方法:1、CRUD dom树: appendChild(),向节点的子节点列表的结尾添加新的子节点; removeChild(),删除(并返回)当前节点的指定子节点; replaceChild(),用新节点替换一个子节点; 2、setAttribute(),设置属性; 属性:parrentNode 返回节点的父节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node对象</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 id="del" href="javascript:void(0);"> 删除子节点</a>
<a id="add" href="javascript:void(0);"> 添加子节点</a>
<script>
var del = document.getElementById("del");
del.onclick = function () {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.removeChild(div2);
}
var add = document.getElementById("add");
add.onclick = function () {
var div1 = document.getElementById("div1");
var div3 = document.createElement("div");
div3.setAttribute("id","div3");
div1.appendChild(div3);
}
</script>
</body>
</html>
4)HTML DOM
- 标签体的设置与获取:innerHTML
- 使用html元素对象的属性
- 控制样式:style属性:eg:元素名称.style.border="1px solid red"; 提前定义好类选择器的样式,通过元素属性的className属性来设置class的属性值,应用较多;
5、动态表格案例实战
1)添加表格的实现思路:
- * 1、给添加按钮绑定单击事件 * 2、获取文本框内容 * 3、创建td,设置td的文本为文本框的内容 * 4、创建tr,将td添加到tr中 * 5、获取table,将tr添加到table中
2)删除表格的实现思路:
- * 1、确定点击的是哪一个超链接 * 2、再删除
<!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" id="btn_add" value="添加">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
</tr>
</table>
<script>
/*添加
* 1、给添加按钮绑定单击事件
* 2、获取文本框内容
* 3、创建td,设置td的文本为文本框的内容
* 4、创建tr,将td添加到tr中
* 5、获取table,将tr添加到table中
* 删除:
* 1、确定点击的是哪一个超链接
* 2、再删除
* */
document.getElementById("btn_add").onclick = function () {
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//创建td
var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
var td_a = document.createElement("td");
var ele_a = document.createElement("a");
ele_a.setAttribute("href","javascript:void(0);");
ele_a.setAttribute("onclick","del(this);")
var text_a = document.createTextNode("删除");
ele_a.appendChild(text_a);
td_a.appendChild(ele_a);
//创建tr
var tr = document.createElement("tr");
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//创建table
var table = document.getElementsByTagName("table")[0];
table.append(tr);
}
//删除方法
function del(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
以上的方式看起来效果不错,但是,各位看官别急,我们使用innerHTML的方式来实现,效果更佳,代码更精简:
<!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" id="btn_add" value="添加">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
</tr>
</table>
<script>
document.getElementById("btn_add").onclick = function () {
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//获取table
var table = document.getElementsByTagName("table")[0];
table.innerHTML += "<tr> " +
"<td> "+id+" </td>" +
"<td>"+name+"</td> " +
"<td>"+gender+"</td> " +
"<td><a href="javascript:void(0);" onclick='del(this)'>删除</a></td>" +
"</tr>";
}
//删除方法
function del(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
本文为博主原创文章,转载请注明出处。
- Centos7 firewalld防火墙基本操作
- Spark Sql系统入门4:spark应用程序中使用spark sql
- Flume+Kafka收集Docker容器内分布式日志应用实践
- CentOS7搭建ELK日志集中分析平台
- Centos安装sshfs实现挂载目录
- shell脚本监控磁盘使用率
- Python使用MD5加密字符串
- Spark MLlib之 KMeans聚类算法详解
- Python时间与时间戳转换
- linux配置ssh互信实现免密登陆
- uva--1339 - Ancient Cipher(模拟水体系列)
- Python获得13位unix时间戳
- Centos7下LVM对文件系统进行在线扩容
- centos7编译安装Redis
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- TKE部署ES如何配置参数vm.max_map_count
- Jquery validate remote 验证数据唯一
- MySQL 案例:乱码,字符集与错入错出的 MySQL
- Jenkins常用插件Copy Artifact的使用
- 聊聊dubbo-go的roundRobinLoadBalance
- 腾讯云录音文件识别请求和结果查询
- 【Kubernetes】kubectl top 如何使用
- js数组方法,常用数组Api的基本使用
- java jsp实现网络考试系统(mysql)
- 实操:数据万象语音转文字
- python智能图片识别系统(图片切割、图片识别、区别标识)
- 【Kubernetes】部署 metrics-server 后无法使用 top 命令
- 使用java计算数组方差和标准差
- jzy3D从入门到弃坑_2 使用jzy3D0.9画2D散点图
- jzy3D从入门到弃坑_3 使用jzy3D0.9画2D散点图--多条线条