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则承载着整 ...
随机推荐
- Yarn一点小认识
正文 打开官网http://hadoop.apache.org/docs/r2.6.5/hadoop-yarn/hadoop-yarn-site/YARN.html,将图片拿过来. 我用的是2.6.5 ...
- Microsoft Offce 使用纪事:oneNote笔记本分区删除
OneNote 笔记本和分区删除 OneNote 目前无法在客户端和本地删除已有的笔记本和分区,只能通过OneDrive才能够从云端删除: step1 step2 step3 后记 由于需要登录One ...
- ArcGis for flex查询FeatureLayer数据
1. 首先实例化一个FeatureLayer对象 private var featureLayer:FeatureLayer=new FeatureLayer(); 2.指定FeatureLayer对 ...
- win10 输入法禁用IME
发现了win10 没法输入,因为禁用IME 右击开始 计算机管理 任务计划程序 打开到Microsoft/Windows/TextServicesFramework 选择操作运行 选择如果任务失 ...
- C++每次读取一行字符串输入(学习笔记) (转)
1. 面向行的输入:getline()getline()函数读取整行,它使用通过回车键输入的换行符来确定输入结尾. cin.getline(Arr, 20) // Arr为用来输入行的数组的名称: ...
- HTTP 错误 500.19 Internal Server Error的解决方法
第一种可能,能解决一部分问题 http://wenku.baidu.com/view/c5cb4a08bb68a98271fefa3f.html 第二种可能,解决另外一部分问题 经过检查发现是由于先安 ...
- C#设计模式之九装饰模式(Decorator)【结构型】
一.引言 今天我们要讲[结构型]设计模式的第三个模式,该模式是[装饰模式].我第一次看到这个名称想到的是另外一个词语“装修”,我就说说我对“装修”的理解吧,大家一定要看清楚,是“装修”,不是“装饰”. ...
- ps之雪碧图制作
图片拖入后 一般取同行同列最高最宽 自动在所选目录生成 打开: 修改 四次请求有点多啊. 打开 css sprite 自动生成坐标地址. 不过我们要把它排远一点 OK了. 我们生成以后: 坐标地址就可 ...
- 一次从0到1的java项目实践清单
虽说工作就是简单的事情重复做,但不是所有简单的事你都能有机会做的. 我们平日工作里,大部分时候都是在做修修补补的工作,而这也是非常重要的.做好修补工作,做好优化工作,足够让你升职加薪! 但是如果有机会 ...
- Eclipse+Spring+SpringMVC+Maven+Mybatis+MySQL+Tomcat项目搭建
---恢复内容开始--- 1. 建表语句及插入数据 CREATE TABLE `book_user` ( user_id INT(11) NOT NULL AUTO_INCREMENT, user_n ...