html5知识点:DOM编程
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编程的更多相关文章
- 读书笔记:JavaScript DOM 编程艺术(第二版)
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- JavaScript DOM 编程艺术(第2版)读书笔记(1)
JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...
- HTML5 知识点
HTML5 知识点 (1)语义化标记 <header>,<footer>,<nav>,<article>,<section> ...
- 《javascript dom编程艺术》笔记(一)——优雅降级、向后兼容、多个函数绑定onload函数
刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...
- Javascript DOM 编程艺术(第二版)读书笔记——基本语法
Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...
- JavaScript DOM 编程艺术
最近把JavaScript DOM 编程艺术这本书看完了,觉得这本书很好 深入浅出地展示了渐进增强.平稳退化.结构和样式分离等编程思想,我对书中重要的知识进行了梳理总结. 一.网页 二.JavaScr ...
- JavaScript DOM编程艺术(第2版)的简单总结
介绍 JavaScript DOM编程艺术(第2版)主要讲述了 JavaScript.DOM 和 HTML5 的基础知识,着重讲述了 DOM 编程,并通过几个实例演示了具有专业水准的网页开发. 下面介 ...
- 赠书:HTML5 Canvas 2d 编程必读的两本经典
赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...
- HTML5知识点总结
HTML5知识点总结(一) 一.HTML新增元素 1.IE9版本以下支持HTML5的方法 <!--[if lt IE9]> <script src="http://cdn. ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
随机推荐
- VUE实现请求数据
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 算法-找出与目标数字相同的digit组成的整数中比该数字大的数集中的最小数字
题目: 给出1个正整数,找到用与这个数字相同的digit组成的整数中比这个数字大的数集中的最小数字.比如:12352874 的结果是 12354278 分析: 这道题目的考虑目标是数组的查找与排序. ...
- WCF的客户端与服务端
服务端 : 1.新增一个Winform的服务端 2.选择以上建的项目,增加一个WCF服务 3.定义三个方法,一个不返回结果不带参数.返回结果带参数.返回结果以类的方式传递参数 4.Service1继承 ...
- migo的增强
migo的增强 所用BADI:MB_MIGO_BADI 具体见例子:(SE19) CIN_PLUG_IN_TO_MIGO JVA_CRP_MIGO_BADI JV_CRP_MIGO_BADI WB ...
- cf290-2015-2-3总结与反思(dfs判断无向图是否有环)
bool dfs(int i,int pre) { visit[i]=true; ;j<=v;j++) if(g[i][j]) { if(!visit[j]) return dfs(j,i); ...
- Linux: 查看软件安装路径
一. Which 命令 Shell 的which 命令可以找出相关命令是否已经在搜索路径中. 如: [root@localhost ~]# which gcc /usr/bin/gcc ...
- [译]ASP.NET Core 2.0 带初始参数的中间件
问题 如何在ASP.NET Core 2.0向中间件传入初始参数? 答案 在一个空项目中,创建一个POCO(Plain Old CLR Object)来保存中间件所需的参数: public class ...
- Python基础3切片,字符串的方法
切片:截取字符串某一段字符,并不改变原字符串.结构:[起始位置:终止位置:步长] 但不包括终止位置.所谓:顾头不顾尾 索引:序列中每个元素都是有编号的,都是从0开始编号的.使用负数索引时,Pytho ...
- C# 剪贴板中文乱码问题
最近写了个小工具.主要功能是生成一些数据,然后一键复制,最终粘贴到需要的地方. 本来一切正常的,可是当把工具拿给朋友使用时,却被告知粘贴出来的数据是乱码.当时第一时间想到是区域问题(朋友是台湾人),不 ...
- NIO FileChannel
NIO提供了比传统的文件访问更好的访问方法,NIO有两个优化的方法:一个是 FIleChannel.transferTo FileChannel.transferFrom,另一个是FileChanne ...