0006 BOM和DOM的知识点(javascript02)
001 BOM概念
Browser Object Model 浏览器对象模型
002 BOM组成
Window:窗口对象
Navigator:浏览器对象【用不到】
Screen:显示器屏幕对象【用不到】
History:历史记录对象
Location:地址栏对象
003 Window对象
1) 创建
2) 方法
1. 与弹出框有关的方法:
alert("消息") 显示带有一段消息和一个确认按钮的警告框
confirm("消息") 显示带有一段消息以及确认按钮和取消按钮的对话框
如果用户点击确定按钮,则方法返回true
如果用户点击取消按钮,则方法返回false
prompt("消息") 显示可提示用户输入的对话框【不常用】
返回值:获取用户输入的值
2. 与打开关闭有关的方法
open() 打开一个新的浏览器窗口
返回一个新的window对象
close() 关闭浏览器窗口
谁调用我,我关闭谁
3. 与定时器有关的方法
setTimeout(对象,毫秒值) 在指定的毫秒数之后调用函数或计算表达式(一次)
参数:
1. js代码或者方法对象
2. 毫秒值
返回值: 唯一标识,用于取消定时器
clearTimeout() 取消由setTimeout()方法设置的timeout.
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式
参数:
1. js代码或者方法对象
2. 毫秒值
返回值: 唯一标识,用于取消定时器
clearInterval() 取消由setInterval() 设置的timeout
例如:
//一次性定时器
var id= setTimeout(fun,2000);
function fun(){
alert("boom~~");
}
//取消定时器
clearTimeout(id);
//循环定时器
setInterval(fun,3000);
3) 属性
1. 获取其他BOM对象
history
location
Screen
Navigator
例如:
var history = window.history;
var h = history;
2. 获取DOM对象
document
例如:
var openBtn = window.document.getElementById("openBtn");
4) 特点
Window对象不需要创建,可以直接使用window: window.方法名();
window应用可省略. 直接写成方法名();
例如:
alert("hello a");
window.alert("hello window");
004 案例-轮播图
分析: 1. 在页面上使用img标签展示图片 2. 定义一个方法,修改图片对象的src属性 3. 定义一个定时器,每隔3秒调用一次方法 代码: <body> <img id="img" asrc="img/banner_1.jpg" width="100%"> <script> //修改图片src属性 var number = 1; function fun(){ number++; //判断number是否大于3 if(number > 3){ number =1; } //获取img对象 var img = document.getElementById("img"); img.src="img/banner_"+number+".jpg"; } //2. 定义定时器 setInterval(fun,3000); </script> </body>
005 Location:地址栏对象
1) 创建(获取)
1. window.location
2. location
2) 方法
reload() 重新加载当前文件,刷新
3) 属性
href 设置或返回完整的URL
例如:
<body> <input type="button" id="btn" value="刷新"> <input type="button" id="goBaidu" value="去百度"> <script> //reload方法:定义一个按钮,点击按钮,刷新当前页面 //1. 获取按钮 var btn = dacument.getElementById("btn"); //2. 绑定单机事件 btn.onclick = function(){ //3. 刷新页面 location.reload(); } //获取href var href=location.href; alert(href); //去百度 //1. 获取按钮 var btn = dacument.getElementById("goBaidu"); //2. 绑定单机事件 btn.onclick = function(){ //3. 访问百度官网https://www.baidu.com location.href="https://www.baidu.com"; } </script> </body>
DOM
006 DOM概念
Document Object Model 文档对象模型
将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD(增删改查)的动态操作
6.1 W3C DOM标准被分为3个不同的部分
核心 DOM: 针对任何结构化文档的标准模型
Document :文档对象
Element: 元素对象
Attribute: 属性对象
Text: 文本对象
Comment: 注释对象
Node: 节点对象,其它5个对象的父对象;
XML DOM: 针对XML文档的标准模型
HTML DOM: 针对HTML文档的标准模型
6.2 核心 DOM
Document :文档对象
Element: 元素对象
Node: 节点对象,其它5个对象的父对象;
6.2.1 Document :文档对象
1. 创建(获取): 在html DOM模型中可以使用window对象来获取
1. window.dacument
2. document
2. 方法
1. 获取Element对象
1)getElementById() 根据id属性值获取元素对象。id属性值一般唯一
2)getElementsByTagName() 根据元素名称获取对象们,返回值是一个数组
3) getElementsByClassName() 根据class属性值获取元素对象们,返回值是一个数组
4)getElementsByName() 根据name属性值获取元素对象们,返回值是一个数组
2. 创建其它DOM对象
createAttribute(name)
createComment()
createElement()
createTextNode()
3. 属性
6.2.2 Element:元素对象
1. 获取/创建:通过document来获取和创建
2. 方法:
1. removeAttribute():删除属性
2. setAttribute():设置属性
6.2.3 Node:节点对象,其他5个的父对象
* 特点:所有dom对象都可以被认为是一个节点
* 方法:
* CRUD dom树:
* appendChild():向节点的子节点列表的结尾添加新的子节点。
* removeChild() :删除(并返回)当前节点的指定子节点。
* replaceChild():用新节点替换一个子节点。
* 属性:
* parentNode 返回节点的父节点。
6.2.4 案例:
<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.omclick = function(){ var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); div1.removeChild(div2); } //1. 获取超链接 var element_add = document.getElementById("add"); //2. 绑定单击事件 element_add.omclick = function(){ var div1 = document.getElementById("div1"); //给div1添加子节点 //创建div节点 var div3 = document.getElementById("div1"); div3.setAddtribute("id","duv3"); div1.appendChild(div3); } /* 超链接功能: 1. 可以被点击,样式 2. 点击后跳转到href指定的url 需求:保留1功能,去掉2功能 实现: href="javascript:void(0);" */
</script> </body>
6.2.5 案例:动态表格的添加和删除
<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);" onclick="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的标签体 //id 的 td var td_id = document.createElement("td"); var text_id = document.createTextNode(id); td_id.appendChild(text_id); //name 的 td var td_name = document.createElement("td"); var text_name = document.createTextNode(name); td_name.appendChild(text_name); //gender 的 td var td_gender = document.createElement("td"); var text_gender = document.createTextNode(gender); td_gender.appendChild(text_gender); //a标签的td var td_a = document.createElement("td"); var ele_a = document.createElement("a"); ele_a.setAttribute("href","javascript:void(0);"); ele_a.setAttribute("onclick","delTr(this);"); var text_a = document.createTextNode("删除"); ele_a.appendChild(text_a); td_a.appendChild(ele_a); //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 var table = document.getElementsByTagName("table")[0]; table.appendChild(tr); }*/ //使用innerHTML添加 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; //获取table var table = document.getElementsByTagName("table")[0]; //追加一行 table.innerHTML += "<tr>\n" + " <td>"+id+"</td>\n" + " <td>"+name+"</td>\n" + " <td>"+gender+"</td>\n" + " <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\" >删除</a></td>\n" + " </tr>"; } //删除方法 function delTr(obj){ var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } </script>
6.3 HTML DOM
1. 标签体的设置和获取:InnerHTML
2. 使用html元素对象的属性[查看【api文档]
3. 控制样式
1) 使用元素的style属性来设置
//修改样式方式1
div1.style.border = "1px solid red";
//font-size -->fontSize
div1.style.fontSize ="20px";
2)提前定义好类选择器的样式,通过元素className属性来设置其class属性值
例如:
1. 标签体的设置和获取:InnerHTML 2. 使用html元素对象的属性[查看【api文档] 3. 控制样式 1) 使用元素的style属性来设置 //修改样式方式1 div1.style.border = "1px solid red"; //font-size -->fontSize div1.style.fontSize ="20px"; 2)提前定义好类选择器的样式,通过元素className属性来设置其class属性值 例如:
案例01:替换文本输入框或追加文本输入框
<body> <div id="div01">div</div> <script> var div =document.getElementById("div01"); var innerHTML = div.innerHTML; //div标签中替换一个文本输入框 div.innerHTML = "<input type='text'>"; //div标签中追加一个文本输入框 div.innerHTML += "<input type='text'>"; </script> </body>
案例02 :修改样式(控制样式)
<body> <div id="div1" > div</div> <script> var div1 = document.getElementById("div1"); div1.onclick = function(){ //修改样式方式1 div1.style.border = "1px solid red"; //font-size -->fontSize div1.style.fontSize ="20px"; } </script> </body>
007 事件监听机制
7.1 概念:
某些组件被执行了某些操作后,触发某些代码的执行。
* 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
* 事件源:组件。如: 按钮 文本输入框...
* 监听器:代码。
* 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。
7.2 常见事件演示:
1. 点击事件:
1. onclick:单击事件
2. ondblclick:双击事件
2. 焦点事件
1. onblur:失去焦点(一般用于表单校验)
2. onfocus:元素获得焦点。
3. 加载事件:
1. onload:一张页面或一幅图像完成加载。
4. 鼠标事件:
1. onmousedown 鼠标按钮被按下。
定义方法时,定义一个形参,接受event对象
event对象的button属性可以获取鼠标按钮被点击了
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
5. 键盘事件:
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
6. 选择和改变
1. onchange 域的内容被改变。(三级联动)
2. onselect 文本被选中。
7. 表单事件:
1. onsubmit 确认按钮被点击。
可以阻止表单的提交
方法返回false则表单被阻止提交
2. onreset 重置按钮被点击。
7.3 案例:演示
//2.加载完成事件 onload window.onload = function(){ /*//1.失去焦点事件 document.getElementById("username").onblur = function(){ alert("失去焦点了..."); }*/ /*//3.绑定鼠标移动到元素之上事件 document.getElementById("username").onmouseover = function(){ alert("鼠标来了...."); }*/ /* //3.绑定鼠标点击事件 document.getElementById("username").onmousedown = function(event){ // alert("鼠标点击了...."); alert(event.button); }*/ /* document.getElementById("username").onkeydown = function(event){ // alert("鼠标点击了...."); // alert(event.button); if(event.keyCode == 13){ alert("提交表单"); } }*/ /* document.getElementById("username").onchange = function(event){ alert("改变了...") } document.getElementById("city").onchange = function(event){ alert("改变了...") }*/ /*document.getElementById("form").onsubmit = function(){ //校验用户名格式是否正确 var flag = false; return flag; }*/ } function checkForm(){ return true; } </script> <body> <form action="#" id="form" onclick="return checkForm();"> <input name="username" id="username"> <select id="city"> <option>--请选择--</option> <option>北京</option> <option>上海</option> <option>西安</option> </select> <input type="submit" value="提交"> </form> </body>
008 案例-表格全选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格全选</title> <style> table{ border: 1px solid; width: 500px; margin-left: 30%; } td,th{ text-align: center; border: 1px solid; } div{ margin-top: 10px; margin-left: 30%; } .out{ background-color: white; } .over{ background-color: pink; } </style> <script> /* 分析: 1.全选: * 获取所有的checkbox * 遍历cb,设置每一个cb的状态为选中 checked */ //1.在页面加载完后绑定事件 window.onload = function(){ //2.给全选按钮绑定单击事件 document.getElementById("selectAll").onclick = function(){ //全选 //1.获取所有的checkbox var cbs = document.getElementsByName("cb"); //2.遍历 for (var i = 0; i < cbs.length; i++) { //3.设置每一个cb的状态为选中 checked cbs[i].checked = true; } } document.getElementById("unSelectAll").onclick = function(){ //全不选 //1.获取所有的checkbox var cbs = document.getElementsByName("cb"); //2.遍历 for (var i = 0; i < cbs.length; i++) { //3.设置每一个cb的状态为未选中 checked cbs[i].checked = false; } } document.getElementById("selectRev").onclick = function(){ //反选 //1.获取所有的checkbox var cbs = document.getElementsByName("cb"); //2.遍历 for (var i = 0; i < cbs.length; i++) { //3.设置每一个cb的状态为相反 cbs[i].checked = !cbs[i].checked; } } document.getElementById("firstCb").onclick = function(){ //第一个cb点击 //1.获取所有的checkbox var cbs = document.getElementsByName("cb"); //获取第一个cb //2.遍历 for (var i = 0; i < cbs.length; i++) { //3.设置每一个cb的状态和第一个cb的状态一样 cbs[i].checked = this.checked; } } //给所有tr绑定鼠标移到元素之上和移出元素事件 var trs = document.getElementsByTagName("tr"); //2.遍历 for (var i = 0; i < trs.length; i++) { //移到元素之上 trs[i].onmouseover = function(){ this.className = "over"; } //移出元素 trs[i].onmouseout = function(){ this.className = "out"; } } } </script> </head> <body> <table> <caption>学生信息表</caption> <tr> <th><input type="checkbox" name="cb" id="firstCb"></th> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td><input type="checkbox" name="cb" ></td> <td>1</td> <td>令狐冲</td> <td>男</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td><input type="checkbox" name="cb" ></td> <td>2</td> <td>任我行</td> <td>男</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td><input type="checkbox" name="cb" ></td> <td>3</td> <td>岳不群</td> <td>?</td> <td><a href="javascript:void(0);">删除</a></td> </tr> </table> <div> <input type="button" id="selectAll" value="全选"> <input type="button" id="unSelectAll" value="全不选"> <input type="button" id="selectRev" value="反选"> </div> </body> </html>
009 案例06 -表单验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> *{ margin: 0px; padding: 0px; box-sizing: border-box; } body{ background: url("img/register_bg.png") no-repeat center; padding-top: 25px; } .rg_layout{ width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white; /*让div水平居中*/ margin: auto; } .rg_left{ /*border: 1px solid red;*/ float: left; margin: 15px; } .rg_left > p:first-child{ color:#FFD026; font-size: 20px; } .rg_left > p:last-child{ color:#A6A6A6; font-size: 20px; } .rg_center{ float: left; /* border: 1px solid red;*/ } .rg_right{ /*border: 1px solid red;*/ float: right; margin: 15px; } .rg_right > p:first-child{ font-size: 15px; } .rg_right p a { color:pink; } .td_left{ width: 100px; text-align: right; height: 45px; } .td_right{ padding-left: 50px ; } #username,#password,#email,#name,#tel,#birthday,#checkcode{ width: 251px; height: 32px; border: 1px solid #A6A6A6 ; /*设置边框圆角*/ border-radius: 5px; padding-left: 10px; } #checkcode{ width: 110px; } #img_check{ height: 32px; vertical-align: middle; } #btn_sub{ width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026 ; } .error{ color:red; } #td_sub{ padding-left: 150px; } </style> <script> /* 分析: 1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。 如果都为true,则监听器方法返回true 如果有一个为false,则监听器方法返回false 2.定义一些方法分别校验各个表单项。 3.给各个表单项绑定onblur事件。 */ window.onload = function(){ //1.给表单绑定onsubmit事件 document.getElementById("form").onsubmit = function(){ //调用用户校验方法 chekUsername(); //调用密码校验方法 chekPassword(); //return checkUsername() && checkPassword(); return checkUsername() && checkPassword(); } //给用户名和密码框分别绑定离焦事件 document.getElementById("username").onblur = checkUsername; document.getElementById("password").onblur = checkPassword; } //校验用户名 function checkUsername(){ //1.获取用户名的值 var username = document.getElementById("username").value; //2.定义正则表达式 var reg_username = /^\w{6,12}$/; //3.判断值是否符合正则的规则 var flag = reg_username.test(username); //4.提示信息 var s_username = document.getElementById("s_username"); if(flag){ //提示绿色对勾 s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>"; }else{ //提示红色用户名有误 s_username.innerHTML = "用户名格式有误"; } return flag; } //校验密码 function checkPassword(){ //1.获取用户名的值 var password = document.getElementById("password").value; //2.定义正则表达式 var reg_password = /^\w{6,12}$/; //3.判断值是否符合正则的规则 var flag = reg_password.test(password); //4.提示信息 var s_password = document.getElementById("s_password"); if(flag){ //提示绿色对勾 s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>"; }else{ //提示红色用户名有误 s_password.innerHTML = "密码格式有误"; } return flag; } </script> </head> <body> <div class="rg_layout"> <div class="rg_left"> <p>新用户注册</p> <p>USER REGISTER</p> </div> <div class="rg_center"> <div class="rg_form"> <!--定义表单 form--> <form action="#" id="form" method="get"> <table> <tr> <td class="td_left"><label for="username">用户名</label></td> <td class="td_right"> <input type="text" name="username" id="username" placeholder="请输入用户名"> <span id="s_username" class="error"></span> </td> </tr> <tr> <td class="td_left"><label for="password">密码</label></td> <td class="td_right"> <input type="password" name="password" id="password" placeholder="请输入密码"> <span id="s_password" class="error"></span> </td> </tr> <tr> <td class="td_left"><label for="email">Email</label></td> <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td> </tr> <tr> <td class="td_left"><label for="name">姓名</label></td> <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td> </tr> <tr> <td class="td_left"><label for="tel">手机号</label></td> <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td> </tr> <tr> <td class="td_left"><label>性别</label></td> <td class="td_right"> <input type="radio" name="gender" value="male" checked> 男 <input type="radio" name="gender" value="female"> 女 </td> </tr> <tr> <td class="td_left"><label for="birthday">出生日期</label></td> <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td> </tr> <tr> <td class="td_left"><label for="checkcode" >验证码</label></td> <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"> <img id="img_check" src="img/verify_code.jpg"> </td> </tr> <tr> <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td> </tr> </table> </form> </div> </div> <div class="rg_right"> <p>已有账号?<a href="#">立即登录</a></p> </div> </div> </body> </html>