DOM-Element類(lèi)型

    

專(zhuān)注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)赤壁免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

Element類(lèi)型

Element類(lèi)型用于表現(xiàn)XML或HTML元素，提供了對(duì)元素標(biāo)簽名、子節(jié)點(diǎn)及特性的訪問(wèn)。Element節(jié)點(diǎn)具有以下特征：

nodeType的值為1
nodeName的值為元素的標(biāo)簽名
nodeValue的值為null
parentNode的值為Document或Element
其子節(jié)點(diǎn)可能是Element、Text、CDATASection、EntityReference、ProcessingInstruction或者Comment

要訪問(wèn)元素的標(biāo)簽名，可以使用nodeName屬性、也可以使用tagName屬性；這兩個(gè)屬性會(huì)返回相同的值

1          <div id="myDiv"></div>

可以像下面這樣取得這個(gè)元素以及標(biāo)簽名

1          var div = document.getElementById('myDiv');2          console.log(div.nodeName); //"DIV"3          console.log(div.tagName == div.nodeName); //true

div.tagName實(shí)際上輸出的是大寫(xiě)形式，通常轉(zhuǎn)換為小寫(xiě)形式

1         if (element.tagName.toLowerCase() == "div"){//這樣最好2             //在此執(zhí)行操作3         }

 

1、HTML元素

所有HTML元素都由HTMLElement類(lèi)型表示，不是直接通過(guò)這個(gè)類(lèi)型，也是通過(guò)它的子類(lèi)型來(lái)表示。每個(gè)HTML元素都存在下列標(biāo)準(zhǔn)特性：

id,元素在文檔中的唯一標(biāo)識(shí)符。
title，有關(guān)元素的附加說(shuō)明信息，一般通過(guò)工具提示條顯示出來(lái)。
lang，元素內(nèi)容的語(yǔ)言代碼，很少使用。
dir，語(yǔ)言的方向
className，與元素的class特性相對(duì)應(yīng)

1         <div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>2 3         var div = document.getElementById('myDiv');4         console.log(div.id); //myDiv5         console.log(div.className); //bd6         console.log(div.title); //BOdy text7         console.log(div.lang); //en8         console.log(div.dir); //ltr

當(dāng)然也可以給他們賦予新值

 

2、取得特性

操作特性的DOM方法主要有三個(gè)：getAttribute()、setAttribute()、removeAttribute()

1         var div = document.getElementById('myDiv');2         console.log(div.getAttribute('id'));//myDiv3         console.log(div.getAttribute('class')); //bd4         console.log(div.getAttribute('title')); //BOdy text5         console.log(div.getAttribute('lang')); //en6         console.log(div.getAttribute('dir'));//ltr

如果給定的名稱特性不存在，則返回null;

通過(guò)getAttribute()方法也可以取得自定義特性，例如：

1         <div id="myDiv" my_special_attribute="hello!"></div>2         var value = div.getAttribute('my_special_attribute');

任何元素的所有特性，也都可以通過(guò)DOM元素本身的屬性來(lái)訪問(wèn)。不過(guò)只有公認(rèn)的特性才會(huì)以屬性的形式添加到DOM對(duì)象中。

1         <div id="myDiv" align="left" my_special_attribute="hello!"></div>

因?yàn)閕d和align在HTML中是<div>公認(rèn)的特性，因此該元素的DOM對(duì)象中也將存在對(duì)應(yīng)的屬性。不過(guò)自定義特性my_special_attribute在Safari、Opera、Chrome及Firefox中是不存在的；但I(xiàn)E卻會(huì)為
自定義特性也創(chuàng)建屬性，例如：

1         console.log(div.id) //myDiv2         console.log(div.my_special_attribute) //underfined(IE除外)

有兩類(lèi)特殊的特性，他們雖然有對(duì)應(yīng)的屬性名，但屬性的值與通過(guò)getAttribute()返回的值并不相同。第一類(lèi)就是style,在通過(guò)getAttribute()訪問(wèn)時(shí)，返回的是css文本，而通過(guò)屬性來(lái)訪問(wèn)他則返回的是一個(gè)對(duì)象。第二類(lèi)就是onclick這樣的時(shí)間處理程序。通過(guò)getAttribute()訪問(wèn)時(shí)，返回的是相應(yīng)代碼的文本，而通過(guò)屬性來(lái)訪問(wèn)時(shí)，則會(huì)返回一個(gè)JavaScript函數(shù)

由于存在這些差別，在通過(guò)JavaScript以編程方式操作DOM時(shí)，開(kāi)發(fā)人員經(jīng)常不使用getAttribute()而是只使用對(duì)象的屬性。只有在取得自定義特性值的情況下，才會(huì)使用getAttribute()方法。

 

3、設(shè)置特性

setAttribute()接受兩個(gè)參數(shù)：要設(shè)置的特姓名和值。如果特性已經(jīng)存在，setAttribute()會(huì)以指定的值替換現(xiàn)有的值；如果特性不存在則創(chuàng)建改屬性并設(shè)置相應(yīng)的值

1         div.setAttribute('id','someOtherId');2         div.setAttribute('class','ft');

所有特性都是屬性，所以可以直接給屬性賦值：

1         div.id = 'someOtherId';

不過(guò)，像下面這樣為DOM元素添加一個(gè)自定義的屬性，該屬性不會(huì)自動(dòng)成為元素的特性

1         div.mycolor = "red";2         console.log(div.getAttribute('mycolor')); //null(IE除外)

removeAttribute()用于徹底刪除元素的特性：

1         div.removeAttribute('class');

 

4、attribute屬性

Element類(lèi)型是使用attribute屬性的唯一一個(gè)DOM節(jié)點(diǎn)類(lèi)型。attributes屬性中包含一個(gè)NamedNodeMap，與NodeList類(lèi)似，也是一個(gè)“動(dòng)態(tài)”集合。元素的每一個(gè)特性都由一個(gè)Attr節(jié)點(diǎn)表示，每個(gè)節(jié)點(diǎn)都保存在NamedNodeMap對(duì)象中。NamedNodeMap對(duì)象擁有下列方法。

getNamedItem(name):返回nodeName屬性等于name的節(jié)點(diǎn)；
removeNamedItem(name):從列表中移除nodeName屬性等于name的節(jié)點(diǎn)
setNamedItem(node):向列表中添加節(jié)點(diǎn)，以節(jié)點(diǎn)的nodeName屬性為索引
item(pos):返回位于數(shù)字pos位置處的節(jié)點(diǎn)

attributes屬性中包含一系列節(jié)點(diǎn)，每個(gè)節(jié)點(diǎn)的nodeName就是特性的名稱，而節(jié)點(diǎn)的nodeValue就是特性的值。要取得id特性，可以使用以下代碼：

1         var id = element.attributes.getNamedItem("id").nodeValue;

以下是使用方括號(hào)語(yǔ)法的簡(jiǎn)寫(xiě)形式：

1         var id = element.attributes["id"].nodeValue = "someOtherId";

調(diào)用removeNamedItem()方法與在元素上調(diào)用removeAttribute()方法的效果一樣：直接刪除給定名稱的特性。他們的唯一區(qū)別就是removeNamedItem()返回表示刪除特性的Attr節(jié)點(diǎn)

以下代碼展示了如何迭代元素的每個(gè)特性，然后將他們構(gòu)造成name="value" name="value"這樣的字符串格式

 1         function outputAttributes(element){ 2             var pairs = new Array(), 3                 attrName, 4                 attrValue, 5                 i, 6                 ien; 7  8             for(i=0,len=element.attributes.length;i<len;i++){ 9                 attrName = element.attributes[i].nodeName;10                 attrValue = elemetn.attributes[i].nodeValue;11                 if(element.attributes[i].specified){12                 pairs.push(attrName + "=\"" + attrValue + "\"");13                 }14             }15             return pairs.join(" ");16         }

 

5、創(chuàng)建元素

使用document.createElement()方法可以創(chuàng)建新元素。這個(gè)方法只接受一個(gè)參數(shù)，即要?jiǎng)?chuàng)建元素的標(biāo)簽名。例如創(chuàng)建一個(gè)<div>元素。

1         var div = document.createElement("div");

在使用createElement()方法創(chuàng)建新元素的同時(shí)，也為新元素設(shè)置了ownerDocuemnt屬性。此時(shí)，還可以操作元素的特性，為它添加更多的子節(jié)點(diǎn)，以及執(zhí)行其他的操作

1         div.id = "myNewDiv";2         dov.className = "box";

要把這些新元素添加到文檔樹(shù)中可以使用appendChild()、insetrBefore()或者replaceChild()方法。

 

6、元素的子節(jié)點(diǎn)

元素可以由任意數(shù)目的子節(jié)點(diǎn)和后代節(jié)點(diǎn)，不同瀏覽器在看待這些節(jié)點(diǎn)方面存在顯著的不同，以下面的代碼為例：

1         <ul id="myList">2             <li>Item 1</li>3             <li>Item 2</li>4             <li>Item 3</li>5         </ul>

如果是IE累解析這些代碼，那么<ul>元素會(huì)有3個(gè)節(jié)點(diǎn)，分別是3個(gè)<li>元素。但如果是在其他瀏覽器中。<ul>元素都會(huì)有7個(gè)元素，包過(guò)3個(gè)<li>元素和4個(gè)文本節(jié)點(diǎn)（表示<li>元素之間的空白符）。
如果像下面這樣將元素間的空白符刪除，那么所有的瀏覽器都會(huì)返回相同的數(shù)目的子節(jié)點(diǎn)

        <ul id="myList"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>

如果需要通過(guò)childNodes屬性遍歷子節(jié)點(diǎn)，那么通常都要先檢查一下nodeType屬性，如下：

1         for(var i=0;len=element.childNodes.length;i<len;i++){2             if(element.childNodes[i]nodeType == 1){3                 //執(zhí)行某些操作4             }5         }

如果像通過(guò)某個(gè)特定的標(biāo)簽名取得子節(jié)點(diǎn)或后代節(jié)點(diǎn)可以使用getElementsByTagName()方法。

1         var ul = documet.getElementById('myList');2         var items = ul.getElementsByTagName('li');

要注意的是，這里<ul>的后代中只包含直接子元素。不過(guò)，如果它包含更多層次的后代元素，那么各個(gè)層次中包含的<li>元素也都會(huì)返回。

 

當(dāng)前名稱：DOM-Element類(lèi)型
文章路徑：http://www.muchs.cn/article2/geeiic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、微信小程序、虛擬主機(jī)、網(wǎng)站營(yíng)銷(xiāo)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)