js css html和DOM的关系和使用场景

html：作为网页的布局上的框架基础，用来编写网页的结构，即网页的组成元素和各元素之间层级关系。同时html中只有一系列已给定的类型作为基础构件，只能通过各元素的并置或叠套来组合各个元素。没有函数也不可自己创造类型。相当于在html的世界中有着五颜六色的各种盒子，你只能把某一颜色的盒子装在另一个里面，或者和其他盒子放在一起，盒子的种类是有限的，同时每种盒子有着不同的特性（链接，显示文本之类的）。但你不能够创造盒子，或者创造其他的如何东西。同时它会主动忽略一些自己不认识的东西，不对它做任何处理。同时html也能够对各种盒子定义格式，对这些盒子元素进行渲染。

 css：html理论上不需要css也能够完成网页，但是为了简化一些重复性的代码，同时让结构和形式分开使得代码可读性增强，逻辑也更清晰，而产生css。css用来定义网页中各元素格式（位置，颜色，变化，动画效果······），用以渲染网页的文本，在html各元素生成之间就生效。在盒子的世界，规定了网页内某些类别的盒子有什么特点，如果html中恰好有一些盒子符合css的规定，那么他就按照css说的做（位置如何，颜色如何，显示如何···）。没有css，网页的信息同样也能显示出来，但只能按照默认显示，显示结果当然是不堪入目。

js：相对较为复杂的语言，只能够被浏览器解释。拥有各种函数使之能够通过程序员的创造完成一些html完成不了的效果，是为了增加网页交互性而产生的，同时能够通过编写函数减少重复性操作，也能够使网页能够完成一些更复杂的动态之类的效果。在html生成被css渲染之后运行，对网页进行重新的渲染。

DOM：使得js能够通过DOM代码访问html的结构，对html的元素结构直接进行干预（增加，删除，复制···），通过对html的访问和操作，使得js的效果最终能够被施加于html上。js和html之间本来缺乏联系，互相之间都不能访问，通过DOM使得js的操作能够影响到html上，是作为两者作用（js对html单向作用）的桥梁。由于是操作html的元素，所以只能在html生成完全后起作用，只能写在body之后。

理论上一个网页只需要html，但是为了让网页代码能够容易被读懂，同时方便程序员对于结构的把握，将html中对于各元素格式及效果的描述性代码分离出来，形成css。但由于html和css的可拓展性很差，可变化的范围小，不能够完成一些较为复杂的效果，或者完成起来很复杂。所以加入js，用以丰富网页的形式，可以变化的余地也大大增加。但是js和html之间没有交集，互补干涉，如何使得js能够影响到html，于是便产生DOM，就像上帝之手，能够把js代码插入到html的任何部位，同时可以对任何位置的html元素进行结构性的操作移动和访问。