本課程對(duì)應(yīng)的視頻地址：http://edu.51cto.com/course/15019.html
DOM:Document Object Model
Core DOM（核心DOM），適用于各種結(jié)構(gòu)化文檔
XML DOM，專用于XML文檔
HTML DOM，專用于HTML文檔（了解）
document.getElementById("id"):根據(jù)id元素來(lái)查找某個(gè)對(duì)象
document.getElementsByTagName("tag"):根據(jù)標(biāo)簽來(lái)獲取元素-->數(shù)組
document.getElementsByName("name"):根據(jù)name來(lái)獲取元素-->數(shù)組
nextElementSibling:下一個(gè)元素節(jié)點(diǎn)previousElementSibling：上一個(gè)元素節(jié)點(diǎn)childNode：子節(jié)點(diǎn)（包含文本節(jié)點(diǎn)）children:子元素節(jié)點(diǎn)childElementCount：子元素的數(shù)量lastElementChild:最后一個(gè)元素節(jié)點(diǎn)firstElementChild:第一個(gè)元素節(jié)點(diǎn)firstChild：第一個(gè)節(jié)點(diǎn)lastChild:最后一個(gè)節(jié)點(diǎn)nodeType:節(jié)點(diǎn)的類型 元素節(jié)點(diǎn)：1 屬性節(jié)點(diǎn)：2 文本節(jié)點(diǎn)：3parentNode：父節(jié)點(diǎn)案例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function changeImg(){ var imgObject = document.getElementById("myimg"); imgObject.src="../images/2.jpg"; } function getData(){ var seasons = document.getElementsByName("season"); var str= ""; for(var i = 0 ;i<seasons.length;i ) { str=str seasons[i].value "<br/>"; } document.getElementById("result").innerHTML=str; } function getInputData(){ var inputs = document.getElementsByTagName("input"); var str= ""; for(var i = 0 ;i<inputs.length;i ) { str=str inputs[i].value "<br/>"; } document.getElementById("result").innerHTML=str; } </script></head><body> <img src = "../images/1.jpg" id = "myimg"/> <input type="button" value="修改圖片" onclick="changeImg()"/> <input type="text" value="春" name="season"/> <input type="text" value="夏" name="season"/> <input type="text" value="秋" name="season"/> <input type="text" value="東" name="season"/> <input type="button" value="得到季節(jié)" onclick="getData()"/> <input type="button" value="獲取所有的input標(biāo)簽的內(nèi)容" onclick="getInputData()"/> <div id = "result"> </div></body></html>也可以通過(guò)setAttribute(attr,value)設(shè)置對(duì)象的屬性
imgObject.setAttribute("src","../images/2.jpg");imgObject.setAttribute("onclick","myFun()");那么如果想獲取屬性的值，就可以通過(guò)getAttribute（"name"）來(lái)獲取
如果我們想對(duì)對(duì)象加樣式,通過(guò)object.style屬性操作
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); box.style.border="1px solid red"; box.style.backgroundColor="#ccc"; box.style.width="300px"; box.style.height="300px"; } </script>案例：
<script type="text/javascript"> window.onload = function(){ var div = document.createElement("div"); div.style.width="400px"; div.style.height="400px"; div.style.border="1px solid red"; document.body.appendChild(div); var input = document.createElement("input") ; input.setAttribute("type","text"); input.setAttribute("value","zhangsan"); div.appendChild(input); } </script>與dom相關(guān)操作有哪些呢？
createElement：創(chuàng)建一個(gè)元素節(jié)點(diǎn)
appendChild：將這個(gè)元素加入某個(gè)元素內(nèi)部
insertBefore（在某個(gè)節(jié)點(diǎn)前面插入新的節(jié)點(diǎn)）：parentElement.insertBefore(newNode,thisNode)
cloneNode:克隆,有一個(gè)參數(shù)，默認(rèn)是false，當(dāng)為true表示深克?。ㄟB同子節(jié)點(diǎn)一起克隆）
案例2：插入兄弟節(jié)點(diǎn)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> window.onload=function (ev) { var cc = document.getElementById("cc"); var li = document.createElement("li"); li.innerHTML="貂蟬"; //insertBefore(newNode,已經(jīng)存在的節(jié)點(diǎn)) document.body.insertBefore(li,cc); } </script></head><body> <li>關(guān)羽</li> <li id="cc">曹操</li> <li>狂鐵</li></body></html>案例3：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function copy(){ var img = document.getElementById("id01"); var newImg = img.cloneNode(); document.body.insertBefore(newImg,img); } function copyul(){ var myul = document.getElementById("myul"); document.body.appendChild(myul.cloneNode(true)); } </script></head><body> <img id = "id01" src = "../images/1.jpg"/> <input type="button" onclick="copy()" value="復(fù)制"/> <ul id="myul"> <li>關(guān)羽</li> <li>盾山</li> </ul> <input type="button" onclick="copyul()" value="復(fù)制ul"/></body></html>removeChild:刪除某個(gè)子節(jié)點(diǎn)
replaceChild（new,old）:新的替換舊的節(jié)點(diǎn)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function myremove(){ var img = document.getElementById("id02"); document.body.removeChild(img); } function myreplace(){ var img = document.getElementById("id01"); var newImg = document.createElement("img"); newImg.setAttribute("src","../images/5.jpg"); document.body.replaceChild(newImg,img); } </script></head><body><img id = "id01" src = "../images/1.jpg"/><img id = "id02" src = "../images/2.jpg"/><img id = "id03" src = "../images/3.jpg"/><input type="button" onclick="myremove()" value="移除"/><input type="button" onclick="myreplace()" value="替換操作"/></body></html><script type="text/javascript"> window.onload=function(){ var trs = document.getElementsByTagName("tr"); for(var i = 0 ;i<trs.length;i ) { if(i%2==0) { trs[i].style.backgroundColor="#ccc"; } } } </script>高亮顯示
<script type="text/javascript"> window.onload=function(){ var trs = document.getElementsByTagName("tr"); //onmouseover :鼠標(biāo)經(jīng)過(guò) //onmouseout:鼠標(biāo)離開(kāi) for(var i = 0 ;i<trs.length;i ) { trs[i].onmouseover=function(){ this.style.backgroundColor='#ccc'; }; trs[i].onmouseout=function(){ this.style.backgroundColor='white'; } } } </script><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload=function(){ var allObject = document.getElementById("all"); var allHobbies = document.getElementsByName("hobby"); //全選效果 allObject.onclick=function(){ for(var i = 0 ;i<allHobbies.length;i ) { allHobbies[i].checked=this.checked; } } for(var i = 0;i<allHobbies.length;i ) { allHobbies[i].onclick=function(){ allObject.checked=checkAll(); } } var fanObject = document.getElementById("fan"); fanObject.onclick=function(){ for(var i = 0;i<allHobbies.length;i ) { allHobbies[i].checked=!allHobbies[i].checked; } //判斷是否全部選中 allObject.checked=checkAll(); } } function checkAll(){ var allHobbies = document.getElementsByName("hobby"); var flag = true; for(var i = 0;i<allHobbies.length;i ) { if(allHobbies[i].checked==false){ flag=false; break; } } return flag ; } </script></head><body><input type="checkbox" id="all"/>全選 <input type="checkbox" id="fan"/>反選<br/><hr/><input type="checkbox" name="hobby">關(guān)羽<br/><input type="checkbox" name="hobby">曹操<br/><input type="checkbox" name="hobby">貂蟬<br/></body></html>
案例實(shí)現(xiàn)：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var table ; var thead ; var tbody; window.onload = function(){ createTable(); createTheadData(); createTbodyData(); } function createTable(){ table = document.createElement("table"); //將table加入到body中 document.body.appendChild(table); thead = document.createElement("thead"); //將thead加入了table中 table.appendChild(thead); tbody = document.createElement("tbody"); table.appendChild(tbody); //為table元素添加相關(guān)關(guān)屬性 table.setAttribute("border","1"); table.setAttribute("width","100%"); } function createTheadData(){ //向thead中插入了一行 var tr = thead.insertRow(); //tr我需要添加單元格 var td_id = tr.insertCell(); td_id.innerHTML="編號(hào)"; var td_name = tr.insertCell(); td_name.innerHTML="姓名"; var td_oper = tr.insertCell(); td_oper.innerHTML="數(shù)據(jù)操作"; } //生成10條數(shù)據(jù) function createTbodyData(){ for(var i = 0 ;i<10;i ) { var tr = tbody.insertRow(); var td_id = tr.insertCell(); td_id.innerHTML=i; var td_name = tr.insertCell(); td_name.innerHTML="張" i; var td_oper = tr.insertCell(); td_oper.innerHTML='<input type="button" onclick="mydelete(this)" value = "刪除"/><input type="button" onclick="updatePre(this)" value = "修改"/>'; } } function mydelete(obj) { if(confirm('確定刪除此行嗎')) { var tr = obj.parentNode.parentNode; var rowIndex = tr.rowIndex-1; tbody.deleteRow(rowIndex); } } /* * 需要將數(shù)據(jù)區(qū)改為可編輯狀態(tài)（input） * 按鈕部分變成確定和取消 * */ function updatePre(obj) { var td = obj.parentNode ; var td_name = td.previousElementSibling; var td_id = td.previousElementSibling.previousElementSibling; var id = td_id.innerHTML; var name = td_name.innerHTML; //在js中可以為對(duì)象動(dòng)態(tài)添加屬性 td_name.tag=name; td_id.tag=id; td_name.innerHTML="<input type='text' value='" name "'/>"; td_id.innerHTML="<input type='text' value = '" id "'/>"; //改變數(shù)據(jù)操作區(qū)的按鈕 var btn_confirm = document.createElement("input"); btn_confirm.setAttribute("type","button"); btn_confirm.setAttribute("value","確定"); btn_confirm.setAttribute("onclick","confirmData(this)"); var btn_cancel = document.createElement("input"); btn_cancel.setAttribute("type","button"); btn_cancel.setAttribute("value","取消"); btn_cancel.setAttribute("onclick","myCancel(this)") td.innerHTML="" ; td.appendChild(btn_confirm); td.appendChild(btn_cancel); } function myCancel(obj){ var td = obj.parentNode ; var td_name = td.previousElementSibling; var td_id = td.previousElementSibling.previousElementSibling; td_id.innerHTML=td_id.tag; td_name.innerHTML=td_name.tag; //還原最后一個(gè)td td.innerHTML='<input type="button" onclick="mydelete(this)" value = "刪除"/><input type="button" onclick="updatePre(this)" value = "修改"/>'; } /* id,name必須要非空 * id不能重復(fù) * */ function confirmData(obj) { //確定 var td = obj.parentNode ; var td_name = td.previousElementSibling; var td_id = td.previousElementSibling.previousElementSibling; //首先獲取用戶輸入的值 var name = td_name.getElementsByTagName("input")[0].value; var id = td_id.getElementsByTagName("input")[0].value; if(name==""||id=="") { alert("對(duì)不起，數(shù)據(jù)不能為空"); return ; } //判斷ID不能重復(fù) if(isSame(id)) { alert("對(duì)不起，id不能重復(fù)"); return ; } //驗(yàn)證都通過(guò)了，那么接下來(lái)就是將數(shù)據(jù)真正的放在單元格中 td_name.innerHTML=name; td_id.innerHTML=id; td.innerHTML='<input type="button" onclick="mydelete(this)" value = "刪除"/><input type="button" onclick="updatePre(this)" value = "修改"/>'; } function isSame(id){ var flag = false; for(var i = 0 ;i<tbody.rows.length;i ) { var tr = tbody.rows[i]; if(id==tr.firstElementChild.innerHTML) { flag = true break; } } return flag ; } </script></head><body></body></html>總結(jié)：
table對(duì)象：
? rows屬性
? insertRow():插入一行
? deleteRow():刪除一行
tableRow對(duì)象：行對(duì)象
? cells：?jiǎn)卧駥?duì)象
? rowIndex:行號(hào)
? insertCell():插入單元格
? deleteCell():刪除單元格
TableCell對(duì)象：每個(gè)單元格
? cellIndex:單元格的索引
來(lái)源：http://www.icode9.com/content-1-24881.html聯(lián)系客服
