获取DOM元素

  1. getElementById（上下文只能是document）
  2. getElementsByTagName（返回元素集合HTMLCollection）
  3. getElementsByClassName（同上，不兼容IE6-8）
  4. getElementsByName（上下文只能是document）
  5. querySelector(类似CSS选择器,只获取一个，不兼容IE6~8)
  6. querySelectorAll(类似CSS选择器,获取所有，不兼容IE6~8)
  7. document.head(head)
  8. document.body(body)
  9. document.documentElement(html)

节点

在一个HTML文档中出现的所有东西都是节点 元素节点（HTML标签）
文本节点（文字内容） 注释节点（注释内容） 文档节点（document）
…每一种类型的节点都会有一些属性区分自己的特性和特征
nodeType：节点类型

nodeName：节点名称
nodeValue：节点值

元素节点:

nodeType：1
nodeName：大写标签名
nodeValue：null

文本节点:

nodeType：3
nodeName：’#text’
nodeValue：文本内容

注释节点:

nodeType：8
nodeName：’#comment’
nodeValue：注释内容

文档节点:

nodeType：9
nodeName：’#document’
nodeValue：null

描述节点之间关系的属性

  1. parentNode:获取当前节点唯一的父亲节点.
  2. childNodes:获取儿子级别的所有类型节点
  3. children:获取当前元素所有的元素子节点
  4. previousSibling:上一个哥哥节点
  5. previousElementSibling:上一个哥哥元素 节点
  6. nextSibling：下一个弟弟节点
  7. nextElementSibling：下一个弟弟元素节点
  8. firstChild：第一个子节点
  9. firstElementChild：第一个元素子节点
  10. lastChild：最后一个子节点
  11. lastElementChild：最后一个元素子节点

DOM的增删改

  1. createElement：创建一个元素标签
  2. appendChild：把一个元素对象插入到指定容器的末尾
  3. insertBefore：把一个元素对象插入到指定容器中某一个元素标签之前
  4. cloneNode：克隆节点
    • [curEle].cloneNode()：浅克隆
    • [curEle].cloneNode(true)深克隆
  5. removeChild：删除某一个元素
  6. set/get/removeAttribute：设置/获取/删除 当前元素的某一个自定义属性