DOM是Document Object Model的缩写,中文名称是文档对象模型。

DOM是处理HTML页面的标准编程接口,DOM可被JavaScript用来读取、改变HTML的内容和结构。

前端三大件指HTML、CSS、JavaScript,其中JavaScript最重要的组成部分就是DOM。

一:我们为什么要学习DOM呢?

1,DOM可以让用户对网页元素进行交互操作

比如,当我点击了一个按钮,弹出一个对话框等操作。

2,DOM可以用来做网页游戏

比如,现在比较流行的魔兽世界这种游戏,我们完全可以拿JavaScript操作DOM来实现。

3,DOM是ajax的重要基础

比如,我们通过ajax获取了一些数据,你要显示给用户,这就需要用到DOM了。

二:我们是这么讲解DOM的

1,首先我们会讲解什么是DOM,就是之前说的文档对象模型

DOM是处理HTML的标准编程接口,DOM可被JavaScript用来读取、改变HTML的内容和结构。

2,会讲解什么是DOM树

对象与对象间的层次结构。

3,会讲解什么是DOM节点

根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

整个文档是一个文档节点

每个 HTML 元素是元素节点

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

注释是注释节点

4,会讲解什么是事件驱动

即做了什么操作,执行什么事件。

5,会讲解什么是2级DOM

1级DOM、2级DOM、3级DOM分别指什么?怎样实现。

6,会讲解什么是事件流

会讲解什么叫做事件冒泡,什么叫做事件捕获,根据事件流的特点能实现什么功能,及如何阻止事件的传播。

7,会讲解什么是Event

Event 对象的属性提供了有关事件的细节。

三:模拟画笔案例

在网页中,通过JavaScript操作DOM来模拟画笔功能,比如鼠标按下后,在屏幕中拖动,会形成痕迹,那么整个过程,就是在模拟画笔。

(全文完)

文章来源:千锋html5

html5知识点:DOM编程的更多相关文章

  1. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  2. JavaScript DOM 编程艺术(第2版)读书笔记(1)

    JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...

  3. HTML5 知识点

    HTML5 知识点   (1)语义化标记       <header>,<footer>,<nav>,<article>,<section> ...

  4. 《javascript dom编程艺术》笔记(一)——优雅降级、向后兼容、多个函数绑定onload函数

    刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...

  5. Javascript DOM 编程艺术(第二版)读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

  6. JavaScript DOM 编程艺术

    最近把JavaScript DOM 编程艺术这本书看完了,觉得这本书很好 深入浅出地展示了渐进增强.平稳退化.结构和样式分离等编程思想,我对书中重要的知识进行了梳理总结. 一.网页 二.JavaScr ...

  7. JavaScript DOM编程艺术(第2版)的简单总结

    介绍 JavaScript DOM编程艺术(第2版)主要讲述了 JavaScript.DOM 和 HTML5 的基础知识,着重讲述了 DOM 编程,并通过几个实例演示了具有专业水准的网页开发. 下面介 ...

  8. 赠书:HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  9. HTML5知识点总结

    HTML5知识点总结(一) 一.HTML新增元素 1.IE9版本以下支持HTML5的方法 <!--[if lt IE9]> <script src="http://cdn. ...

  10. 《高性能javascript》 领悟随笔之-------DOM编程篇(二)

    <高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

随机推荐

  1. MyBatis Generator配置示例

    (一).MBG介绍 MyBatis Generator(MBG)是一个Mybatis的代码生成器,它可以用来生成可以访问(多个)表的基础对象.MBG解决了对数据库操作有最大影响的一些简单的CRUD(插 ...

  2. Django扩展自定义manage命令

    使用django开发,对python manage.py ***命令模式肯定不会陌生.比较常用的有runserver,migrate... 本文讲述如何自定义扩展manage命令. 1.源码分析 ma ...

  3. hashlib模块--摘要算法

    算法介绍: Python的hashlib提供了常见的摘要算法:MD5,SHA()等. 摘要算法,又称哈希算法,散列算法.通过一个函数,吧任意长度的字符串转换为固定长度的字符串(16进制) 摘要算法就是 ...

  4. java字串加密

    字串加密 1.设计思想: (1)加密方法,字符串的每一个字符都代表这个字符往后的第三位,最后三个字符代表,开始的三个字符. (2)解密方法,字符串的每一个字符都代表这个字符往前的第三位,开始三个字符代 ...

  5. 异步任务--celery发送邮件

    安装两个python包: pip install celery==3.1.25 pip install django-celery==3.1.17 在配置文件settings.py中做如下配置: a) ...

  6. MongoDB固定集合(Capped Collections)

    MongoDB 固定集合(Capped Collections)是性能出色且有着固定大小的集合,对于大小固定,我们可以想象其就像一个环形队列,当集合空间用完后,再插入的元素就会覆盖最初始的头部的元素! ...

  7. LeetCode 461. Hamming Distance (汉明距离)

    The Hamming distance between two integers is the number of positions at which the corresponding bits ...

  8. 基于容器微服务的PaaS云平台设计(二)通过kubernetes实现微服务容器管理

    版权声明:本文为博主原创文章,欢迎转载,转载请注明作者.原文超链接 ,博主地址:http://www.cnblogs.com/SuperXJ/ 上一章描述了基于spring cloud的微服务实例(实 ...

  9. coursera无法观看视频解决方法

    coursera无法观看视频解决方法 Coursera是国外的一款非常有名的公开课网站,值得大家一起学习,奈何"长城"太厚,经常被和谐,一些视频打不开,最近找到不用FQ的方法,共享 ...

  10. poj 3484 Showstopper

    Showstopper Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2236   Accepted: 662 Descri ...