JS中的DOM:为了满足案例的要求
功能：控制html文档内容 获取页面标签对象Element:document.getElementById():通过元素id获取对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="title">hello</h1>
<script>
var title = document.getElementById("title");
alert("结果如何");
title.innerHTML = "world";
</script>
</body>
</html>
事件绑定，用户通过它可以与页面交互
1、在html标签，指定事件属性，属性值为JS代码
2、通过JS获取元素对象，指定事件属性，设置函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
</head>
<body>
<img src="../img/xk1.jfif" id="k1">
<script>
var k1 = document.getElementById("k1");
var flag = false;
k1.onclick = function (){
if(flag){
k1.src = "../img/xk2.jfif";
flag = false;
} else{
k1.src = "../img/xk3.jfif";
flag = true;
}
}
</script>
</body>
</html>
window窗口对象
1、方法
* 1、与弹出框有关
* alert() 显示带有一段消息和一个确认按钮的警告框。
* confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。点击确定，会返回true,点击取消，会返回false
* prompt() 显示可提示用户输入的对话框。返回用户输入的内容
* 2、与页面打开关闭的方法
* open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
* close() 关闭浏览器窗口。他会关闭当前窗口
* 3、与定时器有关的方法
* setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
* setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
* clearInterval() 取消由 setInterval() 设置的 timeout。
* 2、属性
* 3、特点
* 1、对象不需创建，直接引用
* 2、window可以省略
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动跳转首页</title>
<style>
p{
text-align: center;
}
span{
color: #1E9FFF;
}
</style>
</head>
<body>
<p>
<span id="time">5</span>秒之后，自动跳转首页
</p>
<script>
//倒计时读秒
var second = 5;
function showtime(){
second --;
if(second <= 0){
location.href = "https://www.baidu.com";
}
var time = document.getElementById("time");
time.innerHTML = second;
}
setInterval(showtime,1000);
</script>
</body>
</html>
Location地址栏对象
1、创建 window.location/location
* 2、方法
* assign() 加载新的文档。
reload() 重新加载当前文档。
replace() 用新的文档替换当前文档。
3、属性
herf 设置或返回完整URL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Location对象</title>
</head>
<body>
<input type="button" id="btn" value="刷新">
<input type="button" id="btn1" value="百度">
<input type="button" id="btn2" value="新文档">
<script>
var btn = document.getElementById("btn");
btn.onclick = function (){
location.reload();
}
var href = location.href;
var btn1 = document.getElementById("btn1");
btn1.onclick = function (){
location.href = "https:www.baidu.com";
}
var btn2 = document.getElementById("btn2");
btn2.onclick = function (){
location.assign("https://www.w3school.com.cn/");
}
</script>
</body>
</html>
history历史记录对象
1、创建：window.history/history
* 2、方法：
* back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面。
3、属性
length 返回浏览器历史列表中的 URL 数量。
下面是我做的一个练习，动态表格的添加和删除，可以应用到增删改查中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
div{
text-align: center;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="sex" placeholder="请输入性别">
<input type="button" id="btn_add" value="添加">
</div>
<table align="center" border="1">
<caption>学生信息</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
</table>
<script>
//给按钮绑定单击事件
var btn_add = document.getElementById("btn_add");
btn_add.onclick = function (){
//获取文本框内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var sex = document.getElementById("sex").value;
//创建td,赋值td的标签体,td时文本框中的内容
var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.append(text_id);
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.append(text_name);
var td_sex = document.createElement("td");
var text_sex = document.createTextNode(sex);
td_sex.append(text_sex);
var td_a = document.createElement("td");
var a = document.createElement("a");
a.setAttribute("href","javascript:void(0);");
a.setAttribute("onclick","delet(this)");
var a1 = document.createTextNode("删除");
a.appendChild(a1);
td_a.appendChild(a);
//创建tr,并添加td到tr中
var tr = document.createElement("tr");
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_sex);
tr.appendChild(td_a)
//获取table
var table = document.getElementsByTagName("table")[0];
table.append(tr);
}
function delet(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>