盐城市住房和城乡建设局门户网站/关键词检测
目录
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，已归档
———————————————————————————————————
本文为博主原创文章，转载请注明出处！
若本文对您有帮助，轻抬您发财的小手，关注/评论/点赞/收藏，就是对我最大的支持！
祝君升职加薪，鹏程万里！