1、DOM(文档对象模型)
1.1 概述
- 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。
- 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
- HTML DOM 模型被构造为对象的树:
- 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素。
- JavaScript 能够改变页面中的所有 HTML 属性。
- JavaScript 能够改变页面中的所有 CSS 样式。
- JavaScript 能够对页面中的所有事件做出反应。
1.2 查找HTML元素方法
- 通过 id 找到 HTML 元素
- 在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。
- 方法:document.getElementById(“id属性值”);
- 如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。
- 如果未找到该元素,则 x 将包含 null。
- 通过标签名找到 HTML 元素
- 方法:getElementsByTagName(“合法的元素名”);
- 通过类名找到HTML 元素
- 方法:getElementsByClassName(“class属性的值”)
- 通过标签的name属性找到HTML元素
- 方法:getElementsByName(“标签的name属性”)
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div" class="div" name="div">今天周三了</div>
<div class="div" name="div">明天平安夜了</div>
<div class="div">后天圣诞节了</div>
<script>
var id = document.getElementById("div");
console.log(id)
console.log("--------------")
var className = document.getElementsByClassName("div");
for (var i = 0; i < className.length; i++) {
console.log(className[i])
}
console.log("--------------")
var tagName = document.getElementsByTagName("div");
for (var i = 0; i < tagName.length; i++) {
console.log(tagName[i])
}
console.log("--------------")
var element = document.getElementsByName("div")[1]; //获取标签属性name为div的第二个标签对象
console.log(element)
console.log("--------------")
element.innerText="元旦要放假啦!!!!!!";
</script>
</body>
</html>
运行效果:
1.3 DOM操作节点
1.3.1 改变元素样式(css)
- 对象.style.property=新样式
- 将property替换成真实的css属性名
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var flag=true;
function btn() {
var element = document.getElementsByTagName("h1")[0];
if (flag){
element.style.color="#00FFFF"
element.style.fontSize="20px"
flag=false;
}else {
element.style.color="red";
element.style.fontSize="50px"
flag=true;
}
}
</script>
</head>
<body>
<input type="button" onclick="btn()" value="变化">
<h1 style="color: red; font-size: 50px">圣诞节快乐</h1>
</body>
</html>
1.3.1 改变元素内容(css)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
function btn() {
var div = document.getElementsByTagName("div")[0];
//innerHTML会解析标签
//innerText会以纯文本的形式添加内容
div.innerHTML="<h1>祝大家后天圣诞节快乐</h1>"
}
</script>
<body>
<div>祝大家明天平安夜快乐</div>
<input type="button" value="change" onclick="btn()">
</body>
</html>
1.3.1 改变元素属性(css)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var flag = true;
function btn() {
var img = document.getElementsByTagName("img")[0];
if (flag){
img.src="../img/节日快乐.png";
flag=false;
}else {
img.src="../img/火箭.png"
flag=true;
}
}
</script>
</head>
<body>
<input type="button" onclick="btn()" value="change">
<img src="../img/火箭.png">
</body>
</html>
1.3.4 节点的添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input{
height: 30px;
width: 100px;
}
</style>
<script>
function btn() {
//创建img标签节点
var img = document.createElement("img");
//给img标签节点赋值
img.src="../img/节日快乐.png"
var boby = document.getElementsByTagName("body")[0];
boby.appendChild(img)
}
</script>
</head>
<body>
<input type="button" value="add" onclick="btn()"><br/>
<img src="../img/火箭.png">
</body>
</html>
1.3.4 节点的克隆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input{
background-color: darkorange;
border: 0px;
border-radius: 10px;
width: 100px;
height: 50px;
font-size: 20px;
outline: none;
}
input:hover{
background-color: yellow;
border: 0px;
border-radius: 10px;
width: 100px;
height: 50px;
font-size: 20px;
}
</style>
<script>
function btn() {
//1.获取需要克隆的节点对象
var ul = document.getElementsByTagName("ul")[0];
//2.使用克隆方法克隆新的img标签
// cloneNode()默认为false,只能克隆标签本身和属性,不克隆内容
var newUl = ul.cloneNode();
//3.添加新的标签对象到指定父标签中
document.getElementsByTagName("body")[0].appendChild(newUl);
}
</script>
</head>
<body>
<input type="button" value="add" onclick="btn()"><br/>
<ul style="color: red">
牛奶
<li>酸奶</li>
<li>甜奶</li>
</ul>
</body>
</html>
1.3.4 节点的删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script>
//页面加载完毕再自动执行onload事件
onload = function () {
//1.获取所有的删除超链接
var dels = document.getElementsByClassName("del");
for(var i in dels){
//2.给每个删除超链接添加点击事件
dels[i].onclick = function () {
//获取当前a标签的父标签td标签
var td = this.parentElement;
//获取td标签的父标签tr标签
var tr = td.parentElement;
//删除tr标签
tr.remove();
}
}
}
</script>-->
<script>
//页面加载完毕再自动执行onload实现
onload=function () {
//1.获取所有的删除超链接
var dels = document.getElementsByClassName("del");
for(var i in dels){
//2.给每个删除超链接添加点击事件
dels[i].onclick=function () {
//获取当前a标签的父标签的td标签
var td = this.parentElement;
//获取td标签的父标签tr标签
var tr = td.parentElement;
tr.remove()
}
}
}
</script>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<th>全选<input type="checkbox"></th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>梓亮</td>
<td>钢丝球</td>
<td>
<a href="#">编辑</a>/
<a href="#" class="del">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>方蓝</td>
<td>打篮球</td>
<td>
<a href="#">编辑</a>/
<a href="#" class="del">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>银珍</td>
<td>打乒乓球</td>
<td>
<a href="#">编辑</a>/
<a href="#" class="del">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>玲苑</td>
<td>打羽毛球</td>
<td>
<a href="#">编辑</a>/
<a href="#" class="del">删除</a>
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center">
<a href="#">删除选中</a>
</td>
</tr>
</table>
</body>
</html>
2、BOM(浏览器对象模型)
- 浏览器对象模型(Browser Object Model),是一个用于访问浏览器和计算机屏幕的对象集合。我们可以通过全局对象window来访问这些对象。
2.属性
window.document 是一个BOM对象,表示的是当前所载入的文档(即页面),但它的方法和属性同时也属于DOM对象所涵盖的范围
window.frames 是当前页面中所有框架的集合
window.navigator 用于反应浏览器及其功能信息的对象
window.screen 提供浏览器以外的环境信息
window.location
- href属性:控制浏览器地址栏内容
- reload():刷新页面
- reload(true):刷新页面,不带缓存
- assign():加载新的页面
- replace():加载新的页面(注意:不会再浏览器的历史记录表中留下记录)
window.history
- window.history.length:获取历史记录的长度
- back():上一页
- forward():下一页
- go(num): 具体到哪一页 当num<0时,跳转到自己后方的第num个记录
- 当num>0时,跳转到自己前方的第num个记录
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="../css/input.css">
<script>
function btn() {
var flag = confirm("你长得不帅!")
if (flag){
alert("你有自知之明!")
}else {
alert("真不要脸!")
}
}
</script>
</head>
<body>
<input type="button" value="点击" onclick="btn()">
</body>
</html>
3、事件
- HTML DOM 允许我们通过触发事件来执行代码。·
- 比如以下事件:
- 元素被点击。
- 页面加载完成。
- 输入框被修改。
- 本例改变了 id=“id1” 的 HTML 元素的样式,当用户点击按钮时
3.1 onclick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
background-color: #56fff2;
}
</style>
<script>
function btn() {
open("https://www.baidu.com/")
}
</script>
</head>
<body>
<h1 onclick="btn()">标题标签</h1>
</body>
</html>
3.2 onchange
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
onload = function () {
//省份的下拉框对象
var province = document.getElementById("province");
//城市的下拉框对象
var city = document.getElementById("city");
province.onchange = function () {
//根据省份的下拉框选项改变城市下拉框的选项
if(this.value == "guangdong"){
city.innerHTML = "<option>广州</option>" +
"<option>深圳</option>";
}else if(this.value == "guangxi"){
city.innerText = "";
change1("南宁",city);
change1("桂林",city);
}
}
function change1(str,city) {
var option1 = document.createElement("option");
option1.innerText =str;
city.appendChild(option1);
}
}
</script>
</head>
<body>
<select id="province">
<option value="select">省份</option>
<option value="guangdong">广东</option>
<option value="guangxi">广西</option>
</select>
<select id="city">
<option>城市</option>
</select>
</body>
</html>
3.3 onmouseover、onmouseout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/input.css" type="text/css">
<script>
onload = function () {
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
//鼠标移入事件
input2.onmouseover = function () {
//把同意变成不同意
input1.value = "不同意";
//把不同意改变成同意
input2.value = "同意";
}
//鼠标移出事件
input2.onmouseout = function () {
input1.value = "同意";
input2.value = "不同意";
}
}
function btn() {
alert("11")
}
</script>
</head>
<body>
<h1>老板,今天我要请个假</h1>
<input type="button" style="width: 100px;height: 50px" value="同意" id="input1" onclick="btn()">
<input type="button" style="width: 100px;height: 50px" value="不同意" id="input2" onclick="btn()">
</body>
</html>
3.3 onsubmit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function btn() {
//获取用户名文本框的对象
var username = document.getElementById("username");
//获取密码框的对象
var password = document.getElementById("password");
if(username.value == "" || username.value == null){
alert("用户名为空");
return false;
}
if(password.value == "" || password.value == null){
alert("密码为空");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="https://www.baidu.com" onsubmit="return btn()">
账号:<input type="text" id="username"><br/>
密码:<input type="text" id="password"><br/>
<input type="submit">
</form>
</body>
</html>
4、cookie
Cookie 用于存储 web 页面的用户信息。
4.1 什么是 Cookie?
- Cookie 是一些数据, 存储于你电脑上的文本文件中。
- 当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。
- Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:
- 当用户访问 web 页面时,他的名字可以记录在 cookie 中。
- 在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。
4.2 cookie的创建
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
JavaScript 中,创建 cookie 如下所示:
- document.cookie=“username=John Doe”;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function addCookie() {
var date = new Date();
date.setTime(date.getTime()+1000*60*60);
document.cookie = "password=123456; expires="+date.toGMTString();
}
function getCookie() {
alert(document.cookie)
}
function delCookie() {
var date=new Date();
document.cookie = "password=123456 expires="+date.toGMTString();
};
</script>
</head>
<body>
<input type="button" onclick="addCookie()" value="保存cookie">
<input type="button" onclick="getCookie()" value="获取cookie">
<input type="button" onclick="delCookie()" value="删除cookie">
</body>
</html>
5、js对象
JavaScript 对象是拥有属性和方法的数据。
5.1 构造函数创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function User(name,age) {
this.name = name;
this.age = age;
//代表当前对象存在一个test的函数
this.test = function () {
alert("test方法");
}
}
var user = new User("zs",18);
//user.test();
alert(user.name+":"+user.age);
</script>
</head>
<body>
</body>
</html>
5.2 通过Object创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var user = new Object();
user.name="wzy";
user.id="1716040309";
alert(user.name+":"+user.id)
user.test=function () {
alert("test方法")
}
user.test();
</script>
</head>
<body>
</body>
</html>
5.3 使用JSON格式创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var json={
name:'wzy',
age:18,
test:function () {
alert("test方法")
}
};
alert(json.name+":"+json.age)
json.test()
</script>
</head>
<body>
</body>
</html>
6、定时器
js 定时器有以下两个方法:
- setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
- setTimeout() :在指定的毫秒数后调用函数或计算表达式。
6.1 setInterval()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
onload=function () {
//第一个参数为执行方法,第二个参数为延迟执行时间
timer = setTimeout(function () {
alert(1)
},3000)
};
function btn() {
clearTimeout(timer)
}
</script>
</head>
<body>
<input type="button" value="取消定时" onclick="btn()">
</body>
</html>
6.2 setTimeout()
循环定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
onload=function () {
timer = setInterval(function () {
alert("循环定时器")
},2000)
}
function btn() {
clearInterval(timer)
}
</script>
</head>
<body>
<input type="button" onclick="btn()" value="清理循环定时器">
</body>
</html>
时间显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
onload=function () {
setInterval(function () {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var milliSeconds = date.getMilliseconds()
var span = document.getElementsByTagName("span")[0];
span.innerText = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds+":"+milliSeconds;
},1)
}
</script>
</head>
<body>
<span style="text-align: center"></span>
</body>
</html>