dom节点

一 .dom节点

  概念：   每个html标签、标签属性、内容、注释...都被看成dom节点

              DOM 就是我们 html 结构中一个一个的节点构成的

  分类：  元素节点   属性节点     文本节点

  获取：   getElement系列       querySelector系列     层次关系获取节点

  非常规节点获取

      获取html根节点   document.documentElement

      获取body节点    document.body

      获取head    document.head

二.  操作节点

我们所说的操作无非就是 增删改查（CRUD）

创建一个节点（因为向页面中增加之前，我们需要先创建一个节点出来）

        var divEle=createElement（“”）

        var divEle=createTextNode（“这是个文本”）

  向页面中增加一个节点

        appendChild：是向一个元素节点的末尾追加一个节点

         insertBefore：向某一个节点前插入一个节点

     删除页面中的某一个节点

         remove: 移除当前节点

   语法：oDiv.remove() 移除oDiv节点

修改页面中的某一个节点

       replaceChild：将页面中的某一个节点替换掉

       父节点.replaceChild(新节点，旧节点)：将页面中的某一个节点替换掉

获取页面中的某一个节点

     语法： 节点.cloneNode(true|false)

          true: 复制节点包含节点下所有子节点

          false: 复制当前节点

三. 操作样式

classList 动态添加移除class类样式

   添加样式       div.classList.add('active')

   移除指定样式    div.classList.remove('active')

className class类样式

divEle.className=‘类名’

区别 没有括号

四.  操作属性

   getAttribute('属性名')

   setAttribute('属性名',"属性值")

    removeAttribute('属性名')

五 .获取元素的偏移量

就是元素在页面上的什么位置

我们有几个属性来获取，offsetLeft 和 offsetTop 和 offsetWidth 和 offsetHeight

获取元素尺寸（宽、高）三种方式

offsetWidth = 内容width + padding + border

clientWidth = 内容width + padding

window.getComputedStyle(divEle).width =  内容width

注意 定位的区别