DOM——获取页面元素
获取页面元素
为什么要获取页面元素
例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作
1 根据id获取元素
如果没有找到那个元素，返回null
var div = document.getElementById('main');
console.log(div);
// 获取到的数据类型 HTMLDivElement，对象都是有类型的
注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。
Bug：
document.getElementById(）在IE浏览器（版本8之前）的一个bug
在IE8以前的版本中，document.getElementById()获取的元素不仅限于ID，当存在相同的name属性时，一样会返回该元素 。所以这里会弹出a元素。
标准浏览器中会正确找到id为target元素，IE低版本浏览器中， 返回的是第一个id或name为target的元素。
当有两个相同的id的元素时，返回的是第一个id为target的元素，IE低版本浏览器中， 返回的是第一个id或name为target的元素。
解决Bug：
理解：
1、document.all方法的作用主要是返回对文档中所有 HTML 元素的引用。例如：直接输出这个语句：
2、document.all(0)和document.all[0]都是可以的，都可以选择到第一个元素：
因为document.all方法得到的是一个类数组集合，并不是一个真正的数组，所以既可以使用数组的方法，也可以使用()来获取。记住即可。另外这个属性基本上已经用不到了，了解一下即可。
必须是document.getElementByid("id")。不能用 其他元素.getElementByid("id")。
2 根据name获取元素*
var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
console.log(input);
}
iE6和opera7.5浏览器上有Bug：首先它们会返回id=给定指定元素，其次它们仅返回input元素与image元素。
3 根据标签名获取元素
获取id为list1的元素内的所有li元素。
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
console.log(div);
}
获取注释节点
获取页面中所有元素节点从html开始
4 根据类名获取元素*
var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
var main = mains[i];
console.log(main);
}
支持：Firefox3、IE9、chrome和safari4 以上。
不支持：IE8及以下。
传入多个类名时用空格隔开，不区分先后顺序。
解决getElementsByClassName兼容性问题
1 var getElementsByClassName = function(opts) { 2 var searchClass = opts.searchClass; // 存储要查找的类名 3 var node = opts.node || document; // 存储要出查找的范围 4 var tag = opts.tag || '*'; // 存储一定范围内要查找的标签 5 var result = []; 6 // 判断浏览器支不支持getElementsByClassName方法 7 if (document.getElementsByClassName) { // 如果浏览器支持 8 // 通过getElementsByClassName获取所有的元素 9 var nodes = node.getElementsByClassName(searchClass); 10 // 判断是否传入了指定范围， 如果传入的li， 那么就只返回对应类名为searchClass的li标签 11 if (tag !== "*") { 12 // 这里的node = nodes[i++]表示直到nodes集合中的最后一个元素。停止循环。这个就是循环条件哦。 13 /** 14 * 可以这样理解for循环中间的代码是用来判断是否满足循环条件的 15 * 当i = nodes.length;时候， nodes[nodes.length]值为undefined。 所以node的也被赋值为undefined， 16 * 此时通过隐士类型转换， undefined会被转成false，不满足循环条件了，也就退出循环了 17 */ 18 for (var i = 0; node = nodes[i++];) { 19 // 判断获取元素的标签名和指定的标签名是否相等 20 if (node.tagName === tag.toUpperCase()) { 21 // 相等的话，就将获取的元素存在到一开始定义的数组中 22 result.push(node); 23 } 24 } 25 } else { // 直接将获取的所有元素赋值给result 26 result = nodes; 27 } 28 // 最后返回获取的元素 29 return result; 30 } else { // 使用IE8以下的浏览器能够支持该属性 31 // 所有浏览器都会支持getElementsByTagName这个方法， 所以用给这个方法来兼用不支持getElementsByClassName的方法 32 var els = node.getElementsByTagName(tag); 33 // 获取所有元素 34 var elsLen = els.length; 35 var i, j; 36 // 这里是定义一个正则表达式， 用来匹配传入的类名 37 /** 38 * 正则表达式的定义及相关用法，后面会有对应的章节详细讲解， 同学目前只需要简单了解即可哦 39 */ 40 var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)"); 41 /** 42 * 通过for循环， 将标签中拥有类名元素找到， 赋值给result 43 */ 44 for (i = 0, j = 0; i < elsLen; i++) { 45 // 检测正则表达式， 46 if (pattern.test(els[i].className)) { 47 result[j] = els[i]; 48 j++; 49 } 50 } 51 return result; 52 } 53 }
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>getElementsByClassName() 兼容浏览器方案</title> 7 <script src="domReady.js"></script> 8 <script src="getElementsByClassName.js"></script> 9 <script> 10 myReady(function(){ 11 var myUl2 = document.getElementById("myUl2"); 12 var r = getElementsByClassName({ 13 searchClass: "light dark", 14 node: myUl2 15 }); 16 console.log(r[0].innerHTML); 17 }); 18 </script> 19 </head> 20 <body> 21 <ul id="myUl"> 22 <li class="light">1</li> 23 <li class="light dark">2</li> 24 <li class="light">3</li> 25 </ul> 26 <ul id="myUl2"> 27 <li class="light">1</li> 28 <li class="light dark">second</li> 29 <li class="light">3</li> 30 </ul> 31 </body> 32 </html>
5 根据选择器获取元素*
var text = document.querySelector('#text');
console.log(text);
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
console.log(box);
}
IE7不支持。
querSelector()找不到对应的元素返回null。
querSelectorAll()找不到对应的元素返回空数组。
类名中的冒号，需要进行转义，否则会报错。
返回的是StaticNodeList对象，类似NodeList但不是纯正的NodeList，不具有类数组对象的动态性，下述代码不会陷入死循环。
掌握
getElementById()
getElementsByTagName()
了解
getElementsByName()
getElementsByClassName()
querySelector()
querySelectorAll()
给元素设置样式
