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

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

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

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

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

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

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

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

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

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

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

回到工位后,我确定了我遇到的几个问题:

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

2、可以找到一类节点;

3、可以找到任意节点;

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

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

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

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

回到工位“我”悟出了 DOM 设计的精华听我说后,她微微一笑,说道:“这个好办,我就是做这件事的,我可以选择任意节点,对这些节点进行动态修改”。说着她在我的图上用笔画了画,并给我说明了原理。

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

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

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

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

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

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

拿到这段代码,我把他转换成了:

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

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

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


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

1、位置移动;

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

3、添加事件,用户点击了某个元素;

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

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

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

本节完!

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


推荐阅读:

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

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

相关文章:

  • 2021-11-21
  • 2022-12-23
  • 2022-12-23
  • 2021-12-14
  • 2021-06-05
  • 2021-09-30
  • 2021-08-16
  • 2021-09-16
猜你喜欢
  • 2021-07-13
  • 2022-12-23
  • 2021-07-10
  • 2021-12-05
  • 2021-09-10
  • 2021-12-25
相关资源
相似解决方案