JS学习——day3

DOM

* 概念：Document Obiect Model 文档对象模型
  * 将标记语言文档的各个组成部分，封装成对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
* DOM 标准被分为3个不同的部分
  * 核心DOM - 针对任何结构化文档的标准模型
      * Document：文档对象
          * 创建（获取）：在HTML DOM模型中可以使用window对象来获取
            1.window.document
            2.document
          * 方法
            1.获取Element对象：
                * getElementById()：根据id属性值获取元素对象。id属性值一般唯一
                * getElementsByTagName()：根据元素的名称获取元素对象们。返回值是一个数组
                * getElementsByClassName()：根据Class属性值获取元素对象们。返回值是一个数组
                * getElementsByName()：根据name属性值获取元素对象们。返回值是一个数组
            2.创建其他DOM对象
      * Element：元素对象
          1.创建：通过document来获取和创建
          2.方法：
              * removeAttribute()：删除属性
              * setAttribute()：设置属性
      * Attribute：属性对象
      * Text：文本对象
      * Comment：注释对象
      * Node：节点对象，其他3个的父对象
          1.特点：所有DOM对象都可以被认为是一个节点
          2.方法：
              *CRUD DOM树
                  * appendChild()：向系欸但的子节点列表的结尾添加新的子节点
                  * removeChild()：删除（并返回）当前节点的指定子节点
                  * replaceChild()：用新节点替换一个子节点
  * XML DOM - 针对XML文档的标准模型
  * HTML DOM - 针对HTML文档的标准模型
      1.标签体的设置和获取：innerHTML
      2.使用HTML元素对象的属性
      3.控制元素样式
          * 使用元素的style属性来设置
            * 修改方式：div.style.border = "1px soild red"
                        div.style.width = "200px"
          * 提前设置好类选择器的样式，通过元素的calssName属性来设置其class属性值