DOM簡介屬性及操作

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

3、removeAttribute()刪除屬性描述：刪除某個節(jié)點的屬性。語法：nodeObj.removeAttribute(name)?舉例：imgObj.removeAttribute(“src”)18192018192021222324=252627〃給變量賦不同的值,〃給變量及一個函數(shù),vara="已be”;vara=100;vara=[10,]：vara=function()alert0K");a();則變量就是不同類型則變量就是函數(shù)型I262728=29262728=29303132〃當網(wǎng)頁加載完成，調(diào)用JS程序〃匿名函數(shù)；就是沒有名字的函數(shù)匚〃匿名函數(shù)，不能單獨定義，也不能單獨調(diào)用〃匿名函數(shù)，只能作為數(shù)據(jù)傳給其它變量window,onload=function0〃查找img節(jié)點varimgObj=document,body.firstChild;//添加3rc屬性LrngObj.seti^ttribute(^src'\,images/01.jpg");//添加用idth屬性imgObj.setAttribute("width”,400);〃添加bord巳r屬性imgObj.setx^ttribute("border2);〃添加sty1巳屬性imgObj.setx4ttribute“padding:20px");//添加one1ick屬性LrngObj.setx^ttribute(^onclick",Vremovelmg(this);}〃函數(shù):刪除宅『。屬性Ifunctioi^removeling(imgObjj“刪除￡江屬性_*.imgObj.1'tmuveAttributeCsreP):imgObj.remcveAttribute("width")節(jié)點操作createElement()創(chuàng)建節(jié)點?語法：varnodeObj=document.createElement(tagName)appendChild()追加節(jié)點?語法：parentNode.appendChild(childNode)課堂實例：隨機顯示小星星<scripttype="text/javascript">//實例：隨機顯示小星星/*(1)網(wǎng)頁加載完成，背景色為黑色(2)創(chuàng)建圖片節(jié)點，并追加到body父節(jié)點下(3)定時器(4)星星隨機大小(5)星星隨機定位(6)單擊星星，星星消失。*/window.onload=function(){document.body.bgColor="#000";//定時器開關window.setInterval("start2()",1000);}functionstart2(){//創(chuàng)建圖片節(jié)點varimgObj=document.createElement("img");〃追加到body節(jié)點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é)點imgdocument.body.removeChild(imgObj);}functiongetRandom(min,max){varrandom=Math.random()*(max-min)+min;//向下取整random=Math.floor(random);//返回值returnrandom;}</script>HTMLDOM簡介和新特性在核心DOM中，已經(jīng)可以實現(xiàn)對網(wǎng)頁元素的操作了，為什么還要有HTMLDOM呢？因為，核心DOM中，對節(jié)點的訪問，都是從根節(jié)點開始的，訪問方式十分麻煩。特別是當節(jié)點層次很深時，更是麻煩。因此，才有了HTMLDOM。1、HTMLDOM的新特性每一個HTML標記，都對應一個對象。如：<img>標記，就是一個img對象。每一個HTML標記的屬性，與對應的元素對象的屬性，——對應。?<img>屬性：src、width、height、border、style、title、id、class等。?在JS中，img對象屬性：src、width、height、border、style、title、id、className等。〃網(wǎng)頁加載完成后，調(diào)用盛名函數(shù)89■10111213U89■10111213U1516171819202122”獲取<11110元素對象varimgOb,i=document,body,firstChild;〃添加imgObj對象屬性■■■■imgObj,AtTributeCsrcf\,'■"images/0I.jpg");imgObj.src="imageS//Ol.jp?:";inigObj\width=400TimgObj.border-2:imgObj.style=^border：5pxdottedred;padding：LOpx;background-color：yellow;C/script^</hes.Ll，(bodyimg/)C/bocl；.7112、HTMLDOM訪問HTML元素的方法(1)根據(jù)元素的id查找對象document.getElementById(id)67678910111213141516171819207890123456789012345ox-〈scripttvpe=vtext/javascriptv>〃網(wǎng)頁加載完成，調(diào)用匿名函數(shù)window,onload=function0〃獲取id二imgOl的圖片對象varimgObj=document.getElementByldimgOly7);〃添加屬性**imgObj.src=vimages/01.jpg”;imgObj.width=400;〈/script)</head>〈body><inigid="img01”/>2、根據(jù)HTML標簽名找對象描述：根據(jù)HTML標簽名找對象語法：vararr=parentNode.getElementsByTagName(tagName)參數(shù)：tagName就是要查找的標簽名稱，不能帶尖括號。parentNode代表上層節(jié)點。?返回值：返回一個對象數(shù)組。?舉例：ulObj.getElementsByTagName(“l(fā)i”)window,onload=init;functioninit()?//猶取id=uOl的兀素對象varulObj=document.getElementBvId("uOl");〃獲取所有的li的元素對象”.fvararr=ulObj.getElementsBvTagXame11");〃循環(huán)數(shù)組..0for(vari=0;i<arr.length;i++)arr[i].style=vcolor:blue;text-decoration:underline;arr[i].onmouseover=function。]/7yellowv;this,/7yellowv;}arr[i].onmouseollt=function(){this.stvle.backgroundColor=}2829=2829=303132333435?tagName：與nodeName功能一樣。?className：與class屬性功能一樣。?innerHTML：設置或讀取某個標記中的所有內(nèi)容，包括HTML文本。只能用于雙邊標記。?nodeValue：指純文本。?offsetWidth：指元素的可見寬度，不含滾動條中的內(nèi)容。只讀屬性。不帶px單位。?offsetHeight：指元素的可見高度，不含滾動條中的內(nèi)容。只讀屬性。不帶px單位。?scrollWidth：指元素的總寬度，包含滾動條中的內(nèi)容。只讀屬性。不帶px單位。?scrollHeight：指元素的總高度，包含滾動條中的內(nèi)容。只讀屬性。不帶px單位。?scrollTop：當元素出現(xiàn)滾動條時，向下拖動滾動條，內(nèi)容向上滾動的距離。可讀可寫屬性。不帶px單位。?如果該元素沒有滾動條，則scrollTop的值為0，該值只能是正值。?scrollLeft：與scrollTop描述一樣，只是向左滾動的距離。<body，<111id="uOL"><li》HTML超文本標注語言<li》CSS層疊樣式表</Li>i〉JavaScript^戶端腳本程序</Li><1i>Apa<2he服務器</li〉</ul></body>元素對象的屬性88■9101112131415161718functionshowInfa0〃獲取id-contentfC1＜1=1'一口1工對象vardivObj-dorument,^etEementByldCcc'ntent)：varresultObj-document..gerElementByldCresult");〃獲取內(nèi)容＜50的相關信息varstr="可見寬度："+divObj.可見高度："-HdivObj.offsetHeight;str+=點寬度.1"+divQbj.自＜?rollWidth+”,總高度："+divObj.scrollH曰:Lght;str+=":二r向上;餐動的距離:fdivObj\scrollTop,//將結果寫入到結果＜di心中rest]ItObj.Lnnei't:TjJ.=str,

2122=23242526272S292122=23242526272S29#content:width:630px;height:300px;tiiargi：!:Opxauto;border:Ipxsolidred;font-size:18px;overflow：auto;/*溢出屬性*/v/<；rv1p>事件：onscroll?描述：當拖動滾動條時發(fā)生。京洋時3砰對沖京洋時3砰對沖M：若通黑…我們臺灣這些年；兩言,陶銷萩堆推薦：精品套書吼,2010版法律碩士聯(lián)考狂75計算書1新書概哇書75折搶購弗浩伊德作品精質(zhì)59圻布蔗派贏贏鬲褊根威隹本四大名著（人品W“口述歷史權威唐德剛先生國…

345678901234567890123333333334444444444555〃網(wǎng)345678901234567890123333333334444444444555vardome;?'/全.局變量vartimer;，定時器變量window,onload=function。〃獲取三個〈div》對象時，，dome=document.getElementByld("dome/7);vardomel-document.getElementByldCdomel/J；;vardome2=document.getElementByldCdome2://將dome的高，復制給dom巳1和dome2domel.style,height=dome.offsetHeight+"px”；dome2.style,height=dome.offsetHeight.+“px”;〃將domel的內(nèi)容，復制至［Jdonie2中dome2.innerHTML=domel.innerHTUL;〃鼠標放上停止?jié)L動，鼠標移出繼續(xù)滾動dome,onmouseover=function。:〃清除定時器window,clearInterval(timer);)dome,onmouseout=fu.nction(){tinier-window,setIntervaltart2,40);3456789012345678955555556666666666〃定時器，，timer=3456789012345678955555556666666666〃定時器，，timer=window,setinterval(H/start2()40);■:funciionstart20〃如果滾動上去的距離，等于任何一個〈div)高度,〃則開始下一次滾動if(dome,scrol1'1_op==dome,offsetHeight)dome.scrollTop=0;/elsedome.scrollTop++J(/script></head>EventDOM1、事件簡介事件可以實現(xiàn)人機交互，或者與網(wǎng)頁的交互。當網(wǎng)頁加載完成(onload),更改網(wǎng)頁背景色(功能函數(shù))。2、事件屬性每一個HTML標記的屬性，與元素對象的屬性，一一對應。每一個HTML標記的事件屬性，與元素對象的事件屬性，也是一一對應。

HTML中的事件屬性：onMouseOver、onLoad、onClickJS中的事件屬性：onmouseover、onload、onclick注意：JS中的事件屬性，要全小寫。提示：事件發(fā)生后，調(diào)用的一定是JS函數(shù)，不管是有名函數(shù)，還是匿名函數(shù)。Event對象簡介當事件發(fā)生時，會自動向事件調(diào)用函數(shù)，傳遞一個event參數(shù)。那么，這個event參數(shù)，就是event對象。Event對象的作用：可以獲取當前事件發(fā)生時的環(huán)境信息。如：點擊時的坐標值。Event對象是短暫存在的，也就是：當一個新的事件發(fā)生時，這個event對象就消失了。每時每刻，只能有一個事件發(fā)生。每時每刻，只能有一個event對象產(chǎn)生。DOM中Event對象一一標準瀏覽器(火狐、谷歌)1、DOM中引入Event對象(1)通過HTML標記的事件屬性來傳遞event對象提示：在傳遞event時，該event參數(shù)，必須全小寫，并且不能加引號。<scridttvpe="Jrestiavascript-v>〃實例：單擊圖片，虛示坐標值function^et_xy(e)varstr="窗口左邊距離：'+已cli曰門t)(十］窗口上邊三離：clientY;str-="\門網(wǎng)頁左邊距離："+&pageX十=網(wǎng)頁頂邊距離："+e.pwY;str-二，門扉幕左邊距離："+巳，Mere埒nX+”:屏幕頂邊距離：^+e.screenY;str-="\門事徉類型工J+e.type;alert(str);:?飛uript)</rheacl>(body%<img胃idth="400”=images■''01.jpg"onClick=，z(body%<img胃idth="400”(2)使用元素對象的事件屬性來傳遞event對象78901234567890123456777890123456789012345677891011121314151617181920〃實何：簞?chuàng)魣D片，豆示坐標值window,onloac=function()〃獲取id=imgO1.的元素對象vaiimgObj=document.getE_ementBvld('LmgUl'J:〃綁定scliuk事件：這種情況不能帶括號，也不能傳參數(shù)/但是，第一個形參，就是event好象「imgObj.onelick=getKy傳地址，不帶括號functiongcz_xy(e)/「必須接收ev七nt參數(shù)varsur-“窗口左邊距離："+u.clieirtX，，窗口上邊距離:""+e.clientYTstr+="\n網(wǎng)頁左邊距/；"+電pagsX+"，網(wǎng)頁頂邊距離："+e.pageY;str十="\n屏幕左邊距離工"+e.區(qū)cr日后nX+:屏靠頂邊距離工ff+e.screenY;str+=事徉類型："+e.type;cnlert(5tr);}</scripr></head|<body、<i:ngi[:=z/imgO1<rwidth="4OCT'src=zimages01./)2、DOM中Event對象屬性type：事件類型clientX和clientY：相對瀏覽器窗口的坐標。pageX和pageY：相對網(wǎng)頁左端和頂端的距離。screenX和screenY：相對顯示屏幕左端和頂端的距離。IE中Event對象在IE中，event是window對象的一個屬性。如：window.event或event1、IE中引用Event對象〃實例工在1E中，獲取鼠