2015.02.28

什么是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来访问 。

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

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

关于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=" padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14.4444446563721px; line-height: 15.75pt;">单独修改样式的属性使用“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即可取消提交

时间: 2024-10-31 23:53:31

2015.02.28的相关文章

静态类2014年6月9日10:02:28

1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 6 namespace 静态类密闭类 7 { 8 class Program 9 { 10 static void Main(string[] args) 11 { 12 //A a = new A();//错误,静态类不能new 13 14 //Math m = new Math();//错误,静态类不能

【2015/01/28】QQ徽章墙通用破解补丁(理论支持目前所有版本)

[软件介绍:]软件名称:QQ徽章墙通用补丁软件版本:1.1软件语言:简体中文更新日期:2015.01.28软件制作:Mrack软件大小:9.33 KB (9,561 字节)CRC32:FBD44EADMD5:904349422A9D60F85489789A07C7A23D┏-----------------------------------------┓             QQ徽章墙全版本通杀         请在24小时内删除本补丁   如有私自传播造成纠纷,本人概不负责.------

iOS 学习笔记 六 (2015.03.28)常见错误

2015.03.28 1. property's synthesized getter follows Cocoa naming convention for returning 'owned' objects You own any object you create You create an object using a method whose name begins with “alloc”, “new”, “copy”, or “mutableCopy” (for example, 

Cheatsheet: 2015.02.01 ~ 02.28

Other API Best Practices: API Management Rewriting History with Git Rebase .NET Announcing Microsoft.IO.RecycableMemoryStream Web How I Decide which Web Front-End Framework to Use Web App Architecture - the Spring MVC - AngularJs stack Single page Ap

MVC,MVP 和 MVVM 的图示 引用地址(http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html)

分类: 开发者手册 MVC,MVP 和 MVVM 的图示 作者: 阮一峰 日期: 2015年2月 1日 复杂的软件必须有清晰合理的架构,否则无法开发和维护. MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用.它本身很容易理解,但是要讲清楚,它与衍生的 MVP 和 MVVM 架构的区别就不容易了. 昨天晚上,我读了<Scaling Isomorphic Javascript Code>,突然意识到,它们的区别非常简单.我用几段话,就可以说清. (题图:

2015.11.23 --- 2015.11.28 线性代数

这一周主要学习了一些内容,包括: 1)从感性认识上认识什么是线性代数,并且从思想上认识到线性代数是有用的. 2)简单的了解了矩阵的加,减,乘.这些都是一些人为规定的一些规则.掌握即可. 3)矩阵的逆,从基本的方法(余子式→代数余子式→伴随矩阵)和高斯方法来求解矩阵的逆. 4)讲了和矩阵相关的几个应用:包括线性方程组和向量的表达,并且从中,我们学习到了从不同的问题中抽象出问题的本质是一样的数学问题. 5)如果一个矩阵的逆是不存在或者是没有定义的,其原因是|A| = 0 . A的逆 = 1 / |A

湖南多校对抗赛(2015.03.28) E Longest Increasing Subsequence Again

题意:给你一个序列,问你删除掉连续的一段,使得剩下的序列的最长上升字串最大,问你这个最大值. 解题思路:分段dp,  dp[i][0] ,dp[i][1]   , 0表示前面没有切过,只能从前一个数的0状态得到,1状态表示前面已经切过了,能从前一个的1状态得到,也能从 在他前面的比他值小的dp[j][0](j < i && a[j] < a[i])的最大值得到,这里用线段树维护就行了. 解题代码: 1 // File Name: b.cpp 2 // Author: darkd

湖南多校对抗赛(2015.03.28) G Good subsequence

题意:找到一个序列中极值<=k的最长字串的长度. 解题思路:set容器双递推. 解题代码: 1 // File Name: g.cpp 2 // Author: darkdream 3 // Created Time: 2015年03月28日 星期六 12时04分39秒 4 5 #include<vector> 6 #include<list> 7 #include<map> 8 #include<set> 9 #include<deque>

湖南多校对抗赛(2015.03.28) A Rectangle

题意:给你一些最多宽为2 的木板,让你放在一个宽为二的盒子里面,问你这个盒子最短有多长. 解题思路:DP,离中间最近的那个值. 解题代码: 1 // File Name: a.cpp 2 // Author: darkdream 3 // Created Time: 2015年03月28日 星期六 12时13分56秒 4 5 #include<vector> 6 #include<list> 7 #include<map> 8 #include<set> 9