DOM树和在js当中获取DOM元素的方法你必须要知道

柳如是
1,733 阅读4分钟

DOM树

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab选项卡</title>
</head>
<body>
    <div class="box" id="box">
        <ul>
            <li class="item1 item2">新闻</li>
            <li class="item1">音乐</li>
            <li class="item2">电影</li>
        </ul>
        <div>金三胖访华</div>
        <div>需要你陪</div>
        <div>复仇者联盟</div>
    </div>
 
</body>
</html>

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

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

在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获取的结果）
avatar
文章
阅读
粉丝