DOM & 事件

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综合练习

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容