DOM基本原理

DOM( Document Object Model )文档对象模型， 是将浏览器对HTML文档的解析结果映射到 js运行环境中，使得可以通过操作js对象实现对HTML元素的结构、展现、事件，等功能的修改。

• js引入方式 （遵循HTML加载顺序）
  1. 内联script标签直接书写js代码
  2. 行内绑定事件属性
  3. 外联 .js文件(javascript资源)
• 通常执行过程
  1. 在文档中查找获取指定标签元素
  2. 修改元素属性或结构
  3. 浏览器渲染结果[ 即时响应 ]
• 可操作的范畴
  js可以完全重写HTML文档所有内部内容，因此可以操作几乎所有HTML行为和展现( 部分出于浏览器设置或安全性考虑的特性除外 )

常用DOM-api

• Document
  每个载入浏览器的 HTML 文档都会成为 Document 对象。
  Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
  1. 实例: cookie操作
• Element
  在 HTML DOM 中，Element 对象表示 HTML 元素。
  Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
  • 元素的查找方式 【 后代，父子，关联 】
    • 封装：兼容简单css选择器的dom元素选择器
  • 元素的修改【属性，样式，结构】
    1. 封装： 操作classList的兼容方法实现
    2. 封装： 操作样式表的兼容方法实现
    3. 封装： 元素的删除、前置添加、前置插入、后置插入等操作封装
  • 元素的复制和删除【事件关联】

• 显式元素可见属性和样式

  
  元素可见属性
• Event
  • 事件的冒泡与捕获
  • 事件代理

DOM综合练习

• 练习： 星级评分☆☆☆☆☆
• 练习： 模拟下拉框
• 作业1： windows计算器
• 作业2：基于定位的兼容性tooltip实现