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则承载着整 ...
随机推荐
- MVC中@RenderBody、@RenderSection、@RenderPage、@Html.RenderPartial、Html.RenderAction的作用和区别
1.@RenderBody() 作用和母版页中的服务器控件类似,当创建基于此布局页面的视图时,视图的内容会和布局页面合并,而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在标签 ...
- sqlserver游标使用和循环
/*** 游标的使用 讲了这个多游标的优点,现在我们就亲自来揭开游标的神秘的面纱. 使用游标的顺序: 声名游标.打开游标.读取数据.关闭游标.删除游标. 1.3.1声明游标 最简单游标声明:DECLA ...
- python codis集群客户端(一) - 基于客户端daemon探活与服务列表维护
在使用codis时候,我们遇到的场景是,公司提供了HA的Proxy(例如N个),但是不暴露zookeeper(也就是说没有codis后端服务列表). 如果暴露zk的话,可以看这一篇,http://ww ...
- 【学习】苹果iPhone safari浏览器样式重置修复按钮圆角bug
iPhone safari浏览器中,input按钮会按苹果的默认UI来渲染,例如,写的按钮明明是这个样的: 但是实际就会是这个样子: 怎么办呢? 为按钮添加:-webkit-appearance: n ...
- Mysql数据库导出数据字典文档Word或者HTML的3个工具
最近需要将Mysql的数据库导出一份Word的文档出来,本文记录调研后几个可用的工具和方法: 阿里云DMS工具导出 适用于存储在阿里云RDS服务中的Mysql数据库 导出格式支持:Word.Excel ...
- js 中 new fn与new fn()的区别
在有些代码中,看见了let fn = new Fn()和let fn = new Fn,刚开始有些人或许和我一样感到些许疑惑,但潜意识的也会想到,这两者说不定就是一样的.没错!!在没有参数的情况下这两 ...
- Cosmos OpenSSD--greedy_ftl1.2.0(二)
FTL的整个流程如下: 下面先来看写的流程: 写的代码如下: if((hostCmd.reqInfo.Cmd == IDE_COMMAND_WRITE_DMA) || (hostCmd.reqInfo ...
- Python 的装饰器
Python 在语言级别提供了装饰器模式的实现,代码中Python内置的 functools.wraps 会完成包括函数名属性处理替换 #!/usr/bin/env python3 #--coding ...
- VirtualBox虚拟磁盘文件.vdi从C盘转移到D盘
起因很简单:C盘快爆满了,用PS修个图的都无法保存.用Everything搜索了下C盘,发现有个WIN7的.vdi文件,竟然占据了15G的宝贵C盘空间!记得有一次,我直接把.vdi文件转移,然后在Vi ...
- Java基础总结--多线程总结2
----多线程通信-----1.概述:多个线程处理同一个资源,但是各自的任务不相同eg:线程1负责存储数据,线程2负责处理该数据.数据--就是同一个资源怎样用java语言描述上面的例子:* 资源是变化 ...