JavaScript:)DOM

DOM(Document Object Model):文档对象模型

• Dom的核心就是document对象
• document 对象是浏览器内置的一个对象，操作元素
• DOM: 页面标签，通过js获取到，这个对象为Dmo对象

获取一个元素

getElementById:
通过标签id名称获取标签
getElementByClassName:
通过标签的class名称来获取标签，
获取到的是一组元素，伪数组，
准确拿到想要的标签，需要用索引
getElementByTagName:
用标签的标签名称来获取标签，也是伪数组
querySelector:
选择器的方式获取元素，
只能获取到一个元素，是页面中第一个满足条件的元素
querySelectorAll:
也是按照选择器的方式获取元素
能获得所有满足条件的元素，以一个伪数组的形式返回

操作属性

innerHTML:
获取元素内部的HTML结构
innerText:
获取元素内部的文本
getAttribute:
获取元素的某个属性
setAttribute:
给元素设置一个属性
removeAttribute:
直接移除元素的某个属性
style:
给元素添加行内css样式
className:
操作元素类名，可设置元素类名，全覆盖式

DOM节点

分为三大类:

• 元素节点:getElementBy…获取到的都是元素节点
• 属性节点:getAttribute获取到的都是元素的属性节点
• 文本节点:innerText获取到的都是元素的文本节点

获取节点

• childNodes:
  获取的是某一个节点下的所有的子一级节点，
  拿到的是一个伪数组
• children:
  获取某一个节点下所有的子一级 元素节点，是伪数组
• firstChild:
  获取某一个节点下一级的第一个节点
• firstElementChild:
  获取某一个节点下一级第一个元素节点，不是伪数组
• lastChild:
  获取某一个节点下一级的最后一个节点
• lastElementChild:
  获取某一节点下一级最后一个元素节点
• nextSibling:
  获取某一个节点的下一个兄弟节点
• nextElementSibling:
  获取某一个节点的下一个元素节点
• previousSibling:
  获取某一个节点的上一个兄弟节点
• previousElementSibling:
  获取某一个节点的上一个元素节点
• parentNode:
  获取某一个节点的父节点
• attributes:
  获取某一个元素节点的所有属性节点
  获取到的是一个伪数组

节点属性

nodeType:
获取节点的节点类型，用数字表示
nodwType===1/2/3
等于1元素节点，等于2属性节点，等于3注释节点
nodwName:
获取节点的节点名称，
元素节点的nodeName为大写标签名,
属性节点的为属性名,
文本节点的为#text,
nodeValue:
获取节点的值
元素节点没有nodwValue,
属性节点为属性值
文本节点就是文本内容

操作DOM节点

创建一个节点:

• createElement:创建一个元素节点
• createTextNode:创建一个文本节点

加入一个节点:

• appendChild:
  是一个元素节点的末尾追加一个节点，
  语法:父节点.appendChild(要插入的子节点)
• insertBefore:
  向某一个节点前插入一个节点
  语法:父节点.insertBefore(要插入的节点，插入在哪一个节点的前面)

删除某一个节点

• removeChild:
  删除某一个节点下的某一个节点
  语法:父节点.removeChild(要移除的子节点)

修改某一个节点

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

获取元素的非行间样式

• 元素.style.width获取的是行内样式
• getComputedStyle:
  getComputedStyle(元素，Null),要获取的属性，非IE使用
• currentStyle:
  元素.currentStyle.要获取的属性，IE使用

获取元素的偏移量

offsetLeft,offsetTop,offsetWidth,offsetHeight

• offsetLeft和 offsetTop
  获取的是左边的偏移量和上边的偏移量
  1无定位，获取到的就是元素外侧到页面内侧的距离
  2有定位，获取元素边框外侧到定位父机边框内侧的距离

• offsetHeight和offsetWidth
  获取元素 内容宽高+padding宽高+border宽高的和