浅析javascript中的DOM


Posted in Javascript onMarch 01, 2015

什么是Dom?

1.简介

        文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,计有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

        DOM(文档对象模型)是HTML和XML的应用程序接口(API)。DOM将把整个页面规划成由节点层级构成的文档。

        所谓文档对象模型,其实就是对网页HTML中的各种元素的一种内部的表示,例如HTML中的头、段落、列表、风格、ID等,所有的元素都能通过DOM来访问 。

        JavaScript最终是要操作Html页面,让Html变成DHtml,而操作Html页面就要用到DOM。DOM就是把Html页面模拟成一个对象,如果JavaScript只是执行一些计算、循环等操作,而不能操作Html也就失去了它存在的意义。

        DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象,就可以读取文本框中的值、设置文本框中的值。

2.图解

浅析javascript中的DOM

关于window整个页面或者说窗口就是一个window对象---------------window是顶级对象

页面中定义的变量和方法都是window的

window.id

document.getElementById()

使用window对象的属性、方法的时候可以省略window。

比如:

window.alert(‘hello');

可以省略成alert(‘hello');

window.document可以直接写document

能不写window就不要写,这样可以减少js文件的字节数。

window.alert(‘大家好!');//弹出警告对话框

window.confirm(‘确定要删除吗?');//确定、取消对话框,返回true或false;

window.navigate(url);//将网页重新导航到url,支持IE、Opera11.6。并不推荐,有些浏览器不行,

建议使用window.location.href=‘url';//支持大多数浏览器

动态操作DOM元素

1.获取DOM

getElementById(), (非常常用),根据元素的Id获得对象,网页中id不能重复。也可以直接通过元素的id来引用元素,但是有有效范围、

getElementsByName(),根据元素的name获得对象,由于页面中元素的name可以重复,比如多个RadioButton的name一样,因此getElementsByName返回值是对象数组。

getElementsByTagName(),获得指定标签名称的元素数组,比如getElementsByTagName(“input”)可以获得所有的<input>标签。*表示所有标签

2.添加、移除、替换

document.write只能在页面加载过程中才能动态创建。

可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素下。//父元素对象.removeChild(子元素对象);删除元素。

createElement(‘element');创建一个节点

appendChild(node); 追加一个节点

removeChild(node);移除一个节点

replaceChild(new,old);替换一个节点

insertBefore(new,参照);把节点加到前面(插到某个节点前面)

方法:

属性:

firstChild

lastChild

3.用innerHTML还是createElement()、appendChild()与removeChild()?

操作页面的元素的时候是用innerHTML的方式还是createElement()、appendChild()与removeChild()的方式?

1.对于大量进行节点操作时,使用innerHTML的方式性能要好于频繁的Dom操作(有专门用C或C++写的html解析器。)。先将页面的HTML代码写好,然后调用一次innerHTML,而不要反复调用innerHTML.

2.对于使用innerHTML=‘'的方式来删除节点,在某些情况下会存在内存问题。比如:div下面有很多其他元素,每个元素都绑定有事件处理程序。此时,innerHTML只是把当前元素从节点树上移除了,但是那些事件处理程序依然占用内存。

js操作样式

修改元素的样式是className属性。

(class是JavaScript的一个保留字,属性不能用关键字、保留字所以就变成className了)网页开关灯的效果。

修改元素的样式不能this.style="background-color:Red"。

单独修改样式的属性使用“style.属性名”。注意在css中属性名在JavaScript中操作的时候属性名可能不一样,主要集中在那些属性名中含有-的属性,因为JavaScript中-是不能做属性、类名的。

操作float样式的时候

IE:obj.style.styleFloat=‘right';

其他浏览器:obj.style.cssFloat=‘right';

Form对象

常用:click(),focus(),blur();//相当于通过程序来触发元素的单击、获得焦点以及失去焦点的事件。

form对象是表单的Dom对象。

方法:submit()提交表单,但是不会触发onsubmit事件。

实现autopost,也就是焦点离开控件以后页面立即提交,而不是只有提交submit按钮以后才提交,当光标离开的时候触发onblur事件,在onblur中调用form的submit方法。

在点击submit后form的onsubmit事件被触发,在onsubmit中可以进行数据校验,如果数据有问题,返回false即可取消提交

以上所述就是个人对于javascript的DOM的理解了,希望大家能够喜欢。

Javascript 相关文章推荐
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
js实现的折叠导航示例
Nov 29 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
vue使用openlayers实现移动点动画
Sep 24 Javascript
javascript中的正则表达式使用指南
Mar 01 #Javascript
JQuery中使文本框获得焦点的方法实例分析
Feb 28 #Javascript
jQuery实现折线图的方法
Feb 28 #Javascript
js中split和replace的用法实例
Feb 28 #Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 #Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 #Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 #Javascript
You might like
一个ubbcode的函数,速度很快.
2006/10/09 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
JS 判断undefined的实现代码
2009/11/26 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
js确定对象类型方法
2012/03/30 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
Vue的Class与Style绑定的方法
2017/09/01 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
vue实现购物车小案例
2019/09/27 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
python标准算法实现数组全排列的方法
2015/03/17 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
python怎么自定义捕获错误
2020/06/29 Python
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
如何写出好的Java代码
2014/04/25 面试题
法学专业个人求职信
2013/09/26 职场文书
环境工程毕业生自荐信
2013/11/17 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
小班上学期个人总结
2015/02/12 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
世界十大狙击步枪排行榜
2022/03/20 杂记