版权声明:本文为博主原创文章,遵循 CC 4.0 BY 版权协议,转载请附上原文出处链接和本声明。
DOM简单学习:为了满足案例要求
-
功能:控制html文档的内容
-
获取页面标签(元素)对象:Element
- document.getElementById(“id值”):通过元素的id获取元素对象
-
操作Element对象:
- 修改属性值:
- 明确获取的对象是哪一个?
- 查看API文档,找其中有哪些属性可以设置
- 修改标签体内容:
- 属性:innerHTML
- 获取元素对象
- 使用innerHTML属性修改标签体内容
- 修改属性值:
事件简单学习
-
功能: 某些组件被执行了某些操作后,触发某些代码的执行。
- 造句: xxx被xxx,我就xxx
- 我方水晶被摧毁后,我就责备对友。
- 敌方水晶被摧毁后,我就夸奖自己。
- 造句: xxx被xxx,我就xxx
-
如何绑定事件
-
直接在html标签上,指定事件的属性(操作),属性值就是js代码
- 事件:onclick— 单击事件
-
通过js获取元素对象,指定事件属性,设置一个函数
- 代码:
-
<body>
<img id="light" src="img/off.gif" onclick="fun();">
<img id="light2" src="img/off.gif">
<script>
function fun(){
alert('我被点了');
alert('我又被点了');
}
function fun2(){
alert('咋老点我?');
}
//1.获取light2对象
var light2 = document.getElementById("light2");
//2.绑定事件
light2.onclick = fun2;
</script>
</body>
- 案例1:电灯开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="../img/off.gif" id="light" id = "light">
<script>
/*
分析:
1.获取图片对象
2.绑定单击事件
3.每次点击切换图片
* 规则:
* 如果灯是开的 on,切换图片为 off
* 如果灯是关的 off,切换图片为 on
* 使用标记flag来完成
*/
// 1. 获取元素对象
var light = document.getElementById("light");
var flag = false; // 定义等的
// 2. 绑定事件
light.onclick = function () {
if (flag){
light.src="../img/off.gif";
flag = false;
}else {
light.src="../img/on.gif";
flag = true;
}
}
</script>
</body>
</html>
BOM:
-
概念:Browser Object Model 浏览器对象模型
- 将浏览器的各个组成部分封装成对象。
-
组成:
- Window:窗口对象
- Navigator:浏览器对象
- Screen:显示器屏幕对象
- History:历史记录对象
- Location:地址栏对象
-
Window:窗口对象
-
创建
-
方法
- 与弹出框有关的方法:
alert() 显示带有一段消息和一个确认按钮的警告框。 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 * 如果用户点击确定按钮,则方法返回true * 如果用户点击取消按钮,则方法返回false prompt() 显示可提示用户输入的对话框。 * 返回值:获取用户输入的值
- 与打开关闭有关的方法:
close() 关闭浏览器窗口。 * 谁调用我 ,我关谁 open() 打开一个新的浏览器窗口 * 返回新的Window对象
- 与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。 * 参数: 1. js代码或者方法对象 2. 毫秒值 * 返回值:唯一标识,用于取消定时器 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。 clearInterval() 取消由 setInterval() 设置的 timeout。
-
属性:
- 获取其他BOM对象:
history
location
Navigator
Screen - 获取DOM对象
document
- 获取其他BOM对象:
-
特点
- Window对象不需要创建可以直接使用 window使用。 window.方法名();
- window引用可以省略。 方法名();
-
-
Location:地址栏对象
-
创建(获取):
- window.location
- location
-
方法:
- reload() 重新加载当前文档。刷新
-
属性
- href 设置或返回完整的 URL。
-
-
History:历史记录对象
-
创建(获取):
1. window.history
2. history -
方法:
* back() 加载 history 列表中的前一个 URL。 * forward() 加载 history 列表中的下一个 URL。 * go(参数) 加载 history 列表中的某个具体页面。 * 参数: * 正数:前进几个历史记录 * 负数:后退几个历史记录
- 属性:
* length 返回当前窗口历史列表中的 URL 数量。
-
-
案例1 轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script>
/*
分析:
1. 在页面上定义img展示图片
2. 定义一个方法修改图片的src属性
3. 定义计时器,修改图片的src
* */
var num = 1;
function fun() {
num ++;
if(num > 3){
num = 1;
}
var img = document.getElementById("imgs");
img.src = "../img/banner_"+num+".jpg"
}
// 定时器
window.setInterval(fun,2000);
</script>
</head>
<body>
<img src="../img/banner_1.jpg" id="imgs">
</body>
</html>
- 案例二:自动跳转到首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动跳转</title>
<style>
#time{color:red}
p{text-align:center}
</style>
</head>
<body>
<p><span id = "time">5</span>秒后将跳转到百度</p>
<script>
/*
分析:
1. 显示页面效果
2. 倒计时效果实现
定义一个方法获取span标签对象,修改标签内容
定义一个计数器,1秒执行一次该方法
3. 在方法中判断如果num<0,则跳转首页
* */
var time = document.getElementById("time");
var num = 5;
function fun(){
num --;
if (num<=0){
// 跳转到百度
window.location.href = "https://www.baidu.com";
}
// 设置标签内容
time.innerHTML = num;
}
// 定义计时器
window.setInterval(fun,1000);
</script>
</body>
</html>
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:文档对象
- 创建(获取):在html dom模型中可以使用window对象来获取
- window.document
- document
- 方法:
- 获取Element对象:
- getElementById() : 根据id属性值获取元素对象。id属性值一般唯一
- getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
- getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
- getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
- 创建其他DOM对象:
createAttribute(name)
createComment()
createElement()
createTextNode()
- 获取Element对象:
- 属性
- 创建(获取):在html dom模型中可以使用window对象来获取
- Element:元素对象
- 获取/创建:通过document来获取和创建
- 方法:
- removeAttribute():删除属性
- setAttribute():设置属性
- Node:节点对象,其他5个的父对象
- 特点:所有dom对象都可以被认为是一个节点
- 方法:
- CRUD dom树:
- appendChild():向节点的子节点列表的结尾添加新的子节点。
- removeChild() :删除(并返回)当前节点的指定子节点。
- replaceChild():用新节点替换一个子节点。
- CRUD dom树:
- 属性:
- parentNode 返回节点的父节点。
- Document:文档对象
-
HTML DOM
- 标签体的设置和获取:innerHTML
- 使用html元素对象的属性
- 控制元素样式
- 使用元素的style属性来设置
如:
//修改样式方式1
div1.style.border = “1px solid red”;
div1.style.width = “200px”;
//font-size–> fontSize
div1.style.fontSize = “20px”; - 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。
- 使用元素的style属性来设置
-
代码
<!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">
div1
<div id = "div2">div2</div>
</div>
<a href="javascript:void (0);" id="a1">删除div2</a>
<a href="javascript:void (0);" id="a2">添加子节点div3</a>
<script>
/*
超链接功能:
1.可以被点击:样式
2.点击后跳转到href指定的url
需求:保留1功能,去掉2功能
实现:href="javascript:void(0);"
*/
/* 删除子节点 */
// 获取超链接
var element_a = document.getElementById("a1");
// 绑定单击事件
element_a.onclick = function (ev) {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
// 删除div的子节点div2
div1.removeChild(div2)
}
/* 添加子节点 */
var element_a2 = document.getElementById("a2");
element_a2.onclick = function (ev) {
var div1 = document.getElementById("div1");
// 创建div节点
var div3 = document.createElement("div");
div3.setAttribute("id","div3"); // 设置属性
div3.innerHTML="div3"
// 添加子节点div3
div1.appendChild(div3);
}
/* 属性 parentNode 返回当前节点的父亲节点*/
var div_02 = document.getElementById("div2");
document.write(div_02.parentNode)
</script>
</body>
</html>
控制样式
<!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 blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="div1">div</div>
<div id="div2">div</div>
<script>
var div1 = document.getElementById("div1");
div1.onclick = function (ev) {
// 修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
// font-size ---> fontSize
div1.style.fontSize = "20px";
}
var div2 = document.getElementById("div2");
div2.onclick = function (ev) {
// 修改样式2
div2.className = "d1"
}
</script>
</body>
</html>
- 案例——动态表格
<!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():通过父节点删除子节点
* */
// 使用innerHTML 添加
document.getElementById("btn_add").onclick = function (ev) {
// 获取文本框消息
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);\" οnclick=\"delTr(this);\" >删除</a></td>\n" +
"</tr>";
}
function delTr(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
事件监听机制:
-
概念:某些组件被执行了某些操作后,触发某些代码的执行。
- 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
- 事件源:组件。如: 按钮 文本输入框…
- 监听器:代码。
- 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。
-
常见的事件:
-
点击事件:
- onclick:单击事件
- ondblclick:双击事件
-
焦点事件
- onblur:失去焦点
- onfocus:元素获得焦点。
-
加载事件:
- onload:一张页面或一幅图像完成加载。
-
鼠标事件:
- onmousedown 鼠标按钮被按下。
- onmouseup 鼠标按键被松开。
- onmousemove 鼠标被移动。
- onmouseover 鼠标移到某元素之上。
- onmouseout 鼠标从某元素移开。
-
键盘事件:
- onkeydown 某个键盘按键被按下。
- onkeyup 某个键盘按键被松开。
- onkeypress 某个键盘按键被按下并松开。
-
选择和改变
- onchange 域的内容被改变。
- onselect 文本被选中。
-
表单事件:
- onsubmit 确认按钮被点击。
- onreset 重置按钮被点击。
-
-
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见事件</title>
<script>
// 2. 加载完成事件
window.onload = function (ev) {
// 1. 失去焦点事件
/* document.getElementById("username").onblur = function (ev) {
alert("失去了焦点");
};*/
// 3. 鼠标移动到元素上面的事件
/* document.getElementById("username").onmousemove = function (ev1) {
alert("鼠标laile");
}*/
// 鼠标点击事件
/* document.getElementById("username").onmousedown = function (ev1) {
alert(ev1.button);
}*/
//4. 键盘事件
/* document.getElementById("username").onkeydown = function (ev1) {
// alert(ev1.keyCode);
if (ev1.keyCode == 13){
alert("提交表单")
}
}*/
// 改变事件
/* document.getElementById("username").onchange = function (ev1) {
alert("改变了!")
}*/
// 表单事件
// 1. 自动绑定
/* document.getElementById("form").onsubmit = function (ev1) {
if(document.getElementById("username").value.length > 5)
return true;
else
return false;
};*/
// 2. 在标签是绑定
function func() {
if(document.getElementById("username").value.length > 5)
return true;
else
return false;
}
}
</script>
</head>
<body>
<!--
常见的事件:
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 重置按钮被点击。
-->
<form action="#" id="form">
<input name="username" id="username">
<input type="submit" value="提交">
</form>
</body>
</html>
- 案例 – 表格全选
<!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
*/
// 加载完后执行
window.onload = function (ev) {
// 获取第一个多选框
document.getElementById("firstCb").onclick = function (ev1) {
// 获取所有checkbox
var cds = document.getElementsByName("cb");
for (var i = 0; i < cds.length; i++) {
// 其他的与第一个保持一样的状态
cds[i].checked = this.checked;
}
}
// 给所有的tr标签绑定鼠标移到元素上和移除元素事件
var trs = document.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
// 移到元素上
<!--在事件中,this 指的是接收事件的元素。-->
trs[i].onmousemove = function (ev1) {
this.className = "over";
}
// 移出元素
trs[i].onmouseout = function (ev1) {
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>
</body>
</html>
- 案例 – 表格校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单校验</title>
</head>
<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 (ev) {
document.getElementById("form").onsubmit = function (ev1) {
return checkUser() && checkPassword();
}
// 给每个表单绑定失去焦点
document.getElementById("username").onblur = checkUser;
document.getElementById("password").onblur = checkPassword;
// 校验用户名
function checkUser() {
// 1, 获取username
var username = document.getElementById("username").value;
// 2. 定义正则表达是
var reg_username = /^\w{6,12}$/
// 3, 正则校验
var flag = reg_username.test(username);
// 提示信息
var s_username = document.getElementById("s_username");
if(flag){
s_username.innerHTML = "ok!"
return true;
}else {
s_username.innerHTML = "用户名格式不正确!"
return false;
}
}
// 校验密码
function checkPassword() {
// 1, 获取username
var password = document.getElementById("password").value;
// 2. 定义正则表达是
var reg_password = /^\w{6,12}$/
// 3, 正则校验
var flag = reg_password.test(password);
// 提示信息
var s_password = document.getElementById("s_password");
if(flag){
s_password.innerHTML = "ok!"
return true;
}else {
s_password.innerHTML = "密码格式不正确!"
return false;
}
}
}
</script>
<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 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>