前端-javascript-DOM(重点)

1、DOM概念

// 什么是DOM ?
        /*
        Document Object Model  文档对象模型

        面向对象： 三个特性 封装 继承 多态
         一个对象：  属性和方法

         说 万事万物皆对象 在js没对象 new一个
            document对象
             html标签对象

         head                  body

    link style title          div  p ul li form等

------------------------------------------------------

概念
所谓DOM,全称 Docuemnt Object Model 文档对象模型，毫无疑问，此时要操作对象，什么对象？文档对象

在文档中一切皆对象，比如html,body,div,p等等都看做对象，那么我们如何来点击某个盒子让它变色呢？

DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

解析过程
HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

DOM树（一切皆是节点）

上图可知，在HTML当中，一切都是节点：（非常重要）

元素节点：HMTL标签。
文本节点：标签中的文字（比如标签之间的空格、换行）
属性节点：：标签的属性
整个html文档就是一个文档节点。所有的节点都是Object。