js-DOM中基礎選擇器的整理

DOM中基礎選擇器的整理

注意：DOM中選擇器返回是數組類型的都是僞數組，只能擁有數組的索引以及length,數組的其餘方法是不可使用的！

一：DOM中的選擇器

1.getElementById(id)        //獲取指定元素的ID元素   
2.getElementsByTagName()    //獲取相同元素的節點列表，經過標籤名選擇元素，返回值是一個數組
3.getElementsByName()       //經過name值獲取元素，返回值是數組，一般用來獲取有name的input的值
4.getElementsByClassName()  //經過class名獲取元素，返回值(HTML集合)是數組n

　　tip：這是四個基礎的選擇器，後面在其基礎上在拓展

二：ES5選擇器：就兩個，但功能強大(都是對象的方法)

　　注意：兼容性自行測試

1：document.querySelector(); //能夠獲取全部類型的選擇器，可是隻能獲取一個，返回的值是單個元素

拓展：querySelector返回dom的子元素中第一個符合selectors選擇器字符串的元素，無匹配項則返回null，在獲取時， 能夠直接在括號內使用css選擇器的樣式，好比：obox = document.querySelector("#box>h2");

 

 

2：document.quertSelectorAll(); //能夠獲取全部類型的選擇器，返回的是僞數組

拓展：和上面同樣，不一樣的是它返回的是匹配的全部元素列表，是一個nodeList集合，並且是non-live的(理解爲不會實時更新)
這個獲取是比較重要的，須要深刻理解一下。
console.log( document.querySelectorAll('#contani div') )

用querySelectorAll去獲取後代的後代選擇器，返回時多少,相似於('div div div')
注意：關於querySelectorAll另外要注意的一點是：當且僅當querySelectorAll的選擇器字符串是‘div div’時（如：dom.querySelectorAll(‘div div’)），它匹配的元素包括了dom，也就是說若是該dom元素和它的子元素構成了div div這種父子結構時，該dom也會被匹配到。

eg:dom.querySelectorAll(div div div);
dom.querySelector(contani).querySelectorAll(div div);
//當構成了div div父子結構，前者的div認爲是匹配到了dom元素，此時的dom.querySelector(contani).querySelectorAll(div div);
等同於dom.querySelector(contani).querySelectorAll(div);都是選擇contani的後代div元素　

 

補充：non-live(不是實時更新)，關於getElementsTagName();與dom.querySelectorAll()；

在獲取基礎選擇中選擇器，有個getElementsTagName();獲取標籤(元素)選擇器，這個標籤選擇器得到節點集合(列表)是實時更新獲得，

dom.querySelectorAll();不是實時更新的；下面測試一下，當插入了一個新的節點後，獲取到的原選擇器否會更新；

 

從上面的測試中能夠看出，當追加了新的節點的時候，querySelector();獲取的節點集合並無刷新，而getElementsTagName();獲取的html集合是刷新的
有人會問，明明用的是className()測試的，跟tagName()有什麼關係呢?由於若是直接用tagName是沒有辦法直接獲取到box裏面的div的，這時候委婉的用className來測試一下，能夠得出一樣的效果，讀者也能夠自行測試一下。

補充兩點：這兩個都是dom的屬性，不是方法
根據父級，選擇子級：
　　oDiv.children; //返回一個僞數組
根據子級，選擇父級：
　　oSpan.parentNode; //返回一個元素