DOM簡(jiǎn)介屬性及操作

DOM的官方定義DOMDocumentObjectModel文檔對(duì)象模型。DOM的官方定義：W3C的DOM,可以使程序或腳本（JS或AS、JScript）,動(dòng)態(tài)的訪問或操作文檔的內(nèi)容、結(jié)構(gòu)、樣式DOM只是一個(gè)標(biāo)準(zhǔn)，就是操作網(wǎng)頁的標(biāo)準(zhǔn)。而這個(gè)標(biāo)準(zhǔn)（模型）在瀏覽器中，以“對(duì)象”的方式實(shí)現(xiàn)。DOM的分類核心DOM：提供了操作HTML文檔（顯示）或XML文檔（存儲(chǔ)數(shù)據(jù)）的公共的屬性和方法HTMLDOM：針對(duì)HTML文檔，提供的專有的屬性和方法。XMLDOM：針對(duì)XML文檔，提供的專有的屬性和方法。EventDOM：事件DOM，提供了很多的常用事件。CSSDOM：提供了操作CSS的一個(gè)接口。HTML節(jié)點(diǎn)樹http-equ【v="Content-Type“content=?text/htril</head>《body》Stablewidth=*5Q0*border=*l*align=*center*<tr>"d>姓名Q'td》心心性別《人心<td）年弊々td></tr><tr>HT肛節(jié)點(diǎn)樹HT肛節(jié)點(diǎn)樹</tr></table></body>DOM中節(jié)點(diǎn)的類型：document文檔節(jié)點(diǎn)：代表整個(gè)網(wǎng)頁，document文檔節(jié)點(diǎn)不對(duì)應(yīng)標(biāo)記。是訪問文檔中各元素的起點(diǎn)element元素節(jié)點(diǎn)：元素節(jié)點(diǎn)對(duì)應(yīng)于網(wǎng)頁中的各標(biāo)記。attribute屬性節(jié)點(diǎn)：每個(gè)元素都有若干個(gè)屬性。text文本節(jié)點(diǎn)：文本節(jié)點(diǎn)是最底層節(jié)點(diǎn)。核心DOM公共屬性和方法nodeName:節(jié)點(diǎn)名稱。nodeValue：節(jié)點(diǎn)的值。firstChild：第一個(gè)子節(jié)點(diǎn)。lastChild：最后一個(gè)子節(jié)點(diǎn)。parentNode：父節(jié)點(diǎn)。childNodes：子節(jié)點(diǎn)列表，是一個(gè)數(shù)組。節(jié)點(diǎn)訪問為什么，document.firstChild找到的不是HTML節(jié)點(diǎn)呢?DOM是針對(duì)HTML4.01開發(fā)的。我們現(xiàn)在是DOM是針對(duì)HTML4.01開發(fā)的。我們現(xiàn)在是XHTML1.0。所以，要想使用核心DOM中的屬性和方法，必須去掉DTD類型定義。[objectHTMLHtmlElement]第一個(gè)HTML是指叮ML文檔。指＜出血》標(biāo)記為什么，node_body.firstChild找不到table節(jié)點(diǎn)？在Firefox下，會(huì)把空格或換行，當(dāng)成一個(gè)文本節(jié)點(diǎn)。因此，所有標(biāo)記之間的空格和換行，都去掉。查找html節(jié)點(diǎn)的方法document.firstChilddocument.documentElement(兼容性較好)查找body節(jié)點(diǎn)的方法document.firstChild.lastChilddocument.body(推薦使用)節(jié)點(diǎn)屬性1、getAttribute()——獲取屬性的值描述：獲取節(jié)點(diǎn)屬性的值。?語法：nodeObj.getAttribute(name)參數(shù)：name代表當(dāng)前節(jié)點(diǎn)的某個(gè)屬性。舉例：varsrc=imgObj.getAttribute(“src”)2、setAttribute() 添加屬性描述：給某個(gè)節(jié)點(diǎn)添加屬性。?語法：nodeObj.setAttribute(name,value)參數(shù)：name代表屬性名稱。value代表屬性的值。舉例：imgObj.setAttribute(“src”，“images/02.jpg”)

3、removeAttribute() 刪除屬性描述：刪除某個(gè)節(jié)點(diǎn)的屬性。語法：nodeObj.removeAttribute(name)?舉例：imgObj.removeAttribute(“src”)18192018192021222324=252627〃給變量賦不同的值，〃給變量其一個(gè)函數(shù)，vara="abc";vara=100：vara=[10,];vara=function()alert("OK");a();則變量就是不同類型則變量就是函數(shù)型I262728=262728=29303132〃當(dāng)網(wǎng)頁加載完成，調(diào)用JS程序〃匿名函數(shù)；就是沒有名字的函數(shù)匚〃匿名函數(shù)，不能單獨(dú)定義，也不能單獨(dú)調(diào)用〃匿名函數(shù)，只能作為數(shù)據(jù)傳給其它變量window,onload=function()〃查找img節(jié)點(diǎn)varimgObj=document,body,firstChild：〃添加3rc屬性LingObj.seti^ttribute(^src'\,images/01.jpg")://添加印idth屬性imgObj.setx^ttribute("width",400);//添加border屬性imgObj.setx^ttribute("border?\,2);〃添加￡tyl巳屬性imgObj.setx^ttributet^style/7,"padding:20px");//添加one1ick屬性LingObj.setx^ttnbute(^onclick"\,^removelmg(this);〃函數(shù)：刪除污代屬性Ifunctionremoveling(imgObj“刪除及客屬性 . * ,,imgObj.1-tmuvcAttributeCsreP)：imgObj.rcmcvcAttribute("width")節(jié)點(diǎn)操作createElement()創(chuàng)建節(jié)點(diǎn)? 語法：varnodeObj=document.createElement(tagName)appendChild()追加節(jié)點(diǎn)?語法：parentNode.appendChild(childNode)課堂實(shí)例：隨機(jī)顯示小星星<scripttype="text/javascript">〃實(shí)例：隨機(jī)顯示小星星/*(1)網(wǎng)頁加載完成，背景色為黑色(2)創(chuàng)建圖片節(jié)點(diǎn)，并追加到body父節(jié)點(diǎn)下(3)定時(shí)器(4)星星隨機(jī)大小(5)星星隨機(jī)定位(6)單擊星星，星星消失。*/window.onload=function()(document.body.bgColor="#000";〃定時(shí)器開關(guān)window.setInterval("start2()",1000);)functionstart2()(〃創(chuàng)建圖片節(jié)點(diǎn)varimgObj=document.createElement("img");〃追加到body節(jié)點(diǎn)document.body.appendChild(imgObj);〃添加src屬性imgObj.setAttribute("src","images/xingxing.gif");//添力口width屬性varimgWidth=getRandom(15,85);imgObj.setAttribute("width",imgWidth);〃添加style屬性varwinWidth=window.innerWidth?window.innerWidth:document.documentElement.clientWidth;varwinHeight=window.innerHeight?window.innerHeight:document.documentElement.clientHeight;varx=getRandom(0,winWidth);vary=getRandom(0,winHeight);imgObj.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px");〃單擊刪除星星imgObj.setAttribute("onclick","removeImg(this)");)functionremoveImg(imgObj)

〃刪除子節(jié)點(diǎn)imgdocument.body.removeChild(imgObj);)functiongetRandom(min,max)(varrandom=Math.random()*(max-min)+min;〃向下取整random=Math.floor(random);〃返回值returnrandom;)</script>HTMLDOM簡(jiǎn)介和新特性在核心DOM中，已經(jīng)可以實(shí)現(xiàn)對(duì)網(wǎng)頁元素的操作了，為什么還要有HTMLDOM呢？因?yàn)?，核心DOM中，對(duì)節(jié)點(diǎn)的訪問，都是從根節(jié)點(diǎn)開始的，訪問方式十分麻煩。特別是當(dāng)節(jié)點(diǎn)層次很深時(shí)，更是麻煩。因此，才有了HTMLDOM。1、HTMLDOM的新特性每一個(gè)HTML標(biāo)記，都對(duì)應(yīng)一個(gè)對(duì)象。如：＜img＞標(biāo)記，就是一個(gè)img對(duì)象每一個(gè)HTML標(biāo)記的屬性，與對(duì)應(yīng)的元素對(duì)象的屬性，——對(duì)應(yīng)。?＜img＞屬性:src、width、height、border、style、title、id、class等。?在JS中，img對(duì)象屬性：src、width、height、border、style、title、id、className等?！ňW(wǎng)頁加載完成后，調(diào)用妾名函數(shù)8910111213U8910111213U1516171819202122〃獲取〈ini眇元素對(duì)象varimgOb,i=dccument.body,fLrstChild;“添加imgObj對(duì)象同性''''imgObj, (^src^,""images01.jpg");imgObj.src="image;imgObj\width=400TimgObj,border-2:imgObj.style="border：5pxdottedred;padding：LOpx;background-color：yellow;scripr＜/he5.cl，kbodyimg/X/bcidy〉2、HTMLDOM訪問HTML元素的方法(1)根據(jù)元素的id查找對(duì)象 document.getElementById(id)6789=101112136789=1011121314151617181920window,onload=init;functioninit()?//獲取id=u01的兀素對(duì)象varulObj=document.getElementBvId("uOl;//獲取所有的li的元素對(duì)象 “ .,vararr=ulObj.getElementsBvTagXameC1i/J);〃循環(huán)數(shù)組. .“for(vari=0;i<arr.length;i++)TJ■1TJ

i.stvle="color:blue;text—d巳coration:underlin巳IV J.onmoliseover=function()(this,stvle.backgroundColor=}.onmoiiseout=function(){this,stvle.backgroundColor=)vyellow'J;〈scripttvpe=vtext/javascriptv>〃網(wǎng)頁加載完成，調(diào)用匿名函數(shù)window.onload=function0〃獲取id二inigOl的圖片對(duì)象varimgObj=document.getElementBvIdimgOlJ;〃添加屬性 ， ” "imgObj.src=vimages/01.jpg”;imgObj.width=400;</script></head><body><itngid="imgOlv/>2、根據(jù)HTML標(biāo)簽名找對(duì)象描述：根據(jù)HTML標(biāo)簽名找對(duì)象語法：vararr=parentNode.getElementsByTagName(tagName)參數(shù)：tagName就是要查找的標(biāo)簽名稱，不能帶尖括號(hào)。parentNode代表上層節(jié)點(diǎn)。?返回值：返回一個(gè)對(duì)象數(shù)組。?舉例：ulObj.getElementsByTagName(“l(fā)i”)2829,30312829,303132333435????

??

??ryI89101112131415161718〈body、<01icl=y/uOL">1i汨THL超文本標(biāo)注語言</Li><li》CSS層疊樣式表</Li>i，JavaScript客戶端腳本程序</11>1l>Apac:h巳服務(wù)器</li〉</ul></body>元素對(duì)象的屬性tagName：與nodeName功能一樣。className：與class屬性功能一樣。innerHTML：設(shè)置或讀取某個(gè)標(biāo)記中的所有內(nèi)容，包括HTML文本。只能用于雙邊標(biāo)記nodeValue：指純文本。offsetWidth：指元素的可見寬度，不含滾動(dòng)條中的內(nèi)容。只讀屬性。不帶px單位offsetHeight：指元素的可見高度，不含滾動(dòng)條中的內(nèi)容。只讀屬性。不帶px單位scrollWidth：指元素的總寬度，包含滾動(dòng)條中的內(nèi)容。只讀屬性。不帶px單位。scrollHeight：指元素的總高度，包含滾動(dòng)條中的內(nèi)容。只讀屬性。不帶px單位。scrollTop：當(dāng)元素出現(xiàn)滾動(dòng)條時(shí)，向下拖動(dòng)滾動(dòng)條，內(nèi)容向上滾動(dòng)的距離。可讀可寫屬性。不帶px單位如果該元素沒有滾動(dòng)條，則scr011Top的值為0，該值只能是正值。scrollLeft：與scrollTop描述一樣，只是向左滾動(dòng)的距離。IfuncriGnshowlnfo0：//獲取idrontent和》,1?三冷131工對(duì)象vardivObj=documert.getELement0yldC"content;varvarresultObj=docwienr..geTElementB^IdC'result^);//-獲取內(nèi)容<div>的相關(guān)信息varstr="可見寬度："+divObj. =可見高度：^4-divObj.offsetHeightrstr+=點(diǎn)寬度:*+div(Jbj.scroll州idth+”,總高座:#+d.ivObj.scrollHeight;str+="《br》向上滾動(dòng)的距離："+(11丫說;j.scr口11T口p;〃將結(jié)果寫入到結(jié)果<div>中rest]It:Obj.Lnnerl[ =str,

2122■23242526272S2122■23242526272S293(]#content:width:630px;height:300px;tiiargi：!：Opxauto;border:Ipxsolidred;font_size：ISpx,overflow：auto;/半溢出屬性”^/<；tv1F>事件：onscroll描述：當(dāng)拖動(dòng)滾動(dòng)條時(shí)發(fā)生。課堂案例：書訊快遞 1 1 L口二個(gè)信度札高度一書團(tuán)日口一中包含^uin匕1和dnmu?引dzoel個(gè)/與，二口工爐.」主D要在北昨巾內(nèi)石豆制到北莊二巾1R9北m二的二cr二1L1口。+一興kM!洋母」、Ld=doiTEid=donjcl的客使K+E4算，門漆動(dòng)上去的距離,如果等于三個(gè)《di心任何一個(gè)高，則說明滾動(dòng)到頂了,然后將scrDllTopBOj說明第二滾動(dòng)開始口id=don]c2 !_T京評(píng)慶三期際風(fēng)石：司^也，，，我們臺(tái)灣這些年：盤動(dòng)兩言“暢銷教輔推薦：精品套書5&201。版法律頑土麻考大綱75.計(jì)算機(jī)新書幅整書百折搶購200期奸最喜歡的書AA弗洛伊德作品精選集59折201烤硝豪磊贏瀛:權(quán)威定本四大名著（人民文?.口述歷史權(quán)威唐德剛先生國…

12345678901234567890123333333334444444444555〃網(wǎng)12345678901234567890123333333334444444444555vardome:二/全局變量vartimer;，定時(shí)器變量window,onload=function?！ǐ@取三個(gè)〈div》對(duì)象 時(shí)，，dome=document.getElementByld("dome^J;vardomel-document.geTElemenrByldCdomel/J；;vardome2=document.getElementByldCdome2'J://將dome的高，復(fù)制給dome1和dome2domel.style,height=dome.offsetHeight+"p工”；dome2.style,height=dome.offsetHeight+"px”;〃將dom巳1的內(nèi)容，復(fù)制至Udoni巳2中dome2.innerHTML=domel.innerHTUL;〃鼠標(biāo)放上停止?jié)L動(dòng)，鼠標(biāo)移出繼續(xù)滾動(dòng)dome,onmouseover=function()，〃清除定時(shí)器window,clearInterval(timer);dome,onmouseout=fu.nction()：timer-windov.setIntervalstart2：)“、40)}3456789012345678955555556666666666〃定時(shí)器 3456789012345678955555556666666666timer=window,setinterval("start2()/J,40);functionstart20〃如果滾動(dòng)上去的距離，等于任何一個(gè)<div>高度,〃則開始下一次滾動(dòng)if(dome,scrolll-op==dome.offsetHeight)dome.scrollTop=0;/elsedome.scrollTop++J(/scriptb(/scriptb</head>1、事件簡(jiǎn)介事件可以實(shí)現(xiàn)人機(jī)交互，或者與網(wǎng)頁的交互。當(dāng)網(wǎng)頁加載完成(onload),更改網(wǎng)頁背景色(功能函數(shù))。2、事件屬性每一個(gè)HTML標(biāo)記的屬性，與元素對(duì)象的屬性，一一對(duì)應(yīng)。每一個(gè)HTML標(biāo)記的事件屬性，與元素對(duì)象的事件屬性，也是一一對(duì)應(yīng)。

HTML中的事件屬性：onMouseOver、onLoad、onClick JS中的事件屬性：onmouseover、onload、onclick 注意：JS中的事件屬性，要全小寫。提示：事件發(fā)生后，調(diào)用的一定是JS函數(shù)，不管是有名函數(shù)，還是匿名函數(shù)。Event對(duì)象簡(jiǎn)介當(dāng)事件發(fā)生時(shí)，會(huì)自動(dòng)向事件調(diào)用函數(shù)，傳遞一個(gè)event參數(shù)。那么，這個(gè)event參數(shù)，就是event對(duì)象。Event對(duì)象的作用：可以獲取當(dāng)前事件發(fā)生時(shí)的環(huán)境信息。如：點(diǎn)擊時(shí)的坐標(biāo)值。Event對(duì)象是短暫存在的，也就是：當(dāng)一個(gè)新的事件發(fā)生時(shí)，這個(gè)event對(duì)象就消失了。每時(shí)每刻，只能有一個(gè)事件發(fā)生。每時(shí)每刻，只能有一個(gè)event對(duì)象產(chǎn)生。DOM中Event對(duì)象一一標(biāo)準(zhǔn)瀏覽器（火狐、谷歌）1、DOM中引入Event對(duì)象（1）通過HTML標(biāo)記的事件屬性來傳遞event對(duì)象提示：在傳遞event時(shí)，該event參數(shù)，必須全小寫，并且不能加引號(hào)。81011121314151617181981011121314151617181920〃實(shí)例；單擊圖片，虛示坐標(biāo)值function^et_xy(e)varstr="窗口左邊工巨.禺:'cli已 窗口上邊工三周：y+e.clientY;str-="\門網(wǎng)頁左邊距嵩："+已pageX+"，網(wǎng)頁頂邊距離：*+e.pageY;scr-="5屏幕左邊距離："+巳."re已nX+Z屏幕頂邊柜離："+e.screenY;str-=”二門重徉類型工J+e.type;alert(str);:，wuript-</head><bodywidth-"iOO" images-/01.jpg"onClick-vget_xykpent^"/>（2）使用元素對(duì)象的事件屬性來傳遞event對(duì)象

〃實(shí)亂單擊圖片，豆示坐標(biāo)值window,onloac=function(.)〃獲取1d=iingO1的元素對(duì)象varimgObj-document.getE_emeiitBv_c](^imgUlJ：〃綁定scliuk事件：這種情況不能帶括號(hào)，也不能傳參數(shù)〃但是，第一"?■形參，就是event野象匚imgObj.onelick=get_xy;,二傳地址,不帶括號(hào)functionger_xy(e)/z必須接收七v中rrt參數(shù)\rarszr="窗口左邊云離："-1匚二-"，窗口上邊點(diǎn)離：^+e.clientYTstr+="\n網(wǎng)頁左邊距高；"+e.pagEX+”,網(wǎng)頁頂邊距離："+e.pageY;st-r十二"\n屏幕左邊距離；*+e.建r白叁nX+二屏嘉頂邊距離；^+e.screenY;str+="、門事徉類型："+匕.七叩匕;￡?ilert(e5J;〈/scrip：》〈/hesd|<body><i:ngi[:=z/imgO1<rwidth="4OCT'src="images■■■,'01.jpg"/)2、DOM中Event對(duì)象屬性type：事件類型clientX和clientY：相對(duì)瀏覽器窗口的坐標(biāo)。pageX和pageY：相對(duì)網(wǎng)頁左端和頂端的距離。screenX和screenY：相對(duì)顯示屏幕左端和頂端的距離。789101112137891011121314151617181920在IE中，event是window對(duì)象的一個(gè)屬性。如：window.event或event1、IE中引用Event對(duì)象〃實(shí)例:在工E中，獲取鼠標(biāo)坐標(biāo)值functiongetxy()varsrr