本課程對應的視頻地址：http://edu.51cto.com/course/15019.html
DOM:Document Object Model
Core DOM（核心DOM），適用于各種結構化文檔
XML DOM，專用于XML文檔
HTML DOM，專用于HTML文檔（了解）
document.getElementById("id"):根據id元素來查找某個對象
document.getElementsByTagName("tag"):根據標簽來獲取元素-->數組
document.getElementsByName("name"):根據name來獲取元素-->數組
nextElementSibling:下一個元素節點previousElementSibling：上一個元素節點childNode：子節點（包含文本節點）children:子元素節點childElementCount：子元素的數量lastElementChild:最后一個元素節點firstElementChild:第一個元素節點firstChild：第一個節點lastChild:最后一個節點nodeType:節點的類型 元素節點：1 屬性節點：2 文本節點：3parentNode：父節點案例：
<!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="得到季節" onclick="getData()"/> <input type="button" value="獲取所有的input標簽的內容" onclick="getInputData()"/> <div id = "result"> </div></body></html>也可以通過setAttribute(attr,value)設置對象的屬性
imgObject.setAttribute("src","../images/2.jpg");imgObject.setAttribute("onclick","myFun()");那么如果想獲取屬性的值，就可以通過getAttribute（"name"）來獲取
如果我們想對對象加樣式,通過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相關操作有哪些呢？
createElement：創建一個元素節點
appendChild：將這個元素加入某個元素內部
insertBefore（在某個節點前面插入新的節點）：parentElement.insertBefore(newNode,thisNode)
cloneNode:克隆,有一個參數，默認是false，當為true表示深克?。ㄟB同子節點一起克?。?/p>
案例2：插入兄弟節點
<!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,已經存在的節點) document.body.insertBefore(li,cc); } </script></head><body> <li>關羽</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="復制"/> <ul id="myul"> <li>關羽</li> <li>盾山</li> </ul> <input type="button" onclick="copyul()" value="復制ul"/></body></html>removeChild:刪除某個子節點
replaceChild（new,old）:新的替換舊的節點
<!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 :鼠標經過 //onmouseout:鼠標離開 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">關羽<br/><input type="checkbox" name="hobby">曹操<br/><input type="checkbox" name="hobby">貂蟬<br/></body></html>
案例實現：
<!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元素添加相關關屬性 table.setAttribute("border","1"); table.setAttribute("width","100%"); } function createTheadData(){ //向thead中插入了一行 var tr = thead.insertRow(); //tr我需要添加單元格 var td_id = tr.insertCell(); td_id.innerHTML="編號"; var td_name = tr.insertCell(); td_name.innerHTML="姓名"; var td_oper = tr.insertCell(); td_oper.innerHTML="數據操作"; } //生成10條數據 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); } } /* * 需要將數據區改為可編輯狀態（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中可以為對象動態添加屬性 td_name.tag=name; td_id.tag=id; td_name.innerHTML="<input type='text' value='" name "'/>"; td_id.innerHTML="<input type='text' value = '" id "'/>"; //改變數據操作區的按鈕 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; //還原最后一個td td.innerHTML='<input type="button" onclick="mydelete(this)" value = "刪除"/><input type="button" onclick="updatePre(this)" value = "修改"/>'; } /* id,name必須要非空 * id不能重復 * */ 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("對不起，數據不能為空"); return ; } //判斷ID不能重復 if(isSame(id)) { alert("對不起，id不能重復"); return ; } //驗證都通過了，那么接下來就是將數據真正的放在單元格中 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>總結：
table對象：
? rows屬性
? insertRow():插入一行
? deleteRow():刪除一行
tableRow對象：行對象
? cells：單元格對象
? rowIndex:行號
? insertCell():插入單元格
? deleteCell():刪除單元格
TableCell對象：每個單元格
? cellIndex:單元格的索引
來源：http://www.icode9.com/content-1-24881.html