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>
~~~
```
