DOM
操作
常用的操作流程:
//1. 事件
//2. 获取页面元素的方法(document.getElementById)
//3. 操作元素
//3.1 修改属性 value, type
//3.2 修改标记中间的内容 innerHTML
//3.3 修改样式
案例一:密码明文显示
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
<script>
function changeeye(ctrl)
{
//0. 获得当前pwd type值
var pwd = document.getElementById("pwd").type;
if(pwd == "password")
{
//1. pwd type=password -> text
document.getElementById("pwd").type = "text";
//2. 自己 class=fa fa-eye 注意:更改class属性使用 className
ctrl.className = "fa fa-eye";
}
else
{
//1. pwd type=password -> password
document.getElementById("pwd").type = "password";
//2. 自己 class=fa fa-eye-slash 注意:更改class属性使用 className
ctrl.className = "fa fa-eye-slash";
}
}
</script>
</head>
<body>
<div style="border:1px solid gainsboro;width:220px;">
<input style="border:none;outline:none" id="pwd" type="password"/><i class="fa fa-eye-slash" aria-hidden="true" onclick="changeeye(this)"></i>
</div>
</body>
</html>
``
案例二(onfocus, onblur)
```
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//onfocus, onblur
function addColor(ctrl)
{
//js操作css的时候 background-color -> backgroundColor
ctrl.style.backgroundColor = "pink";
}
function removeColor(ctrl)
{
ctrl.style.backgroundColor = "white";
//ctrl.style.backgroundColor = "transparent";//透明
}
</script>
</head>
<body>
<input type="text" onfocus="addColor(this)" onblur="removeColor(this)"/>
<button type="text">test</button>
</body>
```
案例三(下拉展示)
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/personal.js"></script>
<style>
#title
{
width:200px;
height:30px;
line-height: 30px;
}
#detail
{
width:200px;
height:0px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="title" onclick="togglediv()">查看详细信息</div>
<div id="detail">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquid atque, commodi consequuntur cum deserunt distinctio dolorem ea explicabo, facilis labore laborum molestiae nam necessitatibus, perferendis qui quibusdam suscipit veniam!
</div>
<div>xxxxxxxxx</div>
</body>
</html>
```
```
var height = 0;
function togglediv()
{
if(typeof(taskid) != "undefined")
{
clearInterval(taskid);
}
if(height<=0)
{
function changeheight()
{
//把detail的高度+1
height = height + 5;
document.getElementById("detail").style.height = (height) +"px";
if(height>=300)
{
clearInterval(taskid);
}
}
changeheight();
taskid = setInterval(changeheight,17);
}
else
{
function changeheight()
{
//把detail的高度+1
height = height - 5;
document.getElementById("detail").style.height = (height) +"px";
if(height<=0)
{
clearInterval(taskid);
}
}
changeheight();
taskid = setInterval(changeheight,17);
}
}
```
案例4:省市联动(onchange)
```
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function changeCity(ctrl)
{
var cityCtrl = document.getElementById("city");
//0.把city下的所有的option删除了
cityCtrl.options.length = 0;
//1.得到省的值,创建option,放在city下面
if(ctrl.value == "1")
{
var opt = document.createElement("option");
opt.value = "024";
opt.innerHTML = "沈阳市";
var opt2 = document.createElement("option");
opt2.value = "0411";
opt2.innerHTML = "大连市";
cityCtrl.appendChild(opt);
cityCtrl.appendChild(opt2);
}
else if(ctrl.value == "2")
{
var opt = document.createElement("option");
opt.value = "024";
opt.innerHTML = "长春市";
var opt2 = document.createElement("option");
opt2.value = "0411";
opt2.innerHTML = "四平市";
cityCtrl.appendChild(opt);
cityCtrl.appendChild(opt2);
}
else
{
var opt = document.createElement("option");
opt.value = "";
opt.innerHTML = "--请选择--";
cityCtrl.appendChild(opt);
}
}
</script>
</head>
<body>
<select id="province" onchange="changeCity(this)">
<option value="">--请选择--</option>
<option value="1">辽宁省</option>
<option value="2">吉林省</option>
</select>
<select id="city">
<option value="">--请选择--</option>
</select>
</body>
</html>
~~~
```
案例5(在表格上添加行):
```
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function addRecord()
{
//1.得到3个输入框的值
var sname = document.getElementById("sname").value;
var ssex = document.getElementById("ssex").value;
var sage = document.getElementById("sage").value;
//2.创建一个tr
var trCtrl = document.createElement("tr");
trCtrl.innerHTML = "<td>"+sname+"</td><td>"+ssex+"</td><td>"+sage+"</td>";
//3.把tr追加到table上
document.getElementById("tab").appendChild(trCtrl);
//document.getElementsByTagName("tbody")[0].appendChild(trCtrl);
}
</script>
</head>
<body>
<input id="sname" type="text" placeholder="姓名"/>
<input id="ssex" type="text" placeholder="性别"/>
<input id="sage" type="text" placeholder="年龄"/>
<button type="button" onclick="addRecord()">添加</button>
<table id="tab" border="1px">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>feiyy</td>
<td>女</td>
<td>20</td>
</tr>
<tr>
<td>james</td>
<td>女</td>
<td>20</td>
</tr>
</table>
</body>
</html>
~~~
```
案例6(键盘事件):
```
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//键盘事件 onkeydown(键盘按下), onkeypress(键盘按下并抬起),onkeyup(键盘抬起)
//onkeypress不响应功能键
//onkeyup 响应功能键
function kd(ctrl)
{
}
function kp(ctrl)
{
}
function ku(ctrl)
{
console.log("ku");
console.log(ctrl.value.length);
if(ctrl.value.length>=6)
{
document.getElementById("msg").innerHTML = "输入合法";
}
else
{
document.getElementById("msg").innerHTML = "必须6位以上";
}
}
</script>
<input type="text" onkeydown="kd(this)"/><span id="msg"></span>
</body>
</html>
~~~
```
案例7(鼠标事件)
```
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div
{
width:300px;
height:300px;
border:1px solid red;
}
</style>
</head>
<body>
<script>
//mouseover mousemove mouseout, mouseenter, mouseleave, mousedown, mouseup(PC)
//touchstart touchmove touchend(手机上的)
function mo(ctrl)
{
ctrl.style.backgroundColor = "orange";
}
function mout(ctrl)
{
ctrl.style.backgroundColor = "white";
}
var num = 1;
function mm(ctrl)
{
num = num - 0.001;
ctrl.style.opacity = num;
}
</script>
<div onmouseover="mo(this)" onmouseout="mout(this)" onmousemove="mm(this)">
</div>
</body>
</html>
~~~
```
案例8(onload事件)
```
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function init()
{
document.getElementById("txt").style.backgroundColor = "pink";
}
window.onload = function(){
document.getElementById("txt").style.backgroundColor = "pink";
};
</script>
</head>
<!--
<body onload="init()">
<input id="txt" type="text"/>
</body>
-->
<body>
<input id="txt" type="text"/>
</body>
</html>
~~~
```
案例9(只读变编辑)
```
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.on
{
border:none;
outline: none;
}
textarea
{
resize: none;
}
</style>
<script>
function doedit()
{
var input1 = document.getElementsByClassName("form-input");
for(var i=0; i<input1.length;i++)
{
//1. 对于form-input 删除readonly属性
//input1[i].removeAttribute("readonly");
input1[i].readOnly = false;
//2. 对于form-input 加上样式 style.border style.outline
//input1[i].style.border = "1px solid #eee";
//input1[i].style.outline = "auto";
input1[i].className = "form-input";
}
//3. 对于form-disable 删除disabled属性
var input2 = document.getElementsByClassName("form-disable");
for(var i=0; i<input2.length;i++)
{
input2[i].disabled = false;
}
}
function dosave()
{
var input1 = document.getElementsByClassName("form-input");
for(var i=0; i<input1.length;i++)
{
//1. 对于form-input 删除readonly属性
//input1[i].removeAttribute("readonly");
input1[i].readOnly = true;
//2. 对于form-input 加上样式 style.border style.outline
//input1[i].style.border = "1px solid #eee";
//input1[i].style.outline = "auto";
input1[i].className = "form-input on";
}
//3. 对于form-disable 删除disabled属性
var input2 = document.getElementsByClassName("form-disable");
for(var i=0; i<input2.length;i++)
{
input2[i].disabled = true;
}
}
</script>
</head>
<body>
<button type="button" onclick="doedit()">编辑</button>
<button type="button" onclick="dosave()">保存</button>
<form>
<div>
姓名: <input class="form-input on" id="sname" type="text" value="小美" readonly/>
</div>
<div>
备注: <textarea class="form-input on" readonly>这个人很懒,什么都没有留下</textarea>
</div>
<div>
性别:<input class="form-disable" name="sex" type="radio" checked="checked" disabled/>男 <input class="form-disable" name="sex" type="radio" disabled/>女
</div>
<div>
城市:
<select class="form-disable" disabled>
<option>辽宁省</option>
<option>吉林省</option>
</select>
<select class="form-disable" disabled>
<option>沈阳市</option>
<option>大连市</option>
</select>
</div>
</form>
</body>
</html>
~~~
```
案例10(遮罩和弹出层)
```
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html
{
height:100%;
}
body
{
margin:0px;
height:100%;
}
#mask
{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background-color: black;
opacity:0.5;
display:none;
}
/*display: none
display: block
display: inline
display: inline-block 以行级元素显示,有块级元素的宽高属性,作用让div横排
*/
#questions
{
width:300px;
height:200px;
background-color: pink;
position:relative;
margin:auto;
top:200px;
display:none;
}
#questions span
{
position:absolute;
top:-30px;
right:-30px;
font-size: 40px;
font-weight: bold;
color:white;
}
</style>
<script>
function showquestion()
{
document.getElementById("mask").style.display = "block";
document.getElementById("questions").style.display = "block";
}
function hidequestions()
{
document.getElementById("mask").style.display = "none";
document.getElementById("questions").style.display = "none";
}
</script>
</head>
<body>
<!--对于块级元素,宽度占父级元素的100%,高度由内容区域决定-->
<button onclick="showquestion()">提问</button>
<div id="mask">
</div>
<div id="questions">
<span onclick="hidequestions()">x</span>
</div>
</body>
</html>
~~~
```
