abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>人事信息管理</title> <style> *{margin:0px;padding: 0px}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>人事信息管理</title>
<style>
*{margin:0px;padding: 0px}
body{background: #272B38}
/*表頭*/
.content_title{
background: #F2F2F2;
width:998px;
height: 60px;
border:1px solid #E6E6E6;}
.content_title h2{
margin-left: 20px;
color:#ccc;}
/*表主體*/
.content{
position: relative;
width:1000px;
margin:100px auto;
background:#F2F2F2;
height: 500px;}
.Archives {
width: 100%;
border-collapse: collapse;}
.Archives tr td ,
.Archives tr th{
border:1px solid #9D9D9D;
background: #F2F2F2;
text-align: center;
height: 30px;
font-size: 14px;}
.Archives tr td {font-size: 12px;}
/*按扭控件*/
.table_add , .item_add{
border:1px solid #C9C9C9;
color: #555555;
background: #fff;
padding: 3px;
font-size: 9px;}
.item_mod{
background:#009688;
border:0px;color:#fff;
padding: 2px;font-size: 9px;}
.item_del{
background:#FF5722;
border:0px;
color:#fff;
padding: 2px;
font-size: 9px;}
tr:hover td{background: #ccc;}
/*添加表單*/
.add_form{
float:none;
width:330px;
height: 330px;
background:rgba(39,43,56,0.9);
position: absolute;
z-index: 9 ;
top:100px;
left:350px;
border:2px solid #ff6700;
display: none;}
.add_form .form{margin: 20px 20px;color: #6078BF}
.add_form .form label{margin-right: 33px;}
.add_form .form_bear{margin-left:50px;}
.add_form .form_bear button{padding: 5px 15px;margin-left: 20px;}
</style>
</head>
<body>
<div>
<!-- *************************表頭*********************************************************************** -->
<div>
<h2>人事信息管理</h2>
<button style="float:right;margin-right:10px;" onclick="add(1,this)">添加</button>
</div>
<!-- ****************************表信息******************************************************************** -->
<table>
<tr>
<th>工號(hào)</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>部門</th>
<th>入職日期</th>
<th>操作</th>
</tr>
<tr>
<td>1001</td>
<td>張三</td>
<td>男</td>
<td>28</td>
<td>人事部</td>
<td>2018-08-08</td>
<td>
<button onclick="add(2,this)">插入</button>
<button onclick="add(3,this)">修改</button>
<button onclick="del_item(this)">刪除</button>
</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>女</td>
<td>30</td>
<td>行政部</td>
<td>2019-08-08</td>
<td>
<button onclick="add(2,this)">插入</button>
<button onclick="add(3,this)">修改</button>
<button onclick="del_item(this)">刪除</button>
</td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>男</td>
<td>28</td>
<td>開發(fā)部</td>
<td>2017-08-08</td>
<td>
<button onclick="add(2,this)">插入</button>
<button onclick="add(3,this)">修改</button>
<button onclick="del_item(this)">刪除</button>
</td>
</tr>
</table>
<div>
<div>
<label for="id">工號(hào)</label>
<input type="text" id = "idname" placeholder="請(qǐng)輸入工號(hào)"><br><br>
<label for="name">姓名</label>
<input type="text" id = "name" placeholder="請(qǐng)輸入姓名"><br><br>
<label for="sex">性別</label>
<input type="radio" name="sex" value="male" id="male"/> 男
<input type="radio" checked = "checked" name="sex" value="female" id ="female"/>女
<br><br>
<label for="age">年齡</label>
<input type="text" id = "age" placeholder="請(qǐng)輸入年齡"><br><br>
<label for="section">部門</label>
<select name="section">
<option value="personnel">人事部</option>
<option value="department">開發(fā)部</option>
<option value="stration">行政部</option>
<option value="project">財(cái)務(wù)部</option>
</select>
<br><br>
<label for="date" style="margin-right:0px">入職日期</label>
<input type="date" name="date" value="2019-01-01" /> <br><br>
<span>
<button onclick="submit()">確定</button> <button onclick="form_cancel()">取消</button>
</span>
</div>
</div>
</div>
<script type="text/javascript">
// 彈出對(duì)話框?qū)ο?let add_form = document.getElementsByClassName('add_form')[0];
let id = document.getElementById('idname') //id元素
let name = document.getElementById('name') //名字元素
let sex = document.getElementsByName('sex')//性別，用來獲取值
//性別要id來獲取才控制得了它的狀態(tài)
let male = document.getElementById('male')
let female = document.getElementById('female')
let age = document.getElementById('age') //年齡
let section = document.getElementsByName('section') //部門
let date = document.getElementsByName('date') //入職日期
let form_tbody = document.getElementsByTagName('tbody')[0]//獲取form tbody待增加行用
let form_style =1; //form表單表根據(jù)增加(默認(rèn))，插入、修改風(fēng)格（修改時(shí)工號(hào)input框禁用狀態(tài))
let this_tr ;
let sectionValue=0;
// 默認(rèn)數(shù)據(jù)
//初始化加入form表單數(shù)據(jù)
function updataform(){
//初始數(shù)據(jù)
id.value = '';
id.disabled = false;
name.value = '';
female.checked = 'true';
age.value = '';
date[0].value = '2019-01-02';
form_type = 1;
}
function form_insert(){
}
//取消按鈕退出
function form_cancel(){
add_form.style.display = 'none';
updataform();//還原表單初始值
this_tr = 0;
}
//確定按鈕后關(guān)閉
function submit(){
let item_data = document.createElement('tr')
if(female.checked=="checked"){
sex = "男"
}else{
sex = "女"
}
switch(section[0].value){
case "personnel":
sectionValue = "人事部";
break;
case "department":
sectionValue = "開發(fā)部";
break;
case "stration":
sectionValue = "行政部";
break;
case "project":
sectionValue = "財(cái)務(wù)部";
break;
}
if(id.value === '' || name.value =='' || age.value ==''){
alert('錄入數(shù)據(jù)不完整')
}else{
switch(form_style){
case 1:
item_data.innerHTML = '<td>'+ id.value + '</td><td>'+ name.value + '</td><td>'+ sex +'</td><td>'+age.value +'</td><td>'+ sectionValue +'</td><td>'+ date[0].value +'</td><td><button onclick="add(2,this)">插入</button> <button onclick="add(3,this)">修改</button> <button onclick="del_item(this)">刪除</button></td>'
form_tbody.appendChild(item_data)
break;
case 2:
item_data.innerHTML = '<td>'+ id.value + '</td><td>'+ name.value + '</td><td>'+ sex +'</td><td>'+age.value +'</td><td>'+ sectionValue +'</td><td>'+ date[0].value +'</td><td><button onclick="add(2,this)">插入</button> <button onclick="add(3,this)">修改</button> <button onclick="del_item(this)">刪除</button></td>'
form_tbody.insertBefore(item_data,this_tr)
break;
case 3:
item_data.innerHTML = '<td>'+ id.value + '</td><td>'+ name.value + '</td><td>'+ sex +'</td><td>'+age.value +'</td><td>'+ sectionValue +'</td><td>'+ date[0].value +'</td><td><button onclick="add(2,this)">插入</button> <button onclick="add(3,this)">修改</button> <button onclick="del_item(this)">刪除</button></td>'
form_tbody.replaceChild(item_data,this_tr)
break;
}
this_tr = 0;
add_form.style.display = 'none';
}
}
function add(pid,this_item){
this_tr = this_item.parentNode.parentNode;
switch(pid){
// alert('來自1添加消息');
case 1:
form_style = 1;
updataform();
add_form.style.display = "block";
break;
// alert('來自2插入消息');
case 2:
form_style = 2;
this_tr = this_item.parentNode.parentNode;
add_form.style.display = "block";
break;
// alert('來自3修改消息');
case 3:
// 找到父節(jié)點(diǎn)td的父節(jié)點(diǎn)tr;
form_style =3;
item_tr = this_item.parentNode.parentNode;
id.value = item_tr.children[0].innerHTML;
id.disabled = true;
name.value = item_tr.children[1].innerHTML;
sex = item_tr.children[2].innerHTML;
if(sex =="男"){
female.checked = false;
male.checked = true;
}else{
female.checked = true;
male.checked = false;
}
age.value = item_tr.children[3].innerHTML;
item_section = item_tr.children[4].innerHTML;
switch(item_section){
case "行政部":
section[0].value ="stration" ;
break;
case "開發(fā)部":
section[0].value = "department";
break;
case "人事部":
section[0].value = "personnel";
break;
case "財(cái)務(wù)部":
section[0].value ="project";
break;
}
date[0].value = item_tr.children[5].innerHTML;
add_form.style.display = "block"
break;
}
}
function del_item(item){
//當(dāng)前刪除按鈕父級(jí)td的父級(jí)tr
let item_tr = item.parentNode.parentNode;
form_tbody.removeChild(item_tr);
}
</script>
</body>
</html>
總結(jié)：dom功能太強(qiáng)大，雖然短短幾節(jié)課，綜合起來可以完成的任務(wù)太多太多。經(jīng)過這個(gè)小案例對(duì)dom基本用法有一定了解，后續(xù)多看些優(yōu)秀代碼和案例，盡多提升js編程開發(fā)水平。
隨課筆記：
1.dom方法遍歷文檔樹；
1.1文檔節(jié)點(diǎn)包含有三種屬性：
類型：nodeType nodeName nodeValue(nodeType包含了12種類型，常的類型如下4種。其它的用到再查）
(對(duì)于每種節(jié)點(diǎn)類型.nodeType .nodeName .nodeValue 所返回值詳細(xì)如下:
1:表示元素類型（type：Element。nodeName:元素名。 Value值：NULL）
2：屬性節(jié)點(diǎn)（type：Attr nodeName:屬性名稱。Value值：屬性值）
3:表示文本類型。（type：Text nodeName:#text。Value值：節(jié)點(diǎn)的內(nèi)容）
9：文檔節(jié)點(diǎn)（type：Document nodeName:#document片段。Value值：NULL）
1.2 獲取節(jié)點(diǎn)子節(jié)點(diǎn)document.childNodes
document.childNodes[1] 找到頁面中第二個(gè)節(jié)點(diǎn)，不排除獲取到的是回車換行生成的空白節(jié)點(diǎn)。
因此這方法容易被忽略掉的空白節(jié)點(diǎn)會(huì)導(dǎo)致提高獲取子節(jié)點(diǎn)出錯(cuò)率。
1.3 過濾非元素節(jié)點(diǎn)，只獲取html元素
document.children 代替document.childNodes 排除掉非元素節(jié)點(diǎn)影響獲取操作出錯(cuò)率。
document.children[0].children[2] 找到頁面根節(jié)點(diǎn)的第三個(gè)子節(jié)點(diǎn)。忽略掉了回車換行的空白節(jié)點(diǎn)。
父節(jié)點(diǎn).childrren.item(2)也是同效于上邊，找到每三個(gè)子節(jié)點(diǎn)
1.4 對(duì)子節(jié)點(diǎn)操作。
父節(jié)點(diǎn).firstElementChild.style....（對(duì)第一個(gè)子元素風(fēng)格操作）
父節(jié)點(diǎn).lastElementChild.style....（對(duì)最后一個(gè)子元素風(fēng)格操作）
父節(jié)點(diǎn).childElementCount...(返回子節(jié)點(diǎn)數(shù)量）也等效于 父節(jié)點(diǎn).children.length
1.5 對(duì)子節(jié)點(diǎn)的兄弟節(jié)點(diǎn)操作：
子節(jié)點(diǎn).nextElementSibling.style....(下一個(gè)兄弟節(jié)點(diǎn)風(fēng)格操作）
子節(jié)點(diǎn).previousElementSibling.style....(前一個(gè)兄弟節(jié)點(diǎn)風(fēng)格操作)
子節(jié)點(diǎn).parentElement.style....(當(dāng)前子節(jié)點(diǎn)的父節(jié)點(diǎn)風(fēng)格操作）也等效于 子節(jié)點(diǎn).parentNode.style...
2.操作HTML元素的屬性；（要操作元素的屬性必先用getElements..獲取到該元素
2.1 元素屬性分為兩種 ：原始屬性和自義定屬性。要對(duì)其操作如下
要改的元素.屬性名=要改的屬性值；
獲取到的元素.className='';(由于class屬性名跟js關(guān)鍵字有沖突，重新定義了。
a.item[0].className = '新類名'
2.2 在對(duì)自定義元素屬性，進(jìn)行操作前性判斷是否有該待類名屬性。
if(元素.hasAttribute('index自定義屬性'){
}
2.3 對(duì)自定義元素屬性管理
查看屬性值
獲取到的元素.getAttribute('index')
改變屬性值(setAttribute 也適用于原始屬性操作）
改變到的元素.setAttribute('index','新屬性')
刪除屬性值
改變到的元素.removeAttribute('index')
2.4 獲取元素屬性信息（返回的是數(shù)組且是只讀）
要查屬性的元素.attributes[0]
要查屬性的元素.attributes['id']
要查屬性的元素.attributes['style']返回現(xiàn)有風(fēng)格
3.對(duì)元素查內(nèi)容
元素內(nèi)容有兩種 ：1.html代碼 2.線純文本
3.1 對(duì)元素獲取包含的html代碼內(nèi)容：
要獲取的元素.innerHTML 返回的值包含了元素中帶的文本內(nèi)容和html代碼內(nèi)容。
要獲取的元素.innerHTML = 'html代碼' 在當(dāng)前元素中添加了html代碼內(nèi)容。
要獲取的元素.textContent 返回的值只包含了元素中帶有文本的內(nèi)容，html代碼內(nèi)容被過濾掉。
4.對(duì)節(jié)點(diǎn)增插刪改
4.1 增：
創(chuàng)建新元素：ul=document.createElement('ul') \\新加一個(gè)ul
節(jié)點(diǎn)增加內(nèi)容：當(dāng)前節(jié)點(diǎn).innerHTML = '<li>內(nèi)容<li>';
加入body中：document.body.appendChild(ul);
加入ul中： 創(chuàng)建li.innerHTML='內(nèi)容'，父類ul.appendChild('創(chuàng)建的li')
4.2 插：
ul.insertBefore(新建的子節(jié)點(diǎn)，要插入的子節(jié)點(diǎn)上)
ul.insertBefore(新建的子節(jié)點(diǎn),'NULL')等效于ul.appendChild('新建的子節(jié)點(diǎn)’)
4.3 改：
ul.replaceChild(新建的子節(jié)點(diǎn)，被替換的子節(jié)點(diǎn));
4.4 刪
ul.removeChild(子節(jié)點(diǎn));
Correcting teacher：韋小寶Correction time：2019-01-07 09:29:34
Teacher's summary：寫的很棒 看來你的js使用的已經(jīng)很熟練了啊 案例寫的沒毛病 繼續(xù)加油吧!