DOM查找元素的方法总结
按HTML查找:
優(yōu)點(diǎn):范圍可大可小,可設(shè)置條件;
包括五種方式:
1.按id查找;
2.按標(biāo)簽名查找:var elems = parent.getElementsByTagName('');
3.按name屬性查找:要回傳給服務(wù)器的元素需要name屬性,專門(mén)找表單中有name屬性的表單元素;---了解即可;
4.按class屬性查找;
var elems = parent.getElementsByClassName('class');
強(qiáng)調(diào):1.可在任意父元素上調(diào)用;2,可返回多個(gè)元素的組成的集合;3,不要求全部匹配,只要包含即可;
缺點(diǎn):每次只能按一個(gè)條件查找,如果條件復(fù)雜的話,就無(wú)法一句話獲得想要的元素;
5,這是重點(diǎn)強(qiáng)調(diào)的選擇器,按選擇器查找:用的比較多,比較犀利。
? ?5.1 只找一個(gè)元素:var elem = parent.querySelector('selector");
? ?5.2 找多個(gè)元素:var elems = parent.querySelectorAll('selector');
那么如何選擇這些查找工具呢?
從使用的難易程度:
1.當(dāng)條件復(fù)雜時(shí):
? ? ? ? ? ? ? ?按選擇器查找--簡(jiǎn)單;按HMTL查找--繁瑣;
2.返回值:
? ? ? ? ? ? getElementsByTagName()返回多個(gè)元素的動(dòng)態(tài)集合;? ? ?
? ? ? ? ? ? 什么是動(dòng)態(tài)集合:不實(shí)際存儲(chǔ)對(duì)象的屬性值,每次訪問(wèn),都要重新查找DOM樹(shù);
? ? ? ? ? ? querySelectorAll()返回多個(gè)元素的非動(dòng)態(tài)集合;非動(dòng)態(tài)集合---實(shí)際存儲(chǔ)對(duì)象的所有值,即使返回反復(fù)訪問(wèn)集合,也不會(huì)導(dǎo)致反復(fù)查找DOM樹(shù)。
3.單次查找效率:
? ? ? ? ? ?按HTML查找--效率高;按選擇器找--效率低;
在這里,我們重點(diǎn)介紹下querySelector()和querySlectorAll(),這兩個(gè)方法支持CSS查詢。可以通過(guò)document和element類型的實(shí)例來(lái)調(diào)用他們,目前完全支持他們的瀏覽器有:
而querySelectorAll:
轉(zhuǎn)載于:https://www.cnblogs.com/ydaimee/p/6749594.html
總結(jié)
以上是生活随笔為你收集整理的DOM查找元素的方法总结的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: js题集15
- 下一篇: 适配器模式(类适配器)