浅析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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
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
综合图片计数器
2006/10/09 PHP
FCKeditor添加自定义按钮
2008/03/27 PHP
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
浅析Python函数式编程
2018/10/06 Python
wxPython实现文本框基础组件
2019/11/18 Python
python常用运维脚本实例小结
2020/02/14 Python
Django实现简单的分页功能
2021/02/22 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
C语言编程题
2015/03/09 面试题
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
介绍一下Make? 为什么使用make
2016/07/31 面试题
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
市场专员岗位职责
2014/02/14 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
MySQL kill不掉线程的原因
2021/05/07 MySQL