JavaScript 在操作 DOM 节点时通常需要操作大量的节点，这就会让获取的节点分散在代码的各个角落，于是我尝试着将大部分变量整合起来，用对象{}的属性进行封装，放在代码快的最上方，这样的做法显著的加强了代码的可读性。我把它记录下来，并且探讨这种方法的可行性。
DOM 操作中存在的问题
在获取 DOM 对节点进行更改操作时，我们使用 document.getElementsBy_ 方法后将节点储存在实例化的变量中，这时最基本的操作。 在频繁使用这类语句时，我发现了代码可读性上的问题。变量分布在各个语句中，丢失了原本节点的层次性，而且不利于寻找，或许你会说 Ctrl + f 进行查找，但对大量的代码查找这并不能很好的解决问题，如果变量没有很好的差异性，你需要逐个迭代查找。如果后续需要对特定节点的变量进行修改和寻找，就变得繁琐了起来。
let menu = document.getElementsByClassName("menu")[0];
menu.style.display="none";
...
let search = document.getElementsByClassName("search")[0];
search.style.display="none";
...
let icon = document.getElementsByClassName("fa-menu")[0],
icon.style.display="none";
....代码的原本逻辑无法改变，但或许我们可以尝试在代码上想点办法。
对节点变量进行整合
首先我把所有节点变量实例化后全部取出，将它们放在了所有语句块的的顶部，这似乎相对解决了我们的困扰，但是不好管理
根据所有节点变量的父节点进行分组，分别存放在同一的对象中，每个节点变量对应一个父节点对象，这很好的符合对象的思维{key:value}，节点的层次关系也再次被呈现了出来。
let menu = {
menu: document.getElementsByClassName("menu")[0],
search: document.getElementsByClassName("search")[0],
icon: document.getElementsByClassName("fa-menu")[0],
}
menu.menu.style.display="none";
menu.search.style.display="none";
menu.icon.style.display="none";上述将节点变量存入了一个对象，这让节点更清晰的展现出来，并且可以更好的将其复用。但是根据 JavaScript 的垃圾回收的引用记数机制，这会带来多余的内存开销，除了最后一个变量外其他变量的回收时间都被相对延长，直到最后一个变量失去引用时才回收对象。
可能存在的问题和解决方法
如果过多的将变量存入对象，最坏的情况下这个对象所占有的内存会一直存在，直到代码结束。因此，不建议将大量的节点变量存入同一个对象，可以适当的进行拆分，尽可能避免内存不能及时回收的问题。
let tag = {
tags : document.getElementsByClassName("tag-name"),
icon : document.getElementsByClassName("tag-icon")
...
}
let post = {
list: document.getElementsByClassName("post"),
date: document.getElementsByClassName("date")
...
}我们也可以在节点变量不再使用时使用 delete 语句对对象中的属性进行删除，使其提前被回收，只不过相对来说这会增加代码行数，并不可取。
let menu = {
menu: document.getElementsByClassName("menu")[0],
search: document.getElementsByClassName("search")[0],
icon: document.getElementsByClassName("fa-menu")[0],
}
menu.menu.style.display="none";
delete menu.menu;
menu.search.style.display="none";
delete menu.search;
menu.icon.style.display="none";总之，最好选择同一类的引用范围小的代码整合在同一对象中，对于引用范围广的节点变量，请最好单独使用它。