Finishing the DOM foundation selector
Note: DOM selector return is an array type are pseudo-array, index, and can only have length, other methods array of arrays is not used!
A: DOM in the selector
1.getElementById (id) // Get element ID specified element 2.getElementsByTagName () // Get a list of nodes of the same element, the element selected by the tag name, the return value is an array 3.getElementsByName () // name value obtained by element, the return value is an array, there is usually used to obtain the name of the input value 4.getElementsByClassName () // Get the element by the class name, the return value (HTML set) is an array n
tip: This is the basis of four selectors, back on its foundation in expanding
Two: ES5 Selector: Just two, but powerful (all methods of objects)
Note: Compatibility Test yourself
1: document.querySelector (); // get all types of selectors, but only get a value returned is a single element
Development: querySelector returns the child elements of dom elements that match the first selectors of selector string, no match is returned null, when acquiring, may be used directly css style selector in parentheses, such as: obox = document. querySelector ( "# box> h2");
2: document.quertSelectorAll (); // get all type of selector, are pseudo-return array
Development: Same as above, except that it returns a list of all matching elements, is a collection of nodeList, but (will not be understood as real-time updates) non-live of
this acquisition is more important, it requires in-depth understanding.
console.log (document.querySelectorAll ( '# contani div '))
With querySelectorAll to acquire offspring descendant selector, how much return, like ( 'div div div')
Note : For querySelectorAll Another point to note is this: if and only if querySelectorAll the selector string is 'div div' time (eg: dom.querySelectorAll ( 'div div') ), which matching element comprises a dom, that is to say if the dom element and its subelements constitute div div parent-child structure, which will be matched dom to.
EG: dom.querySelectorAll (div div div); dom.querySelector (contani) .querySelectorAll (div div); // div div when the parent-child structure constitutes the former div considered to match to dom element, dom.querySelector this time (contani) .querySelectorAll (div div) ; equivalent to dom.querySelector (contani) .querySelectorAll (div) ; div element is selected progeny of contani
Supplementary : non-live (not updated in real time), on getElementsTagName (); and dom.querySelectorAll ();
在获取基础选择中选择器，有个getElementsTagName();获取标签(元素)选择器，这个标签选择器获得节点集合(列表)是实时更新得到，
dom.querySelectorAll();不是实时更新的；下面测试一下，当插入了一个新的节点后，获取到的原选择器否会更新；
从上面的测试中可以看出，当追加了新的节点的时候，querySelector();获取的节点集合并没有刷新，而getElementsTagName();获取的html集合是刷新的
有人会问，明明用的是className()测试的，跟tagName()有什么关系呢?因为如果直接用tagName是没有办法直接获取到box里面的div的，这时候委婉的用className来测试一下，可以得出同样的效果，读者也可以自行测试一下。
补充两点：这两个都是dom的属性，不是方法
根据父级，选择子级：
oDiv.children; //返回一个伪数组
根据子级，选择父级：
oSpan.parentNode; //返回一个元素