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. 【Vue】浅谈Vue(一):从模板语法数据绑定、指令到计算属性

    写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者.社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓 ...

  2. Xp下麦克风设备及音量检测

    从Vista开始,windows底层的音频架构发生了改变:原本是底层API的waveXXX.mixerXXX等都在Core Audio APIs的基础上进行了重构,上升为了高层API:底层API变为C ...

  3. Python 并发编程(一)之线程

    常用用法 t.is_alive() Python中线程会在一个单独的系统级别线程中执行(比如一个POSIX线程或者一个Windows线程)这些线程将由操作系统来全权管理.线程一旦启动,将独立执行直到目 ...

  4. 知识树杂谈Java面试(4)

    一. Java集合 1.  集合分类:  Collection.Map. 2. Collection: 3. Map 4. 注意点 a. List 有序.可重复:Set 无序.不可重复:Map  键值 ...

  5. Java集合源码分析(二)Linkedlist

    前言 前面一篇我们分析了ArrayList的源码,这一篇分享的是LinkedList.我们都知道它的底层是由链表实现的,所以我们要明白什么是链表? 一.LinkedList简介 1.1.LinkedL ...

  6. LDAP服务部署

    1.安装基本环境 # yum -y install openldap openldap-devel openldap-servers openldap-clients 2.配置LDAP服务端 (1)拷 ...

  7. Vue源码后记-vFor列表渲染(3)

    这一节肯定能完! 经过DOM字符串的AST转化,再通过render变成vnode,最后就剩下patch到页面上了. render函数跑完应该是在这里: function mountComponent( ...

  8. angular1.x + ES6开发风格记录

    angular1.x和ES6开发风格 一.Module ES6有自己的模块机制,所以我们要通过使用ES6的模块机制来淡化ng的框架,使得各业务逻辑层的看不出框架的痕迹,具体的做法是: 把各功能模块的具 ...

  9. QT生成PDF文件

    QString temp=""; //m_File_Content_Text_Edit->selectAll(); QString t_File_Content = m_Fi ...

  10. Paint the Grid Reloaded(缩点,DFS+BFS)

    Leo has a grid with N rows and M columns. All cells are painted with either black or white initially ...