我是一颗树 · DOM

最新推荐文章于 2021-07-03 11:05:54 发布

lefex

最新推荐文章于 2021-07-03 11:05:54 发布

阅读量188

点赞数

本文链接：https://blog.csdn.net/lefex/article/details/104489691

版权

我是一颗树，吹着海风，晒着太阳，活的逍遥自在。我有很多树枝，每一根都很独立，互不相交：

一天有一个叫浏览器的家伙看上了我，说给我很大的权利，在浏览器的世界里可以横行霸道，拥有至高无上的权利，而且福利待遇非常好。我信了，决定到浏览器的世界体验一下生活。

第一天上班后，浏览器帮我换了个造型，说这样非常方便工作，我信了。我被改造成了这个样子。

当照完镜子后，我怒气冲冲向浏览器吼道：“你把我的英俊潇洒还给我”。浏览器微微一笑，说到：“你看你这样多精干啊！”。他那帮手下 window、location、navigator、screen、history 都随声附和道：“比以前帅多了”。我信了，但是我总觉得自己「栽了个跟头」。

浏览器继续补充道：给你换了个造型，你有两点优点是别人无法超越的。第一、你是处于金字塔顶尖的人，独一无二；第二、你可以有无穷多个子孙，每一个子孙都相互独立，互不干扰私生活。

听了浏览器的话，我心里感觉舒服了许多。

浏览器又发话了，你的其它同事都有英文名，我给你也起一个吧，以后叫你 document，你还有一个独特的名字 DOM。我内心嘀咕着：“难道我就是个文档？不过想到从今以后有了英文名字还是挺开心的”。

工作的第一天，我除了「栽了个跟头」，还有一个好听的英文名字。

第二天，我来到工作岗位。浏览器把我叫到办公室，我看到他旁边多了一个人，看着挺厉害，我小心地躲开了她。接着浏览器说道：“这是你的直接 leader —— window 女士，以后你属于她的手下，希望你们合作愉快”。我们彼此微微一笑，然后就都回到自己的工位了。

不一会儿，window 走到我的工位说，我带你认识下其它同事。我屁颠屁颠跟着她。

首先来到我身旁的同事，只见他正在记录着地址（http://www.xx.com）一类东西。window 说道：“这位是 location，他负责提供浏览器页面的位置信息，也可以跳转到其它页面。以后你们会配合的多一些，他也是你得力的手下，希望你们合作愉快”。

「公众号素燕注：location 即是 window 的属性，也是 document 的属性，document.location === window.location」。

接着，来到另一位同事面前，window 说道：“这位是 navigator，他负责记录我们老大浏览器的一些信息，比如我们老大懂几种语言，老大的名字等”。

接着，又来到了一位同事面前，直见他坐在角落里，此时正玩着游戏呢。见我们走来，急忙退出游戏。window 假装没看到，我心里嘀咕：“这家伙工作不饱和啊”。window 说道：“这位是 screen，他负责记录我们老大的一些身体特征，比如身高”。

「公众号素燕注：screen 主要提供浏览器的尺寸信息，比如浏览器的宽高，很少被用到」。

走到最后一位同事面前，只见他手里在记录这什么，看着比较忙。window 说道：“这位是 history，他负责记录人们在浏览器中访问页面的历史记录，可以帮用户返回他们上次访问的页面”。

介绍完这些同事，我们都回到了工位。此刻正好 11 点，赶紧把刚才 window 介绍给我的同事记录一下，以后遇到问题可以找他们。说着随手画了这张图。正好吃饭的时间到了，和同事们一起吃饭了。

「公众号素燕注：这张图就是各个对象中的属性，负责记录当前页面或浏览器的一些属性」。

吃完饭后回到工位，睡了一会，突然听到微信响了一声。打开微信一看：

完了，估计睡觉被 window 看到了，我匆匆忙忙赶到了办公室，只见 window 已经准备就绪，正等着我。

window 说道：你的工作比其它同事都要多，而且非常重要，只有你能做这份差事，因为你拥有天然的优势，这也是我们老大看上你的原因。我们均为浏览器工作，浏览器的主要功能就是提供各种页面，供人们访问。但最近接到很多开发者吐槽说我们太不灵活了。比如点击按钮后，想修改用户名称也不行，修改背景色也不行，页面只能是“死”的。开发者想让页面“活”起来。

接着 window 打开了一位开发者的页面说道：“实现类似下面的效果，当点击按钮「换个颜色」，顶部的方块变成红色”。