DOM详解及DOM查询方式、DOM修改CSS

1、DOM

DOM（Document Object Model）：文档对象模型，通过DOM可以来任意来修改网页中各个内容

• 文档
  - 文档指的是网页，一个网页就是一个文档

  • 对象

    • 对象指将网页中的每一个节点都转换为对象
      转换完对象以后，就可以以一种纯面向对象的形式来操作网页了

  • 模型

    • 模型用来表示节点和节点之间的关系，方便操作页面

  • 节点（Node）

    • 节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点
    • 虽然都是节点，但是节点的类型却是不同的
    • 常用的节点
      • 文档节点 （Document），代表整个网页
      • 元素节点（Element），代表网页中的标签
      • 属性节点（Attribute），代表标签中的属性
      • 文本节点（Text），代表网页中的文本内容

  • DOM操作

    • DOM查询
    • 在网页中浏览器已经为我们提供了document对象，
      它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。
    • document查询方法：
      • 根据元素的id属性查询一个元素节点对象：
        • document.getElementById(“id属性值”);
      • 根据元素的name属性值查询一组元素节点对象:
        • document.getElementsByName(“name属性值”);
      • 根据标签名来查询一组元素节点对象：
        • document.getElementsByTagName(“标签名”);
          
          
    • 元素的属性：

      • 读取元素的属性：
        语法：元素.属性名
        例子：ele.name
ele.id
ele.value
ele.className

      • 修改元素的属性：
        语法：元素.属性名 = 属性值

      • innerHTML