1、DOM简单学习

2、事件的简单学习

3、BOM对象

4、DOM对象

5、动态表格案例实战

上一博文种讲解了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();}//获取hrefvar 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); //5var divs1 = document.getElementsByClassName("class1");alert(divs1.length); //2var 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;//创建tdvar 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);//创建trvar tr = document.createElement("tr");tr.appendChild(td_id);tr.appendChild(td_name);tr.appendChild(td_gender);tr.appendChild(td_a);//创建tablevar 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;//获取tablevar 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>

作于202005212130，已归档

———————————————————————————————————

本文为博主原创文章，转载请注明出处！

若本文对您有帮助，轻抬您发财的小手，关注/评论/点赞/收藏，就是对我最大的支持！

祝君升职加薪，鹏程万里！

JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战（动态添加删除表格）相关推荐

JavaWeb——JavaScript精讲之ECMAScript标准（基本语法、JavaScript对象）
目录 1.JavaScript概述 2.ECMAScript客户端脚本语言标准 2.1.基本语法 2.2.JavaScript对象 1.JavaScript概述 JavaScript不同于HTML.C ...
分布式服务架构精讲pdf文档：原理+设计+实战，（收藏再看）
前言如果你期待对分布式系统有一个更全面的认识,想要了解各个技术在分布式系统中如何应用.分别解决哪些问题.有怎样优秀的实现,推荐阅读.收藏本篇. 分布式.微服务几乎是现在的技术人员必须要了解的架构方向 ...
第11讲：Reqeusts + PyQuery + PyMongo 基本案例实战
在前面我们已经学习了多进程.requests.正则表达式.pyquery.PyMongo 等的基本用法,但我们还没有完整地实现一个爬取案例.本课时,我们就来实现一个完整的网站爬虫案例,把前面学习的知识 ...
Krpano全景：在javascript中动态添加/删除/修改（位置）热点（向后端写入）
目录接下来看在JS中的方法: 1.手动添加热点(点击图上添加点) 2.查找热点 3.修改热点 4.删除热点其他方法作为管理员,在管理全景时会涉及到各个标签的操作,本篇文章介绍在JS中对热点的操作 ...
Krpano学习：在javascript中动态添加/删除/修改（位置）热点（向后端写入）
作为管理员,在管理全景时会涉及到各个标签的操作,本篇文章介绍在JS中对热点的操作,其数据可传到后端并写入数据库. 首先先给一个在xml文件中的动态热点添加的方法,下面的代码直接把两个url图片换了就可 ...
Python面型对象--重载运算符与动态添加属性
魔术方法在Python中以两个下划线开头的方法,__init__.__str__.__doc__.__new__等,被称为"魔术方法"(Magic methods).魔术方法在类 ...
深度学习核心技术精讲100篇（六）-keras 实战系列之推荐系统FM（Factorization Machine）算法
前言博主在之前的文章中介绍过使用keras搭建一个基于矩阵分解的推荐系统,而那篇文章所介绍的方法可能只是一个庞大推荐系统中的一小环节.而对于工业级别的推荐系统,面对极其庞大的产品种类数量,一步就输出 ...
深度学习核心技术精讲100篇（八）-keras 实战系列之深度学习中的多任务学习(Multi-task learning)
多任务学习(Multi-task learning)简介多任务学习(Multi-task learning)是迁移学习(Transfer Learning)的一种,而迁移学习指的是将从源领域的知识( ...
深度学习核心技术精讲100篇（七）-keras 实战系列之深度学习模型处理多标签（multi_label）
前言最近在读论文的的过程中接触到多标签分类(multi-label classification)的任务,必须要强调的是多标签(multi-label)分类任务和多分类(multi-class) ...
深度学习核心技术精讲100篇（六）-keras 实战系列之知识蒸馏（Knowledge Distilling）
前言深度学习在这两年的发展可谓是突飞猛进,为了提升模型性能,模型的参数量变得越来越多,模型自身也变得越来越大.在图像领域中基于Resnet的卷积神经网络模型,不断延伸着网络深度.而在自然语言处理领域 ...

JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战（动态添加删除表格）

1、DOM简单学习

2、事件的简单学习

3、BOM对象

4、DOM对象

5、动态表格案例实战

JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战（动态添加删除表格）相关推荐

最新文章

热门文章