最快速的获取元素的方法？快到你想象不到~

1、首先我们先准备一个div标签，id定义为box

<div id="box"></div>

2、通常情况下我们会使用原生js获取，如下所示：

let box = document.getElementById("box");
// 或者
let box = document.querySelector("#box");

3、也可以使用jQuery来获取元素

let $box = $("#box");

4、以上方法完全都可以，但是有一个问题就是过于太长了。当我们的元素有id属性的时候，我们可以使用该属性名称世界获取该元素，如下所示：

console.log(box);

5、前提条件是命名的id不能和window上的属性相同，如果相同的话，获取的便还是window的属性，不能获取对应的元素了。

6、既然我们找到了使用方法，那我们就应该去寻找它的原理或者来源。

（1）首先我们来判断以下属性box的来源。全局变量一般都在window这个全局对象上，我们输出一下看看。

console.log(window);

（2）这时候我们发现，box在window的b的出现区域没有，那我们去原型上找。

console.log(window.__proto__);

（3）我们输出原型发现原型上什么也看不到我们想要的东西，这时候直接输出不行的话，那我们就只能用去判断属性和对象是否有包含关系了。写了一个方法，判断属性在原型上还是在对象自身上。

//如果返回true就是在自身上,false则在原型链上
function hasOwnProperty(obj, attr) {
    return (attr in obj) && (obj.hasOwnProperty(attr));
}
console.log(isHasOwnProperty(window,"box"));                                  // false
console.log(isHasOwnProperty(window.__proto__,"box"));                        // false
console.log(isHasOwnProperty(window.__proto__.__proto__,"box"));              // true

（4）我们发现属性并不在window对象上，也不再window对象的原型上，而是在window对象原型的原型上。我们使用Object.getOwnPropertyDescriptor()去看一下属性描述。先补充一下，如果指定的属性存在于对象上，则该方法会返回其属性描述符对象（property descriptor），否则的话就会返回undefined。

let desc = Object.getOwnPropertyDescriptor(window.__proto__.__proto__, 'box');
console.log(desc);

（5）总结：

如果DOM元素的id属性和js内置对象属性或全局变量不重名的话，该名称能从window原型链上（window对象的原型的原型上）进行属性的查找。

缺点大家都了解，容易造成全局污染，不推荐大量使用，尤其是单页面开发，因为你也不知道其他开发伙伴或不会命名类似的变量名。