DOM()

DOM的概念

DOM结构

  • 跟对象document(文档对象)
  • 元素对象Element (所有的标签都是元素)
  • 属性对象Attribute(所有标签里面的属性都是属性对象)
  • 文本对象Text(全局所有的文本都是属于文本对象)

document 文档对象

      方法

            1.获取全局的内容

            2.创建全局的内容

     属性

  • document.head //获取head标签
  • document.body //获取body标签
  • document.forms //获取所有的表单标签 返回的是一个HTMLCollection

Element 元素对象

        方法

            1.获取元素 (document的相关方法 element也可以使用)

            2.替换元素（replace）

  • replaceChild （用一个新的元素来替换里面的子元素）
  • replaceChildren （用一个元素来替换里面所有的子元素）

            3.插入元素 （插入对应的子元素）

  • append 插入任意的子元素到对应的父元素内 插入到后面
  • appendChild 插入一个子元素到对应的父元素内容 插入到后面
  • insertBefore 插入一个元素到另一个子元素的前面

            4.删除元素

            5.cloneNode 方法

            6.对于的属性的操作方法

        属性

        只读属性

        所有的元素都具备的属性

        每个元素默认带的属性 都可以通过对应的元素直接点出来

节点操作

        节点分类

        节点相关属性

        一般形式下 只有删了空文本节点才进行第一个和最后一个的获取

        节点分类的区分属性

  • nodeType 节点类型 （1表示元素节点 2表示属性节点 3表示文本节点）
  • nodeValue 节点值 （元素节点的节点值获取不到（null）属性节点的节点值 属性值 文本节点 文本内容）
  • nodeName 节点名 （元素节点的节点就是标签名 属性节点的节点名就是属性名 文本节点 #text）  

        相关的方法

        属性节点操作的相关方法

        this 调用者是谁就指向谁

————————

DOM的概念

DOM结构

  • 跟对象document(文档对象)
  • 元素对象Element (所有的标签都是元素)
  • 属性对象Attribute(所有标签里面的属性都是属性对象)
  • 文本对象Text(全局所有的文本都是属于文本对象)

document 文档对象

      方法

            1.获取全局的内容

            2.创建全局的内容

     属性

  • document.head //获取head标签
  • document.body //获取body标签
  • document.forms //获取所有的表单标签 返回的是一个HTMLCollection

Element 元素对象

        方法

            1.获取元素 (document的相关方法 element也可以使用)

            2.替换元素（replace）

  • replaceChild （用一个新的元素来替换里面的子元素）
  • replaceChildren （用一个元素来替换里面所有的子元素）

            3.插入元素 （插入对应的子元素）

  • append 插入任意的子元素到对应的父元素内 插入到后面
  • appendChild 插入一个子元素到对应的父元素内容 插入到后面
  • insertBefore 插入一个元素到另一个子元素的前面

            4.删除元素

            5.cloneNode 方法

            6.对于的属性的操作方法

        属性

        只读属性

        所有的元素都具备的属性

        每个元素默认带的属性 都可以通过对应的元素直接点出来

节点操作

        节点分类

        节点相关属性

        一般形式下 只有删了空文本节点才进行第一个和最后一个的获取

        节点分类的区分属性

  • nodeType 节点类型 （1表示元素节点 2表示属性节点 3表示文本节点）
  • nodeValue 节点值 （元素节点的节点值获取不到（null）属性节点的节点值 属性值 文本节点 文本内容）
  • nodeName 节点名 （元素节点的节点就是标签名 属性节点的节点名就是属性名 文本节点 #text）  

        相关的方法

        属性节点操作的相关方法

        this 调用者是谁就指向谁