DOM技术

DOM技术知识思维导图，主要内容有：什么是DOM、DOM解析及其特点、HTML、浏览器对象、DOM事件案例。

DOM技术

• 什么是DOM
  • 文档对象模型 Document Object Model
  • 文档
    • 由标签和其属性组成的存放数据的文本内容
    • HTML,XML
  • 对象
    • 文档中一个标签就会对应一个元素对象
  • 模型
    • 根据文档的结构来产生对应的元素对象
  • 解析
    • 把文档内容以某种方式在内存中体现出来
  • w3c官方解析文档的方式DOM
    • 民间组织的解析方式SAX
• DOM解析及其特点
  • 优点
    • 可以对文档中任意元素进行增删改查
  • 缺点
    • 如果文档太大，那么相应占用内存的空间就很大，相应的加载速度就很慢
• HTML
  • 综合技术
    • HTML
      • 用标签来装数据(用标签来记录数据)
    • css
      • 给标签装的数据加上样式
    • javascript
      • 提供网页上的交互能力
    • dom
      • 提供对标签以及属性的解析
• 浏览器对象
  • Navigator
    • 浏览器对象
    • appName
    • appVersion
  • History
    • 浏览器访问历史对象
    • back()
      • 后退
    • forward()
      • 前进
    • go()
  • Location
    • 地址栏对象
    • protocol
      • 访问协议
    • href
      • 设置地址栏的URL地址
  • Window
    • setTimeout()
    • clearTimeout()
    • setInterval()
    • clearInterval()
    • moveBy
    • moveTo
    • resizeBy
    • resizeTo
    • open()
    • close()
• DOM事件
  • onclick
    • 鼠标点击事件
  • onfocus
    • 聚焦事件
  • onblur
    • 失焦事件
  • onchange
    • 表示元素发生变化
  • onload
    • 页面加载完成事件
  • onunload
    • 页面停止事件
  • onmouseover
    • 鼠标覆盖事件
  • onmouseout
    • 鼠标移开事件
  • onmousedown
    • 鼠标按下事件
  • onmouseup
    • 鼠标松开事件
• 案例
  • 网页时钟
  • 屏幕花了
  • 讨厌的广告