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; //返回一個元素