DOM基础知识点记录

dom参考手册

一、DOM简介

• DOM就是HTML页面的模型，将每个标签都作为一个对象。

• javascript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。

• 比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。

• javascript->Dom相当于C#->.Net Framwork。

• CSS+javascript+DOM=DHTML。

二、事件

2.1、直接写到标签中

例如：

2.2、有时事件响应的代码太多，就放到单独的函数中

例如：

注意：bodymousedown后的括号不能丢，表示调用bodymousedown函数。

2.3、动态设置事件

例如：

2.4、其他事件

• onload：网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现Javascript执行时需要操作某个元素，而这个元素还没有加载，如果这样就要把操作代码放到body的onload事件中，或者可以把javascript放到元素之后。元素的onload事件是元素自己加载完成时触发，body onload才是全部加载完成。

• onunload：网页关闭(或者离开)后触发。

• onbeforeunload：在网页准备关闭(或者离开)时触发。

用法：在事件中为window.event.returnValue赋值(要显示的警告消息)，这样窗口离开(比如前进、后退、关闭)就会弹出确认消息。
例如：

onbeforeunload

• 通用的HTML元素的事件：onclick(单击)、ondbclick(双击)、onkeydown(按键按下)、onkeypress(点击按键)、onkeyup(按键释放)、onmousedown(鼠标按下)、onmousemove(鼠标移动)、onmouseout(鼠标离开元素范围)、onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)等。

三、Window对象

window对象代表当前窗口，使用window对象的属性、方法的时候可以省略window。
例如：window.alert('a')可以省略成alert('a')。

3.1、confirm方法

显示“确定”、“取消”对话框，如果按了【确定】按钮，就返回true，否则返回【false】。

例如：

3.2、navigate方法

导航到指定的地址。

例如：

3.3、setInterval方法

• 每隔一段时间执行指定的代码。第一个参数为代码字符串，第二个参数为间隔时间(单位毫秒)，返回值为定时器的标识。

例如：setInterval("alert('hello')",5000)

• clearInterval取消setInterval的定时执行，相当于Timer中的Enabled=false。因为setInterval可以设定多个定时，所以clearInterval要指定清楚那个定时器的标识，即setInterval的返回值。

例如：

var intervalld= setInterval("alert('hello')",5000);
clearInterval(intervalld );

• Demo-跑马灯效果

跑马灯

3.4、location属性

重新导向新的地址，和navigate方法效果一样。window.location.reload刷新页面。
例如：window.location.href=http://www.cnblogs.com/liujf5566。

3.5、event属性

window.event是非常重要的属性，用来获得发生事件的消息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息，类似于winform中的e(EventAgr)。

3.6、 altKey属性

bool类型，表示发生事件时alt键是否被按下，类似的还有ctrlKey、shiftKey属性。
例如：

``  

3.7、坐标相关的属性

clientX、clientY发生事件时鼠标在客户区域的坐标；screenX、screenY发生事件时鼠标在屏幕上的坐标；offsetX、offsetY发生事件时鼠标相对于事件源(比如点击按钮时触发onclick)的坐标。

3.8、 returnValue属性

如果将returnValue设置为false，就会取消默认事件的处理。例如：在超链接的onclick里面禁止访问href的页面；在表单校验的时候禁止提交表单到服务器。

例如：

百度

3.9、screen属性

屏幕的信息

3.10、 clipboardData属性

对粘贴板的操作。
clearData("Text")清空粘贴板；getData("Text")读取粘贴板的值，返回值为粘贴板中的内容；setData("Text",val)设置粘贴板中的值。

例如：

注：当复制的时候body的oncopy方法被触发，直接return false就是禁止复制。
例如：。禁止粘贴也一样。很多元素也有oncopy、onpaste事件。

在网页中复制文章的时候，为防止那些拷贝党不添加文章来源，自动在复制的内容后添加版权声明。
例如：

注：不能直接在oncopy中执行对粘贴板的操作，因此设定定时器0.1秒后执行，这样就不再oncopy的执行调用栈上了。100ms只是一个经常取值，写1000、10、50、200...都行。

3.11、history属性

history操作历史记录。
window.history.back()后退；window.history.forward前进。也可以用window.history.go(-1)，window.history.go(1)。

例如：

后退

3.12、document属性

document是window对象的一个属性，因为使用window对象成员的时候可以省略window.，所以一般直接写document。

document的方法

• write：向文档中写入内容。writeln，和write差不多，只不过最后添加一个回车。

注： 在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起。

例如：

write经常在广告代码、整合资源代码中被使用。

• getElementById：根据元素的id获得对象，网页中id不能重复。
  也可以直接通过元素的id来引用元素，但是有有效范围之类的问题，因此不建议直接通过id操作元素，而是通过getElementById。

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

例如：

男
保密
女

• getElementsByTagName：获得指定标签名称的元素数组。
  比如getElementsByTagName("p")可以获得所有

  标签。

列如：

/*将所有input标签的元素赋值为"hello"*/
function btnClick(){
    var inputs=document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {           
        inputs[i].value="hello";
    };
}

四、Demo

4.1、改变被点击按钮的内容

改变按钮内容

4.2、注册表单倒数

注册表单倒数

协议内容！！！

4.3、加法计算器

加法计算器

+