回到工位“我”悟出了 DOM 设计的精华

上节内容：我是一颗树 · DOM

自从与 window 谈话完后，我一直在想如何能出色地完成我的工作，满足开发者的需求。

我看了看开发者的代码，结构都是一样的。

但我始终想不明白该如何做。直到回想到 window 说过的一句话，“你有自己的独特优势”。顿时恍然大悟，这个代码和我的结构一样。随后我在草稿上画了画。

把开发者写好的代码进行解析，每个标签有开始标签和结束标签，然后使用我的好兄弟「栈」即可把代码转换成一颗树。

但是我想要修改 div 的样式，前提是我需要找到这个 div，然后才能对它实施操作。我内心嘀咕着：“要不要问问 window 吧，顺便汇报下目前的进展，好让 leader 有个预期，别最后告诉她我完不成”。

来到 window 的办公室，她正听着音乐，安静地工作着。她看到我，示意让我坐下。

我把我遇到的问题一一和她说明了。她听完后对我的进展比较满意，然后给我介绍了一位隔壁部门的同事选择器，英文名为 selector。她说：“selector 可以帮你定位到你想要的节点”。

回到工位后，我确定了我遇到的几个问题：

1、可以找到唯一一个节点；

2、可以找到一类节点；

3、可以找到任意节点；

来到 slector 的工位旁，只见她的电脑屏幕上显示着：

selector 看到我后说：“你是小 d 吧？”。我一时没反应过来，心想：“小 d ？我是 document，故叫我小 d，看来 window 已经和她打好招呼了”。

我拿出了这张图，并把我的问题抛出来。

听我说完后，她微微一笑，说道：“这个好办，我就是做这件事的，我可以选择任意节点，对这些节点进行动态修改”。说着她在我的图上用笔画了画，并给我说明了原理。

selector 继续说道：“开发者可以对每个节点做个标记，你做的事情就是提供根据这些标记获取对应的节点的方法”。

「公众号素燕注：你如果不懂选择器，可以看这节课程 第7天：CSS中的选择器详解」

听完 selector 的解答后我如释重负，回到工位后，便开始规划查找节点的事情了。

我设计了第一个功能：getElementById('id')，通过 id 来查找节点，id 是唯一的。下面是开发者写的一段代码：

拿到这段代码，我把他转换成了：

开发者如果想通过一个 id 来选择某一个节点，可以这样写，随后我写下了如下代码：

找到这个节点后，我要修改它的属性咋么办？或许将来 window 还让我干更多事情，这我要好好想清楚了，随后我列出了我可能要做的事情：

1、位置移动；

2、修改样式，比如背景颜色，字体大小；

3、添加事件，用户点击了某个元素；

4、动态增加、删除节点；

等等，这些事情我要考虑清楚。我觉得与 window 请教一下她可能的需求。

我轻轻地敲响了 window 的门，window 说了声：“请进”。

本节完！

我是如何和 window 交流的，请看下节内容。

---

推荐阅读：

我是一颗树 · DOM
上次忘记推荐这本 JavaScript 书籍了
你可能不需要一个 UI 设计师
第五阶段 · 浏览器中的灵魂“人物”