|
常見的獲取元素的方法有3種,，分別是通過元素ID,、通過標(biāo)簽名字和通過類名字來獲取。 getElementById DOM提供了一個名為getElementById的方法,，這個方法將返回一個與之對應(yīng)id屬性的節(jié)點(diǎn)對象,。使用的時候請注意區(qū)分大小寫。 它是document對象特有的函數(shù),，只能通過其來調(diào)用該方法,。其使用的方法如下： 復(fù)制代碼代碼如下: document.getElementById('demo') //demo是元素對應(yīng)的ID 該方法兼容主流瀏覽器，甚至包括IE6+,，可以大膽使用,。 getElementsByTagName 該方法返回一個對象數(shù)組（準(zhǔn)確的說是HTMLCollection集合，它不是真正意義上的數(shù)組）,，每個對象分別對應(yīng)著文檔里有著給定標(biāo)簽的一個元素,。類似于getElementById,同樣，該方法只提供一個參數(shù),，它的參數(shù)是指定標(biāo)簽的名字,，示例代碼如下： 復(fù)制代碼代碼如下: document.getElementsByTagname('li') //li是標(biāo)簽的名字 需要注意的是，該方法除了能被document對象調(diào)用之外,，還可以被普通的元素調(diào)用,。示例如下： 原生DOM的話首先獲取標(biāo)簽對象,，id或者name或其他 <p id="targetp" >2333333</p> <script> jQuery獲取 $("#content-header").get(0).tagName如果已經(jīng)獲取到對象可以直接獲取標(biāo)記名 <p onclick="alert('您單擊的是：'+this.tagName);">中華人民共和國</p>復(fù)制代碼代碼如下: var demo = document.getElementById('demo'); var lis = demo.getElementsByTagname('li'); 同樣，該方法兼容主流瀏覽器,，甚至包括IE6+,，可以大膽使用。 getElementsByClassName 除了通過指定標(biāo)簽獲取元素外,，DOM還提供了getElementsByClassName方法來獲取指定class名的元素,。不過由于該方法比較新，較老的瀏覽器還不支持,，比如IE6,。不過我們可以通過hack方式來彌補(bǔ)老瀏覽器缺陷。該方法調(diào)用的方式如下所示： 復(fù)制代碼代碼如下: document.getElementsByClassName('demo') //demo為元素指定的class名 和getElementsByTagname一樣,， 該方法除了能被document對象調(diào)用之外,，還可以被普通的元素調(diào)用。 對于比較老的瀏覽器,，比如IE6,、7我們可以通過下面的hack方式來實(shí)現(xiàn)： 復(fù)制代碼代碼如下: function getElementsByClassName(node,classname){ if(node.getElementsByClassName) { return node.getElementsByClassName(classname); }else { var results = []; var elems = node.getElementsByTagName("*"); for(var i = 0; i < elems.length; i++){ if(elems[i].className.indexOf(classname) != -1){ results[results.length] = elems[i]; } } return results; } } 拓展 如果你不僅僅滿足上面那些元素選擇的方法，想和JQuery一樣,，能通過選擇器來獲取元素,，實(shí)現(xiàn)的方法和上面的getElementsByClassName差不多，如果有興趣自己可以實(shí)現(xiàn)一套選擇器,。不過我覺得有上面的三個方法再結(jié)合事件冒泡,，已經(jīng)夠用了，畢竟這三種性能上算是優(yōu)秀的,。 |
|
|
