|
本課程對(duì)應(yīng)的視頻地址：http://edu.51cto.com/course/15019.html
1、DOM
DOM:Document Object Model
1.1、W3C規(guī)定的三類DOM標(biāo)準(zhǔn)接口
Core DOM（核心DOM），適用于各種結(jié)構(gòu)化文檔
XML DOM，專用于XML文檔
HTML DOM，專用于HTML文檔（了解）
1.2、Core DOM
1.2.1、查找dom
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)：3
parentNode：父節(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>
1.2.2、dom的創(chuàng)建相關(guān)操作
案例：
<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)一起克?。?/p>
案例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>
1.2.3、刪除和替換操作
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>
1.3、練習(xí)
1.3.1、隔行變色
<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)離開
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>
1.3.2、實(shí)現(xiàn)全選，反選等效果
<!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>
1.3.3、動(dòng)態(tài)編寫一個(gè)表格
案例實(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./content-1-24881.html
|
