JS系列：DOM树和在js当中获取DOM元素的方法

DOM树

dom tree
当浏览器加载html页面时候，首先计算DOM结构，DOM结构就是DOM树。也就是（把页面中html标签像树桩结构一样，分析层级关系）

    
    


    

        

            
新闻
            
音乐
            
电影
        
        
金三胖访华
        
需要你陪
        
复仇者联盟
    
 

   

DOM树描述了标签和标签之间的关系（节点关系），只要知道一个标签，就可以一次根据DOM中提供的属性和方法，获取任意一个标签和节点
DOM树层次关系:

在js当中获取DOM元素的方法

getElementById

通过元素的id获取指定的元素对象，使用的时候都是document.getElementById('')’此处的document是限制了获取元素的范围，我们把它称为上下文（context）

1. document.getElementById的上下文只能是document
2. 严格意义上，id不能重复
3. 如果id重复了，我们基于这个方法只能获取第一个元素，后面相同的元素无法获取
4. 在ie6-7浏览器当中会把表单元素，（input）的name属性值会当做id来使用，不要让name和id冲突

getElementsByTagName

[context].getElementsByTagName() 在指定上下文中，根据标签名获取到一组元素集合（HTMLCollection）
1.获取元素集合是一个类数组（不能直接的使用数组中的方法）

   var oBox=document.getElementById('box'),
       divList=oBox.getElementsByTagName('div');
       console.log(divlist);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2NBWCl5W-1576491166837)(./1576487116961.png)]

2.它会获取当前上下文，子子孙孙后代层级内的标签都获取到（获取的不仅仅是儿子级别的）
3.基于这个方法获取到的结果永远是个集合，如果需要获取具体的一项，需要基于索引获取才可以

   var oBox=document.getElementById('box'),
       divList=oBox.getElementsByTagName('div');
       console.log(oBox.getElementsByTagName('ul')[0]);
       => <ul>
            <li>新闻</li>
            <li>音乐</li>
            <li>电影</li>
         </ul>

getElementsByName

1. getElementsByName()它在上下文只能是document,在整个文档中，基于元素的name属性获取一组节点集合（也是一个类数组）
2. 在ie浏览器中（ie9以下版本），只对表单元素的name属性起作用，（正常来说，我们项目中只会给表单元素设置name, 给非表单元素设置name。其实是一个不太符合规范的操作）
   getElementsByClassName
3. [context].getElementsByClassName在指定的上下文中，基于元素的样式类名（class=‘xxx’）获取到一组元素集合
4. 真实项目中，我们基于样式类来给元素设置样式，所以在js中，我们经常基于样式类获取元素，但是ie6-8不兼容
   querySelector
[context].querySelector()在指定的上下文中，基于选择器（类似css选择器’）获取指定元素对象（获取的是一个元素，哪怕选择器匹配了多个，只获取一个）
   querySelectorAll
[context].querySelectorAll()在指定的上下文中，我们获取到选择器匹配到所以的元素，结果是一个节点集合
   1.querySelector/querySelectorAll 都是不兼容ie6-8， 我们尽量使用ById或者其他方法来获取，因为这两个有性能消耗
   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LNMC6CUN-1576491166838)(./1576489764729.png)]

document.head

获取HEAD元素对象
document.body
获取BODY元素对象
document.documentElement
获取HTML元素对象

   //=>需求：获取浏览器一屏幕的宽度，高度（兼容所以浏览器）
   document.documentElement.clientWidth || document.body.clientWidth
   document.documentElement.clientHeight || document.body.clientHeight
   

面试题：
获取当前页面中所有id为haha的（兼容所以浏览器）

   //=>不能使用querySelector
   //先得到页面所有html的标签
   //依次遍历循环元素标签对象，筛选id为haha，然后存储起来
   function queryAllById(id){        
        //=>基于通配符*获取整个文档中所有的html标签
        var nodeList=document.getElementsByTagName('*');
        //遍历每一个标签，把元素id和传递的id相等了，把这一项存储起来
        var ary = [];
        for (var i=0;i<nodeList.length; i++){
          var item = nodeList[i];
          item.id == id ? ary.push(item) : null;
   }
   return ary;
}
console.log(queryAllById('item'));
=> 
(3) [ul#item, div#item, div#item]
0: ul#item
1: div#item
2: div#item
length: 3
__proto__: Array(0)

或者

console.log(item)
=>
(3) [ul#item, div#item, div#item]
0: ul#item
1: div#item
2: div#item
length: 3
__proto__: Array(0)
//在js中，默认会把元素的id设置为变量（不需要在设置），而且id重复，获取的结果就是一个集合，包含了所以的id项，不重复就是一个元素对象（类似ById获取的结果）