DOM
DOM：
DOM：对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
HTML DOM （文档对象模型）：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
查找元素：
注意：document表示该文档，就是dom树。
通过id查找元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span id="span01">今天天气真好</span>
<br />
<span>微风吹过林梢</span>
<script type="text/javascript">
//通过id获取元素
var span01 = document.getElementById("span01");
//绑定单击事件
span01.onclick = function(){
//设置内容
span01.innerHTML = "今日骄阳真好";
}
</script>
</body>
</html>
通过class查找元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span class="myclass">今天天气真好</span>
<br />
<span class="myclass">微风吹过林梢</span>
<script type="text/javascript">
//通过class属性获取元素数组
var span01 = document.getElementsByClassName("myclass")[0];
//绑定单击事件
span01.onclick = function(){
//设置内容
span01.innerHTML = "xxxx";
}
</script>
</body>
</html>
通过标签查找元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span>今天天气真好</span>
<br />
<span>微风吹过林梢</span>
<script type="text/javascript">
//通过标签获取元素数组
var span01 = document.getElementsByTagName("span")[0];
//绑定单击事件
span01.onclick = function(){
//设置内容
span01.innerHTML = "xxxx";
}
</script>
</body>
</html>
通过name属性查找元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
width: 100px;
}
</style>
</head>
<body>
<img name="xxx" src="../../img/花.jpg" />
<img name="xxx" src="../../img/花.jpg" />
<script type="text/javascript">
//通过name属性获取元素数组
var img = document.getElementsByName("xxx")[0];
//绑定单击事件
img.onclick = function(){
//设置属性
img.src = "../../img/花1.jpg";
}
</script>
</body>
</html>
操作元素：
操作内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="fun01()">获取内容 - innerText</button>
<button onclick="fun02()">设置内容 - innerText</button>
<br />
<span>彼时阳光正好</span>
<br />
<button onclick="fun03()">获取内容 - innerHTML</button>
<button onclick="fun04()">设置内容 - innerHTML</button>
<br />
<span>彼时阳光正好</span>
<script type="text/javascript">
var span01 = document.getElementsByTagName("span")[0];
var span02 = document.getElementsByTagName("span")[1];
function fun01(){
console.log(span01.innerText);
}
function fun02(){
span01.innerText = "<h1>微风吹过林梢</h1>";
}
function fun03(){
console.log(span02.innerHTML);
}
function fun04(){
//把文本当做html标签设置
span02.innerHTML = "<h1>微风吹过林梢</h1>";
}
</script>
</body>
</html>
操作属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="fun01()">获取属性</button>
<button onclick="fun02()">设置属性</button>
<br />
<img src="../../img/花1.jpg" width="100px" height="100px" />
<br />
<button onclick="fun03()">获取属性</button>
<button onclick="fun04()">设置属性</button>
<br />
<img src="../../img/花1.jpg" width="100px" height="100px" />
<script type="text/javascript">
var img1 = document.getElementsByTagName("img")[0];
var img2 = document.getElementsByTagName("img")[1];
function fun01(){
console.log(img1.src);
console.log(img1.width);
console.log(img1.height);
}
function fun02(){
img1.src = "../../img/花.jpg";
//不带单位
img1.width = "200";
img1.height = "200";
}
function fun03(){
console.log(img2.getAttribute("src"));
console.log(img2.getAttribute("width"));
console.log(img2.getAttribute("height"));
}
function fun04(){
img2.setAttribute("src","../../img/花.jpg");
//带单位
img2.setAttribute("width","100%");
img2.setAttribute("height","100%");
}
</script>
</body>
</html>
操作样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="fun01()">获取样式</button>
<button onclick="fun02()">设置样式</button>
<br />
<span>彼时阳光正好</span>
<script type="text/javascript">
var span = document.getElementsByTagName("span")[0]
function fun01(){
console.log(span.style.color);
console.log(span.style.fontSize);
}
function fun02(){
span.style.color = "red";
span.style.fontSize = "50px";
}
</script>
</body>
</html>
事件：
单击事件：
单击事件：鼠标点击之后发生的事件。
onclick
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 onclick="this.innerText='微风吹过林梢'">彼时阳光正好</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 onclick="fun01()">彼时阳光正好</h1>
<script type="text/javascript">
var h1 = document.getElementsByTagName("h1")[0];
function fun01(){
h1.innerText = "微风吹过林梢";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 onclick="fun01(this)">彼时阳光正好</h1>
<script type="text/javascript">
function fun01(obj){
obj.innerText = "微风吹过林梢";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>彼时阳光正好</h1>
<script type="text/javascript">
var h1 = document.getElementsByTagName("h1")[0];
//绑定单击事件
h1.onclick = function(){
this.innerText = "微风吹过林梢";
}
</script>
</body>
</html>
页面加载事件：
页面加载事件：事件会在页面元素和图像加载完成后立即发生。
window.onload
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//页面加载事件：事件会在页面元素和图像加载完成后立即发生
window.onload = function(){
var h1 = document.getElementsByTagName("h1")[0];
h1.onclick = function(){
this.innerText = "微风吹过林梢";
}
}
</script>
</head>
<body>
<h1>彼时阳光正好</h1>
</body>
</html>
键盘事件：
键盘事件：onkeydown、onkeypress、onkeyup
onkeydown：键盘按下就执行。onkeypress：键盘按下非功能键就执行。
onkeyup：键盘按下去并松开后执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"
onkeydown="myDown()"
onkeypress="myPress()"
onkeyup="myUp()"
/>
<script type="text/javascript">
function myDown(){
//键盘按下事件
console.log("down");
}
function myPress(){
//键盘按下事件 - 功能键(上下左右、删除键...)是不会被触发的。
console.log("press");
}
function myUp(){
//键盘松开事件
console.log("up");
}
</script>
</body>
</html>
案例：
需求：设置一个文本框，每敲一个字母，会触发将输入文本转换为大写的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" onkeyup="myUp(this)"/>
<script type="text/javascript">
function myUp(obj){
//获取输入框的value属性
var v = obj.value;
//转大写
v = v.toUpperCase();
//设置value属性
obj.value = v;
}
</script>
</body>
</html>
鼠标事件：
onMouseDown —> 按下鼠标时触发 。
onMouseUp--------> 按下鼠标松开鼠标时触发 。
onMouseOver-----> 鼠标移入时触发 。
onMouseOut-------> 鼠标移出时触发 。
onMouseMove----> 鼠标移动时触发。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="../../img/花.jpg" width="100px" height="100px"
onmousedown="myDown()" onmouseup="myUp()" onmousemove="myMove()"
onmouseover="myOver()" onmouseout="myOut()"/>
<script type="text/javascript">
function myDown(){//鼠标按下事件
console.log("down");
}
function myUp(){//鼠标松开事件
console.log("up");
}
function myMove(){//鼠标移动事件
console.log("move");
}
function myOver(){//鼠标移入事件
console.log("over");
}
function myOut(){//鼠标移出事件
console.log("out");
}
</script>
</body>
</html>
案例：
需求：鼠标移动到哪个头像，哪个头像就高亮。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
width: 100px;
height: 100px;
opacity: 0.3;/*设置透明度为30%*/
}
</style>
</head>
<body>
<img src="../../img/touxiang01.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/>
<img src="../../img/touxiang02.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/>
<img src="../../img/touxiang03.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/>
<img src="../../img/tx1.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/>
<img src="../../img/tx2.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/>
<img src="../../img/tx3.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/>
<script type="text/javascript">
function myOver(obj){//鼠标移入事件
obj.style.opacity = 1;
}
function myOut(obj){//鼠标移出事件
obj.style.opacity = 0.3;
}
</script>
</body>
</html>
改进：
简化代码，设置动态绑定事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
width: 100px;
height: 100px;
opacity: 0.3;/*设置透明度*/
}
</style>
</head>
<body>
<img src="../../img/touxiang01.jpg" />
<img src="../../img/touxiang02.jpg" />
<img src="../../img/touxiang03.jpg" />
<img src="../../img/tx1.jpg" />
<img src="../../img/tx2.jpg" />
<img src="../../img/tx3.jpg" />
<img src="../../img/花.jpg" />
<script type="text/javascript">
//动态绑定事件
var imgArr = document.getElementsByTagName("img");
for(var i = 0;i<imgArr.length;i++){
var img = imgArr[i];
img.onmouseover = function(){
this.style.opacity = 1;
}
img.onmouseout = function(){
this.style.opacity = 0.3;
}
}
</script>
</body>
</html>
焦点事件：
焦点事件：onfocus、onblur。
onfocus：获取焦点事件。onblur：失去焦点事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" onfocus="myFocus()" onblur="myBlur()" />
<script type="text/javascript">
function myFocus(){
//获取焦点事件
console.log("focus");
}
function myBlur(){
//失去焦点事件
console.log("blur");
}
</script>
</body>
</html>
案例：
在输入框中用 value 属性来实现 placeholder 属性的功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"
value="请输入账号..."
onfocus="myFocus(this)"
onblur="myBlur(this)"
/>
<script type="text/javascript">
function myFocus(obj){//获取焦点事件
if(obj.value == "请输入账号..."){
obj.value = "";
}
}
function myBlur(obj){//失去焦点事件
//判断浏览器是否兼容次方法
if(obj.value.trim){
if(obj.value.trim() == ""){
obj.value = "请输入账号...";
}
}else{
//注意：IE老版本是不支持trim()
//将字符串的首尾空格的字符替换成空字符串，以达到去空格的目的
if(obj.value.replace(/(^\s+)|(\s+$)/g,"") == ""){
obj.value = "请输入账号...";
}
}
}
</script>
</body>
</html>
alert(obj.value.trim);
获取该函数里的代码，如果当前浏览器支持该函数，就返回函数里的代码（字符串），如果不支持就返回undefined
节点：
操作节点：
动态添加节点。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="addP()">添加p标签</button>
<div id="manager"></div>
<script type="text/javascript">
var manager = document.getElementById("manager");
function addP(){
//创建节点 - <p></p>
var p = document.createElement("p");
//创建文本内容 - 用良心做教育
var text = document.createTextNode("用良心做教育");
//将文本内容添加到节点里 - <p>用良心做教育</p>
p.appendChild(text);
//将节点添加到div中
manager.appendChild(p);
}
</script>
</body>
</html>
动态添加节点和删除节点。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="addImg()">添加img标签</button>
<button onclick="deleteImg()">删除img标签</button>
<div id="manager"></div>
<script type="text/javascript">
var manager = document.getElementById("manager");
function addImg(){
//创建节点 - <img />
var img = document.createElement("img");
//设置属性
img.setAttribute("src","../../img/tx2.jpg");
img.setAttribute("width","100px");
img.setAttribute("height","100px");
//创建节点 - <br/>
var br = document.createElement("br");
//将节点添加到div中
manager.appendChild(img);
manager.appendChild(br);
}
function deleteImg(){
//删除思路：由父节点删除子节点
//查询需要删除的节点
var img = document.getElementsByTagName("img")[0];
var br = document.getElementsByTagName("br")[0];
manager.removeChild(img);
manager.removeChild(br);
}
</script>
</body>
</html>
案例：
点击删除按钮，删除该行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" width="300px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>27</td>
<td>
<button onclick="myDelete(this)">删除</button>
</td>
</tr>
<tr>
<td>小水</td>
<td>女</td>
<td>23</td>
<td>
<button onclick="myDelete(this)">删除</button>
</td>
</tr>
<tr>
<td>小惠</td>
<td>女</td>
<td>25</td>
<td>
<button onclick="myDelete(this)">删除</button>
</td>
</tr>
<tr>
<td>小香</td>
<td>女</td>
<td>24</td>
<td>
<button onclick="myDelete(this)">删除</button>
</td>
</tr>
</table>
<script type="text/javascript">
function myDelete(obj){
//parentNode：找父节点
var tr = obj.parentNode.parentNode;
var table = tr.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
案例：
计算器：
计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="text01"/>
+
<input type="text" id="text02"/>
<button onclick="add()">=</button>
<input type="text" id="text03"/>
<script type="text/javascript">
function add(){
//获取到输入框的value是string类型
//parseInt()将字符串转换为数字。
var result = parseInt(text01.value) + parseInt(text02.value);
text03.value = result;
}
</script>
</body>
</html>
二级联动：
二级联动：省变了，对应的市也会改变。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select id="province">
<option value="sc">四川</option>
<option value="hn">湖南</option>
<option value="hb">湖北</option>
</select>省
<select id="city">
<option>成都</option>
<option>绵阳</option>
<option>雅安</option>
<option>乐山</option>
<option>攀枝花</option>
</select>市
<script type="text/javascript">
//给省份绑定改变事件
province.onchange = function(){
if(this.value == "sc"){
city.innerHTML = "<option>成都</option><option>绵阳</option><option>雅安</option><option>乐山</option><option>攀枝花</option>";
}else if(this.value == "hn"){
city.innerHTML = "<option>长沙</option><option>永州</option><option>娄底</option><option>益阳</option><option>张家界</option>";
}else if(this.value == "hb"){
city.innerHTML = "<option>武汉</option><option>黄冈</option><option>仙桃</option><option>咸宁</option><option>孝感</option>";
}
}
</script>
</body>
</html>
优化：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select id="province">
<option value="sc">四川</option>
<option value="hn">湖南</option>
<option value="hb">湖北</option>
</select>省
<select id="city">
<option>成都</option>
<option>绵阳</option>
<option>雅安</option>
<option>乐山</option>
<option>攀枝花</option>
</select>市
<script type="text/javascript">
//给省份绑定改变事件
province.onchange = function(){
if(this.value == "sc"){
updateCity(["成都","绵阳","雅安","乐山","攀枝花"]);
}else if(this.value == "hn"){
updateCity(["长沙","永州","娄底","益阳","张家界"]);
}else if(this.value == "hb"){
updateCity(["武汉","黄冈","仙桃","咸宁","孝感"]);
}
}
function updateCity(arr){
//清空city列表
city.length = 0;
for(var i = 0;i<arr.length;i++){
var option = document.createElement("option");
option.innerText = arr[i];
city.appendChild(option);
}
}
</script>
</body>
</html>
提交案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
color: red;
}
</style>
</head>
<body>
<form id="registerForm" action="#" method="post">
账户：<input type="text" id="username" /><span></span><br />
密码：<input type="password" id="password" /><span></span><br />
确认密码：<input type="password" id="repassword" /><span></span><br />
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
var span01 = document.getElementsByTagName("span")[0];
var span02 = document.getElementsByTagName("span")[1];
var span03 = document.getElementsByTagName("span")[2];
//给表单绑定提交事件
registerForm.onsubmit = function(){
//每次提交时，清空提示
span01.innerText = "";
span02.innerText = "";
span03.innerText = "";
var bool = true;
if(username.value.trim() == ""){
span01.innerText = "账号不能为空";
bool = false;
}
if(password.value.trim() == ""){
span02.innerText = "密码不能为空";
bool = false;
}
if(repassword.value.trim() == ""){
span03.innerText = "确认密码不能为空";
bool = false;
}else if(repassword.value.trim() != password.value.trim()){
span03.innerText = "确认密码与密码不一致";
bool = false;
}
return bool;
}
</script>
</body>
</html>
另一种：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
color: red;
}
</style>
</head>
<body>
<form action="#" method="post" onsubmit="return fun01()">
账户：<input type="text" id="username" /><span></span><br />
密码：<input type="password" id="password" /><span></span><br />
确认密码：<input type="password" id="repassword" /><span></span><br />
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
var span01 = document.getElementsByTagName("span")[0];
var span02 = document.getElementsByTagName("span")[1];
var span03 = document.getElementsByTagName("span")[2];
function fun01(){
span01.innerText = "";
span02.innerText = "";
span03.innerText = "";
var bool = true;
if(username.value.trim() == ""){
span01.innerText = "账号不能为空";
bool = false;
}
if(password.value.trim() == ""){
span02.innerText = "密码不能为空";
bool = false;
}
if(repassword.value.trim() == ""){
span03.innerText = "确认密码不能为空";
bool = false;
}else if(repassword.value.trim() != password.value.trim()){
span03.innerText = "确认密码与密码不一致";
bool = false;
}
return bool;
}
</script>
</body>
</html>