DOM映射机制：

        在JS中获取到的元素对象或者元素集合一般都和页面中的HTML结构存在映射关系（一个变另外一个也会跟着变）

var oBox = document.getElementById('box');
//=>oBox是JS中的一个对象
oBox.style.backgroundColor = 'orange';//=>修改oBox中的style中的backgroundColor属性值为'orange'
    （把oBox堆内存中的某些东西改了） 但是这样操作完成后：页面中的DIV背景颜色修改为橙色
//=>映射原理：浏览器在渲染页面的时候给每一个元素都设置了很多内置的属性（包含样式的），
    当我们在JS中把堆内存中的某一个内置属性的值修改了，大部分情况下，浏览器都会监听到你的修改，
    然后按照最新修改的值重新渲染页面中的元素

var oList = document.getElementsByTagName('div');
console.log(oList.length);//=>2
//=>当我们把页面中的HTML结构通过某些操作修改了(删除或者增加),我们无需重新获取元素集合,oList中的内容会自动跟着进行修改
console.log(oList.length);//=>1

var oList = document.querySelectorAll('div');
//=>通过querySelectorAll获取到的元素集合(节点集合)不存在DOM的映射机制，因为获取到的集合不是标准的NodeList，
    而是属于StaticNodeList(静态的集合)

//=>操作真实的DOM在项目中是比较消耗性能的（尽量减少）