前端脑图

数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECM

DOM

• 获取元素
  • 获取ID document.getElementById()
  • 获取元素集合 document.getElementsByTagName()
  • 获取第一个元素 document.getquerySelector()
  • 获取元素下的集合 document.querySelectorAll()
  • 获取body元素 doucument.body
  • 获取HTML元素 document.documentElement
• 改元素
  • 仅变更内容 去除html标： 元素.innerText=‘ ’
  • 同步内容和HTML标签：元素.innerHTML=‘ ‘
  • 变更style属性：元素.style.样式（类似display）=’样式内容‘
  • 变更类名 元素.className=’‘
  • 变更自定义属性 setAttribute（'自定义属性名’，值）
  • 获取自定义属性 getAttribute（'自定义属性名')
  • 删除自定义属性 removeAttribute（’自定义属性名‘）
• 注册事件
  • 元素.操作type=function（）{}
    • 具有唯一性；后面事件会覆盖上个事件
  • 元素.addEventListener（type，函数，布尔值）
    • type是操作，ture是捕获 folse是冒泡
    • 函数可写 event 事件对象 仅能写在事件中调用；
  • event
    • event.target() 返回触发事件的对象 （click还是什么触发的）
    • event.stopPropagetion() 阻止冒泡
    • event.preventDefault() 阻止事件（a标签的跳转等）
• 获取节点
  • 父级元素.children 获取子元素节点
    • children 只反元素节点 不反其他类型节点（每次换行会有text类型节点）
  • 元素.parentNode 获取父级节点
• 创建节点
  • 变量名=document。createElement（'元素'）
• 增节点
  • 父级元素。appendChild（创建的节点变量名）
    • 父级最后增加
  • 父级元素。insertBefore（创建的节点变量名）
    • 父级最前面增加
• 删节点
  • 删子节点 父级。removeChild（child[0]）