day11——DOM（下）

DOM节点：

从文档对象模型DOM角度看:
  每个html标签、标签属性、内容、注释...都被看成dom节点
  DOM 就是我们 html 结构中一个一个的节点构成的

DOM节点分类
  DOM 节点类型
    1.整个文档是一个文档节点
    2.每个 HTML 元素是元素节点
    3.HTML 元素内的文本是文本节点
    4.每个 HTML 属性是属性节点   
    5.注释是注释节点
  常用的三大类:  元素节点 / 文本节点 / 属性节点

DOM节点树形结构 

画出节点树形图

DOM节点关系
  根节点：在HTML文档中，html就是根节点。
  父节点：一个节点之上的节点就是该节点的父节点，例如ul的父节点就是body，body的父节点就                   是html。
  子节点：一个节点之下的节点就是该节点的子节点，例如ul就是body的子节点。
  兄弟节点 ：如果多个节点在同一层次，并拥有相同的父节点，那么这几个节点就是兄弟节点。                         例如所有li是兄弟节点，因为他们拥有相同的父节点ul

获取节点：

获取元素节点
  getElement系列
  querySelector系列

层次关系获取节点
  children ：获取某一节点下所有的子一级 元素节点

层次关系获取元素节点
  firstElementChild
  lastElementChild 

获取元素节点的所有属性节点: attributes

层次图 非常规节点获取：
  获取html根节点
    document.documentElement
  获取body节点
    document.body
  获取head
    document.head

节点属性：

打印ul元素节点下所有节点信息?                                                                                        ul.childNodes 获取ul元素节点下所有子节点                                                                                    => 返回值是伪数组 

操作DOM节点：

 我们所说的操作无非就是                                                                                                                 增删改查（CRUD）                                                                                                                         创建一个节点（因为向页面中增加之前，我们需要先创建一个节点出来）                                       向页面中增加一个节点                                                                                                                     删除页面中的某一个节点                                                                                                                 修改页面中的某一个节点                                                                                                                   获取页面中的某一个节点

 创建节点                    
  创建属性节点                                                                                                                           createAttribute: 创建属性节点                                                                                               setAttruibuteNode: 给元素节点设置属性节点

 

 加入节点
  appendChild：是向一个元素节点的末尾追加一个节点
  insertBefore：向某一个节点前插入一个节点

 删除节点
  removeChild：移除某一节点下的某一个节点
  remove: 移除当前节点                                                                                                                        语法：oDiv.remove() 移除oDiv节点

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

复制节点
  语法： 节点.cloneNode(true|false)                                                                                                               true: 复制节点包含节点下所有子节点                                                                                                 false: 复制当前节点 

获取元素的非行间样式：

 我们在操作 DOM 的时候，很重要的一点就是要操作元素的 css 样式                                             那么在操作 css 样式的时候，我们避免不了就要获取元素的样式                                                   之前我们说过可以用 元素.style.xxx 来获取                                                                                     但是这个方法只能获取到元素 行间样式，也就是写在行内的样式

获取元素的偏移量：

 就是元素在页面上的什么位置                                                                                                         我们有几个属性来获取，offsetLeft 和 offsetTop 和 offsetWidth 和 offsetHeight 

offsetLeft 和 offsetTop

offsetWidth 和 offsetHeight 

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

offsetWidth = 内容width + padding + border                                                                            clientWidth = 内容width + padding                                                          window.getComputedStyle(divEle).width =  内容width