思索没应用程序的日常生活！ 可悲？ 幸运地的是，他们有应用程序，它给了他们心灵的礼品——一扇门通向他们纷乱但此时此刻的询问处。 责任编辑深入探讨了采用 Chrome 的 DOM。 让他们已经开始…
自学最终目标
采用 DOM 建立、加载、预览和删掉 HTML 原素、特性和 CSS 式样。将该事件执行程序附带到 DOM 中的第一类掌控 Chrome 的开发人员辅助工具。甚么是 DOM？
当应用程序浏览 HTML 时，它会构筑两个称作文件格式第一类模型 (DOM) 的动态计算机程序。 他们操作方式 DOM 以动态更动文件格式的式样、内部结构和文本。 图1。
当他们更动 DOM 时，他们只更动 HTML 的则表示，而不更动源码。 此种则表示称作 dom-tree。 应用程序询问处的文件格式第一类会立刻表明对 dom-tree 的更动。 图 2。
DOM 树
DOM 中的在我看来两个结点。 dom-tree 的顶端是文件格式结点，它是坐落于它上面的大部份结点的父结点。 结点五子结点，具有完全相同父结点的子结点是兄妹结点。
DOM 坐落于这儿？
对于选项卡式应用程序，每个选项卡都是两个询问处第一类，并且该询问处第一类包含文件格式第一类。 他们采用 DOM 来操作方式文件格式第一类来预览页面。 图 5。
如何更动 DOM？
要更动文件格式的式样、内部结构或文本，他们在文件格式第一类上采用 dom-methods。 笔记！ — dom-nodes 是第一类，并且第一类具备他们采用 JavaScript 更动的方法和特性。 图 6。
CRUD示例
让他们采用 dom-methods 来：
建立两个元素结点。将原素结点的 innerText 特性预览为“Hello World”。将原素结点附带到现有原素。删掉原素结点ml 页面，然后右键单击该文件格式并选择检查以调出开发人员辅助工具。 如果不可见，请点击退出以调出控制台。 图 7。
恭喜，您采用 dom 方法和特性与 DOM 进行了交互。 那有多容易？
该事件监听器
最后，让他们为 <body> 原素结点添加两个“点击”该事件侦听器，以在用户点击文件格式时将正文的背景更动为随机颜色。 图 9。
document.body.addEventListener(‘click’,()=>{document.body.bgColor= Math.floor(Math.random()*16777215).toString(16)})
这结束了他们对 DOM 的简短探索。
现在去砸那个拍手按钮！
