好的博客学习记录1-小火柴之深入理解javascript选择器API系列

自己看的时候没有太多的去注意这些问题，0.0

getElementById()

[注意]若浏览器中出现多个id名的情况，CSS样式对所有该id名的元素都生效，但js脚本仅对第一个出现该id名的元素生效

关于getElementById()方法，IE7-浏览器有两个bug

【1】该方法对匹配元素的ID不区分大小写

【2】表单元素的name属性也会被当作ID属性识别出来。因此为了避免这种问题，最好不让表单元素的name属性和其他元素的ID属性相同

[注意]如果在HTML文档中元素中存在某id属性，并且如果Window对象没有此名字的属性， Window对象会赋予一个属性，它的名字是id属性的值，而它们的值指向表示文档元素的 HTMLElement对象，因此，元素ID隐式地成为了全局变量，与getElementById(id)方法的效果相同

getElementsByName()方法

【1】IE9-浏览器只支持在表单元素上使用getElementsByName()方法

【2】IE9-浏览器中使用getElementsByName()方法也会返回id属性匹配的元素。因此，不要将name和id属性设置为相同的值

原博客地址：http://www.cnblogs.com/xiaohuochai/p/5795796.html

与getElementById()和getElementsByTagName()方法不同，matchesSelector()和querySelectorAll()方法得到的类数组对象是非动态实时的

 1 <div >
 2     <div>1</div>
 3     <div>2</div>
 4 </div>
 5 <script>
 6 var container = document.getElementById('container');
 7 var divOne = container.querySelector('div:last-child');
 8 var divAll = container.querySelectorAll('div');
 9 console.log(container.children.length);//2
10 console.log(divOne.innerHTML);//2
11 console.log(divAll.length);//2
12 
13 var newDiv = document.createElement('div');
14 newDiv.innerHTML = 3;
15 container.appendChild(newDiv);
16 
17 console.log(container.children.length);//3
18 //由于querySelector不是实时的，所以其保存的仍然是原来第二个div的值
19 console.log(divOne.innerHTML);//2
20 //由于querySelectorAll不是实时的，所以仍然只保存了两个div元素
21 console.log(divAll.length);//2
22 
23 console.log(container.querySelector('div:last-child').innerHTML);//3
24 console.log(container.querySelectorAll('div').length);//3
25 </script>

selector类方法在元素上调用时，指定的选择器仍然在整个文档中进行匹配，然后过滤出结果集，以便它只包含指定元素的后代元素。这看起来是违反常规的，因为它意味着选择器字符串能包含元素的祖先而不仅仅是所匹配的元素

1 <div >
2     <div>1</div>
3     <div>2</div>
4 </div>
5 <script>
6 var container = document.getElementById('container');
7 console.log(container.querySelectorAll('div div'));//[div div]
8 </script>

按照正常理解，控制台应该返回空的类数组对象，因为id为container的div元素的子元素中，不存在div元素嵌套的情况

　　但是，该方法实际返回[div div]。这是因为参数中的选择器包含了元素的祖先