前端基礎(chǔ)培訓(xùn)-DOM教材

DOM教材

DOM是DocumentObjectModel的縮寫，是對(duì)XML文檔的內(nèi)容進(jìn)行表示的模型。它把

XML文檔看作是一系列node和node間的關(guān)系，并且把每一個(gè)node都當(dāng)作一個(gè)對(duì)象，所以

叫文檔對(duì)象模型。

DOM還提供了一系列的方法（API）,允許開發(fā)人員添加、編輯、移動(dòng)或刪除樹中任

意位置的節(jié)點(diǎn)，從而創(chuàng)建一個(gè)引用程序。

在網(wǎng)頁中，我們可以把DOM理解為不僅是對(duì)網(wǎng)頁中各個(gè)元素關(guān)系的描述（把每個(gè)元素

或文本都視為一個(gè)節(jié)點(diǎn)，既node。關(guān)系是指每一個(gè)節(jié)點(diǎn)之間是兄弟還是父子等關(guān)系。），并

且還可以把每一個(gè)網(wǎng)頁元素或一段文字，都當(dāng)成一個(gè)可操作的對(duì)象。比如說：html元素和

body元素是什么關(guān)系（父節(jié)點(diǎn)和子節(jié)點(diǎn)的關(guān)系）,body中某一個(gè)div和某一個(gè)p是什么關(guān)系。

如何刪除body中的某一個(gè)div,如何給body里添加一個(gè)新的div等等，這些都是DOM里

規(guī)定的。

配套視頻請(qǐng)見《DOM專題》視頻部分。

1獲取節(jié)點(diǎn)

1.1通過document獲取節(jié)點(diǎn)

表1獲取節(jié)點(diǎn)方法索引表

Item內(nèi)容

通過元素ID獲取節(jié)點(diǎn)：

getElementByld

document.getElementByld（元素ID名）

通過元素的name屬性獲取節(jié)點(diǎn)：document.getElementByName（元素

getElementByName

name屬性）

通過元素的標(biāo)簽名獲取節(jié)點(diǎn)：documenl.getELemenlByTagName（元素標(biāo)

getElementByTagName簽）；

它返回的是nodeList對(duì)象

通過類名獲取節(jié)點(diǎn)：getElemenlByClassName（元素類名）。IE6/7/8不支

getElemenlByClassName

持

querySelectorjQuery風(fēng)格的元素查找方法，獲得一個(gè)DOM元素。從1E8開始支持

querySelectorAlljQuery風(fēng)格的元素查找方法，獲得一組DOM元素。從IE8開始支持

1.2通過節(jié)點(diǎn)指針獲取節(jié)點(diǎn)

表2節(jié)點(diǎn)屬性索引表

Item名稱內(nèi)容

節(jié)點(diǎn)D0M1級(jí)定義的node接口,js中所有的節(jié)點(diǎn)類型均繼承自

Node

node類型

nodeValue節(jié)點(diǎn)值Text節(jié)點(diǎn)或conment節(jié)點(diǎn)的文本內(nèi)容，可進(jìn)行讀寫操作

續(xù)表2節(jié)點(diǎn)屬性索引表

Item名稱內(nèi)容

nodeName節(jié)點(diǎn)名稱元素的標(biāo)簽名，以大寫形式表示

節(jié)點(diǎn)類型表示該節(jié)點(diǎn)的類型。如1代表Element節(jié)點(diǎn)、2代表Attribute

nodeType

節(jié)點(diǎn)等，具體見表2內(nèi)容

子節(jié)點(diǎn)每個(gè)節(jié)點(diǎn)都有childNodes屬性，它是只讀的類數(shù)組對(duì)象，

childNodes

實(shí)時(shí)動(dòng)態(tài)的保存該節(jié)點(diǎn)的子節(jié)點(diǎn)

子節(jié)點(diǎn)Children只包含element元素，它的功能和childNodes類

Children似，不同的是，children是非標(biāo)準(zhǔn)屬性，由IE提出，在部

分瀏覽器不兼容

節(jié)點(diǎn)列表nodeList是類數(shù)組對(duì)象，用于動(dòng)態(tài)的保存一組有序的節(jié)點(diǎn)

nodeList

（理解nodeList是透徹理解DOM的關(guān)鍵）

父節(jié)點(diǎn)該節(jié)點(diǎn)的父節(jié)點(diǎn)，但類似document這樣的對(duì)象沒有父節(jié)

parentNode

點(diǎn),它的parentNode屬性為null

上一個(gè)兄弟節(jié)點(diǎn)該節(jié)點(diǎn)的兄弟節(jié)點(diǎn)中的上一個(gè)，和該節(jié)點(diǎn)具有相同的父節(jié)

previousSibling

點(diǎn)

下一個(gè)兄弟節(jié)點(diǎn)該節(jié)點(diǎn)的兄弟節(jié)點(diǎn)中的下一個(gè)，其中，具有相同父節(jié)點(diǎn)的

nextSibling

兩個(gè)節(jié)點(diǎn)成為兄弟節(jié)點(diǎn)

第一個(gè)子節(jié)點(diǎn)該節(jié)點(diǎn)的子節(jié)點(diǎn)的第一個(gè)節(jié)點(diǎn)，該節(jié)點(diǎn)沒有子節(jié)點(diǎn)則為

firstChild

null

最后一個(gè)子節(jié)點(diǎn)該節(jié)點(diǎn)的子節(jié)點(diǎn)的最后一個(gè)節(jié)點(diǎn)，該節(jié)點(diǎn)沒有子節(jié)點(diǎn)則為

lastChild

null

表3節(jié)點(diǎn)信息索引

Item名稱nodeTypenodeNamenodeValue

Element元素1元素的標(biāo)簽名Null

Attribute屬性2屬性的名稱屬性值

Text文本3#text節(jié)點(diǎn)內(nèi)包含的文本

Comment注釋8#comment注釋的內(nèi)容

Document文檔9#documentNull

Fragment文檔碎片11#document-fragmentNull

2節(jié)點(diǎn)操作

2.1創(chuàng)建節(jié)點(diǎn)：createElement()、createAttibute()、createTextNode()

a)createElement()

此方法可創(chuàng)建元素節(jié)點(diǎn)，返回的是一個(gè)Element節(jié)點(diǎn)，具有指定的標(biāo)簽名。創(chuàng)建出來的

新元素節(jié)點(diǎn)不會(huì)被自動(dòng)添加到文檔里，既然沒添加到文檔里，說明它還是一個(gè)游離的狀態(tài)。

所以它也沒有nodeParent屬性。如果想把它添加到文檔里，可以使用appendChild。或者

insertBefore。方法或者replaceChild()方法。

請(qǐng)練習(xí)一下代碼：

1.document.createElement():〃創(chuàng)建節(jié)點(diǎn)的方法

2.varoDiv=document.createElement(“div”)；

3.document.body.appendChild(oDiv);

b)createAttribute()和createTextNode()

createAttitude()方法用于創(chuàng)建一個(gè)新的Attri節(jié)點(diǎn)，給元素添加屬性。createTextNode

()是用于創(chuàng)建一個(gè)文本節(jié)點(diǎn)，所以nodeType等于3。oTextNode.nodeName將返回#text;

跟createElement。一樣，用createTextNode。創(chuàng)建的節(jié)點(diǎn)也不會(huì)自動(dòng)添加到文檔里。需要使

用appendChild?；蛘遡nsertBefbre。方法或者replaceChild。方法。它經(jīng)常與createElement()

配合使用，知道為什么嗎？(一個(gè)元素節(jié)點(diǎn)，一個(gè)文本節(jié)點(diǎn)。)

4.varoDiv=document.createElement(“div”)；

5.oDiv.setAttribute("title","mydemo");

6.document.body.appendChild(oDiv);

7.如果需要添加文字，則需要createTextNode。這個(gè)方法了。

8.varoTextNode=document.createTextNode(umydemo");

9.varmes=document.createTextNode(lthelIoworld")；

10.varcontainer=document.createElement("p")；

11.container.appendChild(mes);

12.document.body.appendChild(container);

?注意：一定要理解好元素節(jié)點(diǎn)和文本節(jié)點(diǎn)的區(qū)別。元素節(jié)點(diǎn)是沒有nodeValue的，只

有文本節(jié)點(diǎn)才有nodeValue。在IE9以下的ie瀏覽器中，回車換行不算一個(gè)文本節(jié)點(diǎn),

但標(biāo)準(zhǔn)瀏覽器中這是個(gè)文本節(jié)點(diǎn)。

c)createFragment

此方法用于創(chuàng)建文檔片段，雖然不能把文檔片段直接添加到文檔中，但是它可以作為

一個(gè)“倉庫”來使用，將可能需要添加到文檔中的節(jié)點(diǎn)保存在這里，需要添加時(shí)可以一次

性將需要添加的節(jié)點(diǎn)添加到文檔中，避免瀏覽器的反復(fù)渲染，提高性能

請(qǐng)練習(xí)以下代碼：

1.<body>

2.<ulid=,myList,x/ul>

3.</body>

4.<script>

5.varoFragment=document.crcateDocumentFragment();

6.varul=document.getElementById(€myList,);

7.varoLi=null;

8.fbr(vari=0;i<10;i++){

9.oLi=document.createElement(*li,);

10.oLi.appendChildCdocument.createTextNodeCitem^Ci+l)));

11.oFragmcnt.appcndChild(oLi);

12.)

13.ul.appendChild(oFragment);

14.</script>

2.2插入節(jié)點(diǎn)：appendChild()和insertBefore()

appendChild(node):在指定元素節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)之后添加節(jié)點(diǎn)，需要注意的是，

該方法返回的是新的子節(jié)點(diǎn)。它經(jīng)常跟createElement()和createTextNode。、cloneNode。配

合使用。另外appendChild。不僅可以用來追加新的元素，也可以你挪動(dòng)文檔中現(xiàn)有的元素。

請(qǐng)練習(xí)一下代碼：

1.varcontainer=document.createElement("pn);

2.vart=document.createTextNode(nzhufengH);

3.container.appendChild(t);

4.document.body.appendChild(container);

5.<pid=',msgn>msg</p>

6.<pid="content">content</p>

7.<pid=',aaa,,>aaaaaaaa</p>

8.<script>

9.varmes=document.getElementByld(nmsg");

10.varcontainer=document.getElementByld("content**);

11.container.appendChild(mes);

12.</script>

13.//發(fā)現(xiàn)msg放至Ucontent后面去了。

14.<pid="content">

15.content

16.<pid="msg”>珠峰培訓(xùn)專注js前端開發(fā)培訓(xùn)</p>

17.</p>

18.<pid='匕aa”>珠峰培訓(xùn)的js課程中包含html5的內(nèi)容</p>

insertBefore(newNode,oldNode)：在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)。使用該方法

需要注意以下兩點(diǎn)：第二個(gè)參數(shù)是可選，如果第二個(gè)參數(shù)不寫，將默認(rèn)添加到文檔的最后，

相當(dāng)于appendChikl。；此方法可返回新的子節(jié)點(diǎn)。

請(qǐng)練習(xí)以下代碼：

19.<divid="parent">

20.<pid="content”>珠峰培訓(xùn)，專注前端面向未來</p>

21.<divid=nmsgn>msg<div>test</divX/div>

22.<pid=**content">222</p>

23.<pid="aaa">aaaaaaaa</p>

24.</div>

25.<script>

26.varmsg=document.getElementByld(Hmsgn);

27.varaaa=document.getElementByld("aaa");

28.varparent=document.getElementByld(nparentn);

29.parent.insertBefore(msg,aaa);//這個(gè)方法由父元素調(diào)用

30.</script>

31.//我們發(fā)現(xiàn)工D為msg的插入到了aaa的前面。

2.3替換節(jié)點(diǎn)：replaceChild()

replaceChild(newNode,oldNode)方法是刪除一個(gè)子節(jié)點(diǎn)并用一個(gè)新的節(jié)點(diǎn)代替原

來節(jié)點(diǎn)的位置，使用時(shí)需要注意以下幾點(diǎn)：

該方法接受兩個(gè)參數(shù)：第一個(gè)參數(shù)是新節(jié)點(diǎn)，第二個(gè)參數(shù)是需要被代替的節(jié)點(diǎn)；被替換

的節(jié)點(diǎn)沒有消失，只是在文檔樹中被移除了，沒有了它的位置，但還存在于文檔中；這個(gè)

方法需要在父節(jié)點(diǎn)上調(diào)用，如替換成功則返回被替換的節(jié)點(diǎn)；如替換失敗則返回null。

請(qǐng)練習(xí)以下代碼：

32.ele.repalceChild(newNode,oldNode)：〃這個(gè)方法也是由父級(jí)元素來調(diào)用

33.

34.<body>

35.<divid="zhufengn>

36.<divid=nan>a</div>

37.<divid=nb">b</div>

38.<divid=ncH>c</div>

39.</div>

40.</body>

41.<script>

42.varzhufeng=document.getElementByld("zhufeng");

43.varmsg=document.getElementByld("bn);

44.varpara=document.createElement("pn);

45.zhufeng.replaceChild(para,msg);

46.</script>

2.4復(fù)制節(jié)點(diǎn)：cloneNode()

cloneNode(boolean)：此方法接受一個(gè)布爾值參數(shù)，用于復(fù)制節(jié)點(diǎn)操作，使用時(shí)需注

意以下幾點(diǎn)：

參數(shù)boolean為false時(shí)，表示執(zhí)行淺復(fù)制，即只復(fù)制節(jié)點(diǎn)本身；參數(shù)boolean為true

時(shí)，表示執(zhí)行深復(fù)制，即會(huì)復(fù)制節(jié)點(diǎn)本身及其整個(gè)子節(jié)點(diǎn)樹；復(fù)制后返回的節(jié)點(diǎn)沒有指定

的父節(jié)點(diǎn)，不會(huì)被自動(dòng)插入到文檔，在文檔中處于游離狀態(tài)；如果克隆后，id一樣，不要

忘記用setAttribute("id","another_id");改變新的節(jié)點(diǎn)的ID。

請(qǐng)練習(xí)以下代碼：

15.varmes=document.createTextNode("helloworld");

16.varcontainer=document.createElement("pn);

17.container.appendChild(mes);

18.document.body.appendChild(container);

19.varnewpara=container.cloneNode(true);//true和false的區(qū)另U

20.document.body.appendChild(newpara);

2.5刪除節(jié)點(diǎn)：removeChild()

removeChild(node)方法可以從子節(jié)點(diǎn)列表中刪除某個(gè)節(jié)點(diǎn)。如刪除成功，則此方法返回

被刪除的節(jié)點(diǎn)，如刪除失敗則返回null。你如果想把某個(gè)節(jié)點(diǎn)從一處移動(dòng)到另一個(gè)地方，不

必使用removeChild(),可以使用前面的appendChild。和insertBefore(),他們都會(huì)自動(dòng)先刪除

節(jié)點(diǎn)，然后移動(dòng)到你指定的地方。

請(qǐng)練習(xí)以下代碼

47.<body>

48.<divid="parentn>

49.<divid=naH>a</div>

50.<divid=nb">b</div>

51.<divid=ncH>c</div>

52.</div>

53.</body>

54.<script>

55?varparent=document.getElementByld(nparentn);

56.varb=document.getElementByld(nb");

57.parent.removechild(b);//這個(gè)方法也是由父元素來調(diào)用

58.</script>

如果不知道要?jiǎng)h除的節(jié)點(diǎn)的父節(jié)點(diǎn)是什么，可以使用parentNode屬性。比如:

59.<body>

60.<divid=nzhufengH>

61.<divid=ua">a</div>

62.<divid="b">b</div>

63.<divid=ncH>c</div>

64.</div>

65.</body>

66.<script>

67.varb=document.getElementByld("b");

68.varc=b.parentNode;

69.c.removeChild(b);

70.</script>

2.6判斷節(jié)點(diǎn):hasChildNodes()

此方法可判斷指定節(jié)點(diǎn)是否存在子節(jié)點(diǎn)，若存在一個(gè)或多個(gè)子節(jié)點(diǎn)，則返回值為true,否則返回值

為false,請(qǐng)練習(xí)以下綜合代碼：

1.varps=document.getElementsByTagName(''p,z);

2.for(vari=0;i<ps.length;i++){

3.ps[i].setAttribute(''title","hell。");

4.//也可以使用：ps.item(i).setAttribute(Htitle",Hhellon);

5.)

6.<body>

7.<divid=,,zhufengn>

8.<divid=na">a</div>

9.<divid=nbH>b</div>

10.<divid=,,c">c</div>

11.</div>

12.</body>

13.<script>

14.varps=document.getElementByld("zhufeng")

15.if(ps.hasChildNodes){

16.alert(ps.childNodes.length);

17.)

18.</script>

3.屬性操作

3.1獲取屬性、設(shè)置屬性和刪除屬性

a)getAttribute()：該方法用于獲取節(jié)點(diǎn)的屬性，獲取的時(shí)候，如果屬性不存在，則返

回空，注意ie和ff返回不同，返回雖然不同，但是可以用一個(gè)方法來判斷：

if(a.getAttribute("title"))

b)setAttribute()：該方法用于設(shè)置節(jié)點(diǎn)的屬性

c)removeAttribute()：該方法用于移除節(jié)點(diǎn)的屬性

請(qǐng)練習(xí)以下代碼：

19.setAttribute();//15?

20.vara=document.createElement(''p,z);

21.a.setAttribute(''titlez,,^mydemo");

22.

23.vara=document.getElementByld(''zhufeng,z);

24.varb=a.getAttribute(''title"");

25.console.log(b);

26.varc=b.removeAttribute('title7);

27.console.log(c);

3.4判斷屬性

hasAttributeO：該方法用于判斷一個(gè)元素是否具有指定的屬性，如果當(dāng)前元素節(jié)點(diǎn)擁

有指定屬性，則返回true,否則返回false,但是不返回那個(gè)屬性的值。若文檔中明確設(shè)置

了指定的屬性，或是文檔類型聲明為該屬性設(shè)置了默認(rèn)值，則hasAttributeO方法都返回true。

4.DOM應(yīng)用：珠峰培訓(xùn)的DOM庫【最新版本請(qǐng)?jiān)谌汗蚕砝锵螺d：3354715131

/*DOM庫中方法索引表:

^l.getChildNodes獲取指定元素下的所有指定元素節(jié)點(diǎn)

*2.getNextEle獲取指定元素的下一個(gè)兄弟節(jié)點(diǎn)（用遞歸的思路）

*3.getNextOne獲取指定元素的上一個(gè)兄弟元素節(jié)點(diǎn)（用循環(huán)的方法）

M.getNextAll獲取指定標(biāo)簽名ele下面的所有標(biāo)簽名為tagName的弟弟元素節(jié)點(diǎn)

*5.getPreEle獲取指定元素的上一個(gè)兄弟元素節(jié)點(diǎn)

*6.getPreAll獲取指定標(biāo)簽名ele下面的所有標(biāo)簽名為tagName的哥哥元素節(jié)點(diǎn)

*7.siblings獲取指定元素的所有兄弟節(jié)點(diǎn)（哥哥節(jié)點(diǎn)和弟弟節(jié)點(diǎn)相加的思路）

*8.getSiblings獲取指定元素的所有兄弟節(jié)點(diǎn)（取到父節(jié)點(diǎn)后再取父節(jié)點(diǎn)下子節(jié)點(diǎn)的思路）

*9.getEleChildren獲得元素ele下指定標(biāo)記名為tagName的所有子元素（第二個(gè)參數(shù)可選）

*10.getLastEle在所有的元素節(jié)點(diǎn)集eles中找出最后元素節(jié)點(diǎn)

*11.getFirstEle在所有的元素節(jié)點(diǎn)集eles中找出第一個(gè)元素節(jié)點(diǎn)

*12.insertAfter把要插入的元素newEle追加在目標(biāo)元素oldEle的后面

*13.prepend把newNode這個(gè)節(jié)點(diǎn),當(dāng)成第一個(gè)子節(jié)點(diǎn)追加給parentEle元素

*14.text獲取或設(shè)置元素節(jié)點(diǎn)文本值（只傳第一個(gè)參數(shù)是獲取，傳兩個(gè)參數(shù)是設(shè)置）

*15.getElesByClass獲取具有多個(gè)類名的目標(biāo)元素

*16.getEle獲取只有一個(gè)類名的目標(biāo)元素（處理正中不能寫多個(gè)類名的情況）

*17.addClass增加類樣式的方法

*18.removeClass移除類的方法

*19.hasClass判斷某元素上是不是有某個(gè)類

*20.getIndex獲取元素的索引值（從父元素往下逐一判斷的思路）

*2I.getIndexNum獲取元素的索引值（獲取哥哥元素個(gè)數(shù)的思路）

*22.1istToArray將nodeList類型轉(zhuǎn)化為數(shù)組

*23.getPos獲取元素相對(duì)于屏幕距離

*24.getCss獲取網(wǎng)頁元素的CSS屬性值

*25.setCss給元素設(shè)置CSS屬性的方法

*26.setGrounpCss批量設(shè)置css屬性的方法

*/

*1、函數(shù)名稱：getEleChildren()

*功能描述：獲取指定元素下的所有指定元素節(jié)點(diǎn)，當(dāng)?shù)诙€(gè)參數(shù)不傳時(shí)則返回obj下的所有子元素節(jié)

點(diǎn)

*思路：獲取所有節(jié)點(diǎn)，判斷是否是元素節(jié)點(diǎn)，標(biāo)簽名是否為指定標(biāo)簽名

**/

functiongetEleChildren(obj,node){

vara=[];

varoChild=obj.childNodes;

if(node&&node.tagName==1){

for(vari=0;i<oChild.length;i++){

if(oChildfi].nodeType==l&&oChild[i].tagName==node.toUpperCase()){

a.push(oChild[i]);

}

)

returna;

)

else{〃如果第二個(gè)參數(shù)沒傳，則將obj下的所有元素節(jié)點(diǎn)獲取并返回

for(vari=0;i<oChild.length;i++){

if(oChild[i].nodeType==1){

a.push(oChild[i]);

)

)

returna;

*2、函數(shù)名稱：getNextEle（）功能同下一個(gè)方法，思路不同

*功能描述：獲取指定元素的下一個(gè)兄弟節(jié)點(diǎn)

*思路：利用遞歸思路，循環(huán)調(diào)用方法本身，直到查找到下一個(gè)兄弟節(jié)點(diǎn)

*/

functiongetNextEle(node){

varnode=node.nextSibling;

if(node.nodeType==1){

returnnode;

)

if(node.nextSibling){

returnarguments.callee(node);//遞歸一下，就是再調(diào)用自己去運(yùn)算。不要忘了return

)

returnnull;//如果一個(gè)方法應(yīng)該有返回值，但又無法計(jì)算出結(jié)果，則應(yīng)該返回nulL

*3、函數(shù)名稱：getNextOne()功能同上一個(gè)方法，思路不同

*功能描述：獲取指定元素的下一個(gè)兄弟元素節(jié)點(diǎn)

*思路：利用循環(huán)方法，直到查找到下一個(gè)兄弟元素節(jié)點(diǎn)

**/

functiongetNextOne(ele){

varnext=ele.nextSibling;

while(next){

if(next.nodeType===1){

returnnext;

)

next=next.nextSibling;

)

returnnull;

*4、函數(shù)名稱：getNextAll()

*功能描述：獲取指定標(biāo)簽名ele下面的所有標(biāo)簽名為tagName的弟弟元素節(jié)點(diǎn)，

*思路：

*

functiongetNextAll(ele,tagName){

vara=[];

varnext=getNextOne(ele);〃調(diào)用公共方法，獲得此元素的下一個(gè)(弟弟)元素節(jié)點(diǎn)

if(tagName&&typeoftagName=='string,){

while(next){

if(next.tagName.toLowerCase()==tagName.toLowerCase()){

a.push(next);

)

next=getNextOne(next);

}

}else{

while(next){

a.push(next);

next=getNextOne(next);

returna;

*5、函數(shù)名稱:getPreEleO

*功能描述：獲取指定元素的上一個(gè)兄弟元素節(jié)點(diǎn)

*思路：利用遞歸思路，循環(huán)調(diào)用方法本身，直到查找到上一個(gè)兄弟元素節(jié)點(diǎn)

**/

functiongetPreEle(preNode){

preNode=preNode.previousSibling;

if(preNode){

if(preNode.nodeType===1){

returnpreNode;

}else{

returnarguments.callee(preNode);

)

}else{

returnnull;

*6、函數(shù)名稱：getPreAII()

*功能描述：獲取指定標(biāo)簽名ele下面的所有標(biāo)簽名為tagName的哥哥元素節(jié)點(diǎn),

*思路：

**/

functiongetPreAll(ele,tagName){

vara=[];

varpre=getPreEle(ele);

if(tagName&&typeoftagName==,string,){

while(pre){

if(pre.tagName.toLowerCase()==tagName.toLowerCase()){

a.push(pre);

)

pre=getPreEle(pre);

)

}else{

while(pre){

a.push(pre);

pre=getPreEle(pre);

)

)

returna;

*7、函數(shù)名稱：siblings。

*功能描述：獲取指定元素的所有兄弟節(jié)點(diǎn)，

*思路：先獲取哥哥元素節(jié)點(diǎn)，存進(jìn)數(shù)組后反轉(zhuǎn)，保證順序正常，再獲取所有弟弟元素節(jié)點(diǎn)，拼接

即可

*________________*/

functionsiblings(ele){

vara=[];

varprevious=ele.previousSibling;

while(previous){

if(previous.nodeType===1){

a.push(previous);

)

previous=previous.previousSibling;

}

a.reverse();〃如果用unshift方法，則不用反轉(zhuǎn)

varnext=ele.nextSibling;

while(next){

if(next.nodeType===1){

a.push(next);

)

next=next.nextSibling;

)

returna;

*8、函數(shù)名稱：siblings。

*功能描述：獲取指定元素的所有兄弟節(jié)點(diǎn)，

*思路：先獲取指定元素節(jié)點(diǎn)的父節(jié)點(diǎn)，再往下取該父元素下除本元素外的所有子節(jié)點(diǎn)

*________________

functionsiblings(objName){

vara=[];

varsib=objName.parentNode.children;

for(vari=O;i<sib.length;i++){

if(sib[i]!=objName&&sib[i].nodeType==l){

a.push(sib[i]);

)

)

returna;

*9、函數(shù)名稱：getEleChildren()

*功能描述：獲得元素ele下指定標(biāo)記名為tagName的所有子元素，第二個(gè)參數(shù)可選，表示的是指定標(biāo)

簽名的子元素

*思路：

*________________*/

functiongetEleChildren(ele,tagName){

if(ele&&ele.nodeType&&ele.nodeType===1){

if(tagName&&typeoftagName=='string'){

tagName=tagName.toUpperCase();

vara=[];

varch=ele.childNodes;

for(vari=O;i<ch.length;i++){

if(ch[i].nodeType===l&&ch[i].tagName==tagName){

a.push(ch[i]);

}

)

returna;

}else{〃如果第二個(gè)參數(shù)沒有傳

vara=[];

varch=ele.childNodes;

for(vari=O;i<ch.length;i++){

if(ch[i].nodeType===1){

a.push(ch[i]);

)

)

returna;

)

}else{〃判斷第一個(gè)參數(shù)

alert('argumentserror!');

*10、函數(shù)名稱：getLastEle()

*功能描述：在所有的元素節(jié)點(diǎn)集eles中找出最后元素節(jié)點(diǎn)，在引用此方法時(shí)注意取獲得的數(shù)組的第一個(gè)

值

*思路：調(diào)用判斷最后元素的方法，循環(huán)判斷后將最后一個(gè)元素放進(jìn)數(shù)組中返回

**/

functiongetLastEle(eles){

if(eles&&eles.length&&eles.length>O){

vara=[];

for(vari=O;i<eles.length;i++){〃先判斷這一組元素里，有沒有不是元素節(jié)點(diǎn)

if(eles[iJ&&eles[iJ.nodeType&&eles[i].nodeType===1){//獲取當(dāng)前元素的下一個(gè)弟弟元素

varele=getNextOne(eles[i]);

if(ele==null){〃如果它不存在弟弟，則說明它就是老小

a.push(eles[i]);

)

}else{

alert，參數(shù)中的第，+i4個(gè)對(duì)象，不符合條件！)；

thrownewError。參數(shù)中的第，+i+，個(gè)對(duì)象，不符合條件！,);

)

)

returna;

)

11、函數(shù)名稱:getFirstEle()

*功能描述：在所有的元素節(jié)點(diǎn)集eles中找出第一個(gè)元素節(jié)點(diǎn),在引用此方法時(shí)注意取獲得的數(shù)組的第一

個(gè)值

*思路：判斷元素的哥哥節(jié)點(diǎn)是否存在，如果不存在，即是第一個(gè)元素節(jié)點(diǎn)

**/

functiongetFirstEle(eles){

if(eles&&eles.length&&eles.length>O){

vara=[];

for(vari=O;i<eles.length;i++){

if(eles[i]&&eles[i].nodeType&&eles[i].nodeType===l){

varele=getPreEle(eles[i]);

if(ele==null){〃如果它不存在弟弟，則說明它就是老小

a.push(eles[i]);

)

)else{

aler(參數(shù)中的第二i4個(gè)對(duì)象，不符合條件！)

thrownewError，參數(shù)中的第四+，個(gè)對(duì)象，不符合條件！,);

returna;

)

*12、函數(shù)名稱：insertAfter。

*功能描述：此方法和appendChild方法對(duì)應(yīng)，把要插入的元素追加在目標(biāo)元素的后面,oldEle會(huì)被移除

*思路：

**/

functioninsertAfter(oldEle,newEle){

if(oldEle&&oIdEle.nodeType&&oldEle.nodeType===l&&newEle&&newEle.nodeType&&newEle.node

Type===l){

if(oldEle.nextSibling){//如果okiEle對(duì)象有弟弟節(jié)點(diǎn)，則追加在它弟弟的前面

oldEle.parentNode.insertBefore(newEle,oldEle.nextSibling);

}else{

oldEle.parentNode.appendChild(newEle);

)

}else{

thrownewError('參數(shù)錯(cuò)誤')；

*13、函數(shù)名稱：prepend()

*功能描述：此方法和nsertBefore功能對(duì)應(yīng)，把newNode這個(gè)節(jié)點(diǎn)插入到parentEle元素前面

*思路：

**/

functionprepend(newNode,oldEle){

varchild=oldEle.firstChild;

if(child){

oldEle.insertBefore(newNode,oldEle.firstChild);

}else{

oldEle.appendChild(newNode);

*14、函數(shù)名稱：text。

*功能描述：獲取或設(shè)置網(wǎng)頁元素節(jié)點(diǎn)文本值的方法，只傳ele參數(shù)是獲取ele元素中的文本值，傳str

是設(shè)置ele的文本值

*思路：主要處理火狐不支持innerText這個(gè)屬性的問題

**/

functiontext(ele,str){〃如果第一個(gè)參數(shù)是元素類型

if(ele&&ele.nodeType&&ele.nodeType===1){//如果第二個(gè)參數(shù)沒有傳過來

if(str===undefined){〃判斷瀏覽器是否支持textContent屬性，若支持則此屬性的類型為string,

否則為undefined

if(typeofele.textContent=-string1){

returnele.textContent;//標(biāo)準(zhǔn)瀏覽器都支持，DOM2的屬性

}else{

returnele.innerText;//火狐不支持

)

)

elseif(typeofstr=='string,){

〃如果傳了第二個(gè)參數(shù)，并且第二個(gè)參數(shù)的類型正確，則給此元素設(shè)置文本值

if(typeofele.textContent=-string1){

ele.textContent=str;

}else{

ele.innerText=str;

)

}else{

alert('第二個(gè)參數(shù)str有誤')；

thrownewError,第二個(gè)參數(shù)str有誤')；

)

}else{

alert('M一個(gè)參數(shù)ele誤！)；

thrownewError('第二個(gè)參數(shù)str有誤')；

*15、函數(shù)名稱：getElesByClass()

*功能描述：解決IE6/7/8不支持document.getElementsByClassName,通過此方法可以獲取指定元素ele

下具有多個(gè)類名的目標(biāo)元素

*思路：此方法運(yùn)用正則匹配類名，再獲取對(duì)應(yīng)元素。這是用兩個(gè)方法來實(shí)現(xiàn)的，是為了降低難度

**/

functiongetElesByClass(sti-Class,ele){

varregl=/Ns+|\s+$/g;〃此正則去首尾空格，就是把首屬多余的空格去掉，以免下面的循環(huán)有空操作

strClass=strClass.replace(reg1

ele=ele||document;〃判斷ele參數(shù)是否傳了，如果沒傳ele,則讓ele為docuemtn

if(ele.getElementsByClassName){

returnele.getElementsByClassName(strClass);

}else{

varaClass=strClass.split(八s+/);〃以空格為格為分隔符，把各個(gè)類名字符串分解到成數(shù)組

vareles=ele.getElementsByTagName(**');//

vara=[];

for(vari=O;i<aClass.length;i++){

eles=getEle(aClass[i],eles);〃調(diào)用getEle方法循環(huán)篩選滿意條件的元素。其實(shí)就是

找到類名的交集。這個(gè)方法在下面定義的

)

returneles

*16、函數(shù)名稱：getEleO這個(gè)方法僅供上面的getElesByClass方法用。是獨(dú)立出來的核心模塊

*功能描述：在一組DOM對(duì)象集合(參數(shù)：eles)里通過單一類名(參數(shù)strClass)獲取元素。

*思路：注意獲取后的目標(biāo)元素是放在一個(gè)數(shù)組中，使用時(shí)應(yīng)注意

*_______________*/

functiongetEle(strClass,eles){

vara=[];

for(vari=0,1en=eles.length;i<len;i++){〃注意這個(gè)正則不要定義在循環(huán)外邊

varreg=newRegExp("(？”|)"+strClass+"(?:|$)");〃這個(gè)iE貝!J是修正之后的

if(reg.test(eles[i].className)){〃滿意這個(gè)正則驗(yàn)證的，說明此元素中類名中肯定有strClass這個(gè)

變量指定的類名，則放到數(shù)組里

a.push(eles[i]);

returna;

*17、函數(shù)名稱：addClass()

*功能描述：增加類樣式的方法

*思路：每個(gè)新增加的類名都是一個(gè)字符串，用空格將其和前名的類名隔開就好

*_______________*/

functionaddClass(ele,className){

if(ele&&ele.nodeType&&ele.nodeType===l&&className&&typeofclassName==,string,){

〃判斷參數(shù)類型對(duì)不對(duì)前三個(gè)是判斷第一個(gè)參數(shù)是否正確，后兩個(gè)是判斷第二個(gè)參數(shù)是否正確

varreg=newRegExp("(?:八|)"+strClass+"(?:|$)");〃這個(gè)正則是修正之后的

if(!reg.test(ele.className)){〃如果原來沒有這個(gè)類樣式，則加上

ele.className+=""+className;〃注意這里是在空格后再累加上此類名。前名是空格，不是

空字符串

)

*18、函數(shù)名稱：removeClass()

*功能描述：移除類的方法

*思路：定義一個(gè)正則表達(dá)式，將正則匹配到的單詞，用空字符串替換掉

*_______________*/

functionremoveClass(ele,className){

if(ele&&ele.nodeType&&ele.nodeType===1&&className&&typeofclassName==,string,){

varreg=newRegExp(M(?:A|)"+strClass+"(?:l$)"Jg"):〃這個(gè)正則是修正之后的。注意第二個(gè)參數(shù)g

//定義一個(gè)匹配單詞邊界的正則，并且是全文匹配(加了模式符g)

ele.className=ele.className.replace(regJ);

*19、函數(shù)名稱：hasClass()

*功能描述：判斷某元素上是不是有某個(gè)類

*思路：用正則表達(dá)式匹配類型，判斷元素的類名和傳入的字符串是否一致即可判斷

*_______________*/

functionhasClass(ele,strClass){〃確定傳入的ele為元素，strClass為字符串

if(ele&&ele.nodeType==l&&(typeofstrClass=='string')){

varreg=newRegExp"?:八|)"+strClass+"(?：|$)");〃這個(gè)正則是修正之后的

if(reg.test(ele.className)){

returntrue;

}else{

returnfalse;

)

*20、函數(shù)名稱：getlndex()【第一種思路】

*功能描述：獲取元素的索引值的方法

*思路：先得到這個(gè)元素父元素的所有元素節(jié)點(diǎn)，逐一比較并讓計(jì)數(shù)器加1,如果有和自己相同的元

素，則返回當(dāng)前的記數(shù)

*_______________*/

functiongetlndex(ele){

if(ele&&ele.nodeType&&ele.nodeType===1){

varparent=ele.parentNode;〃獲得此元素的父親節(jié)點(diǎn)

vareles=getEleChildren(parent);〃獲得包括自己在內(nèi)的所有兄弟節(jié)點(diǎn)

for(vari=O;i<eles.length;i++)

{//一一對(duì)比，如果發(fā)現(xiàn)自己和某個(gè)節(jié)點(diǎn)對(duì)比是一樣的，那么當(dāng)前的i就是自己的索引值

if(ele==eles[i]){

returni;

)

)

}else{

alert('argumenterror!');

*21、函數(shù)名稱：getIndexNum()【第二種思路】

*功能描述：獲取元素的索引值的方法

*思路：通過獲取哥哥元素節(jié)點(diǎn)的方法來獲取當(dāng)前元素索引值

**/

functiongetlndexNum(ele){

vam=0;

varpre=ele.previousSibling;

while(pre){〃總是去判斷有沒有哥哥

if(pre.nodeType==1){〃如果哥哥是個(gè)元素

n++;〃則n累加一下

)

pre=pre.previousSibling濰續(xù)判斷下一個(gè)哥哥

)

returnn;

*22、函數(shù)名稱：listToArray。

次功能描述：將nodeList類型轉(zhuǎn)化為數(shù)組

*思路：

**/

functionlistToAnay(eles){

try(

returnAtotype.slice.call(eles,0);

〃或用[].slice.caH(eles,0)這樣的方式。

}catch(e){

在IE/6/7里，DOM集合不是JS對(duì)象，不能用n.slice.call(eles,O)這樣的操作，會(huì)出異常

vara=[];

for(vari=O;i<eles.length;i++){

a.push(eles[i])

)

returna;

*23、函數(shù)名稱：getPos()

*功能描述：獲取元素相對(duì)于屏幕距離

*思路：

**/

functiongetPos(ele){

varx=ele.offsetLeft;

vary=ele.offsetTop;

varp=ele.offsetParent;//一定要理解好offsetParent是什么

while(p&&p!=document.body){〃解決IE8中的BUG

if(window.navigator.userAgent.indexOf('MSIE{〃判斷是不是IE8

x+=p.offsetLeft;

y+=p.offsetTop;

}else{

x+=p.offsetLeft+p.clientLeft;//clientLeft是左這框的寬。偏移量不包括邊框的寬，所以要加進(jìn)

去(IE8除外)

y+=p.offsetTop+p.clientTop;

)

p=p.offsetParent;

)

varobj={);

obj.x=x;

obj.y=y;