Dom 学习总结以及实例的使用介绍_Javascript教程-查字典教程网

Dom 学习总结以及实例的使用介绍

摘要：1、重新导航到指定的地址：navigate("http://www.jb51.net");2、（1、*setInterval每隔一段时间执行...

1、重新导航到指定的地址：navigate("http://www.jb51.net");

2、

（1、*setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识。如：

setInterval("alert('hello')",5000);

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

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

clearInterval(intervalld);

（2、setTimeout也是定时执行，但是不像setInterval那样是定时执行，而是设定时间后只执行一次，clearTimeout也是清除定时。

很好区分：Interval是定时；Timeout是超时之意。

var timeoutld=setTimeout("alert('hello')",2000);

（3、案例：实现标题栏走马灯的效果，也就是浏览器的标题文字每隔500ms向右滚动一下

复制代码代码如下:

跑马灯效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>欢迎来到daomul的博客，欢迎再来，谢谢</title>

function scroll() {

var title = document.title;

var first = title.charAt(0);

var last = title.substring(1, title.length);

document.title = last+first;

}

setInterval("scroll()",500);

</script>

</head>

<body>

</body>

</html>

3、

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

（2、onunload：网页关闭（或者离开）后触发。onbeforeunload：窗口离开（比如前进、后退、关闭之前）就会弹出确认消息。如： <body onbeforeunload="Window.event.returnValue='真的要放弃发贴退出吗？'">

4、

除了有特有的属性之外，当然还有通用的HTML元素的事件：onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeyup(按键释放)、onkeypress(点击按键)、onmousedown(鼠标按下)、onmousemove(鼠标移动)、onmouseout(鼠标离开元素范围)、

onmouseover(鼠标移动到元素范围)、onmouseup(鼠标按键释放)等。

5、window对象的属性

（1、window.location.href="http://www.sina.com.cn",重新导向新的地址，和navigate方法效果一样。window.location.reload()刷新页面。

（2、window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。

a、altKey属性，boot类型，表示发生事件时alt键是否被按下，类似的还有ctrlKey、shiftKey属性

复制代码代码如下:

windows事件样例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<input type="button" value="点击" /><a

href="http://www.baidu.com"></a>

</form>

</body>

</html>

b、 clientX、clientY 发生事件时鼠标在客户区（浏览器界页面内）的坐标；screenX、screenY发生事件时鼠标在屏幕上的坐标；offsetX、offsetY发生事件时鼠标相对于事件源（按钮button内）的坐标。

c、returnValue属性，如果将returnValue设置为false，就会取消默认事件的处理。

d、srcElement:获得事件源对象

e、KeyCode：发生时间时的按键值

f、button：发生时间时鼠标的按键，1为左键，2为右键，3为左右键同时按。

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

（1、当复制的时候body的oncopy方法被触发，直接return false就是禁止复制。<body oncopy="alert('禁止复制！');return false;">

（2、很多元素也有oncopy、onpaste事件。

例子1：禁止复制

例子2：给粘贴板赋值：复制地址给好友

例子3：禁止粘贴到文本框

请输入您的手机号码：<input type="text" />

请您再次输入手机号码：<input type="text" onpaste="alert('为保证您充值到正确的手机号，请勿粘贴手机号，请直接填！');return false;"/>:

例子4：复制时附带内容

function modifyClipboard(){

clipboardData.setData('Text',clipboardData.getData('Text')+'本文来自博客园技术专区，转载请注明来源。'+location.href);

}

oncopy="setTimeout('modifyClipboard()',100)"。

用户复制动作发生0.1秒以后再去修改粘贴板中的内容。100ms只是一个经常取值，写1000、10、50、20……都行。不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒以后执行，这样就不再oncopy的执行调用栈上了。

7、页面前进、后退：history操作历史记录

window.history.back()后退；

window.history.forward()前进。也可以用window.history.go(-1)表前进；window.history.go(1)表后退。

实例1：

</body>

8、document属性（最复杂的属性）document是window对象的一个属性，因为使用window对象成员的时候可以省略window,所以一般直接写document。

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

（2、<input type="button" value="点击" />

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

（4、<script type="text/javascript">

document.write("<font color=red>您好</font>");

</script>

案例1：

复制代码代码如下:

getElementById

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>getElementById</title>

//不建议直接通过id操作元素，而是通过getElementById根据元素的Id获得对象

function btnClick() {

//alert(textbox1.value);

var txt = document.getElementById("textbox1");

alert(txt.value);

}

function btnClick2() {

//alert(form1.textbox2.value);//要显示表单里的信息需添加表单名称

var txt = document.getElementById("textbox2");

alert(txt.value);

}

</script>

</head>

<body>

</form>

</body>

</html>

案例2：

复制代码代码如下:

getElementByName

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>getElementByName的例子</title>

function btnClick() {

var radios = document.getElementsByName("gender");

/*//在JS中for(var r in radios)不像C#中的foreach,并不会遍历每个元素,而是遍历的key

for (var r in radios) {

alert(r.value);

}*/

for (var i = 0; i < radios.length; i++) {

var radio = radios[i];

alert(radio.value);

}

function btnClick2() {

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {

var input = inputs(i);

input.value = "welcome to my room";

}

</script>

</head>

<body>

<input type="radio" name="gender" value="男" />男

<input type="radio" name="gender" value="女" />女

<input type="radio" name="gender" value="保密" />保密

<br />

</body>

</html>

案例3：

复制代码代码如下:

getElementByTagName

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>getElementByTagName</title>

function initEvent() {

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {

var input = inputs[i];

input.onclick = btnClick;

}

function btnClick() {

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {

var input = inputs[i];

//window.event.srcElement//取得引发事件的控件

if (input == window.event.srcElement) {

input.value = "哈哈"; //以下五个按钮，点到的那个就变为“哈哈”，其余都为“呜呜”，点“呜呜”就变为“哈哈”

}

else {

input.value = "呜呜";

}

</script>

</head>

</body>

</html>

案例4：

复制代码代码如下:

阅读协议等待计时器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>欢迎来到daomul的博客，欢迎再来，谢谢</title>

var leftTime = 10;

var TimeID;

function scroll() {//alert(222);

var btn = document.getElementById("btnAgree");

//如果网页速度非常慢的话，可能定时器运行的时候控件还没有加载！

if (btn) {//alert(11);

if (leftTime <= 0) {

btn.value = "同意";

btn.disabled = "";

clearInterval(TimeID);

}

else {

btn.value = "请阅读协议，同意（还剩下"+leftTime+"秒）";

leftTime--;

}

TimeID=setInterval("scroll()", 1000);

</script>

</head>

<body>

</body>

</html>

案例5：

复制代码代码如下:

美女时钟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>欢迎来到daomul的博客，欢迎再来，谢谢</title>

//var now = new Date();不能放在这，否则取得时间不变

function Fill2Len(i) {

if (i < 10) {

return "0" + i;

}

else {

return i;

}

function Refresh() {

var imgMM = document.getElementById("imgMM");

if (!imgMM) {

return; //没加载就直接return

}

var now = new Date(); //每次刷新时取得时间

var filename = Fill2Len(now.getHours()) + "_" + Fill2Len(now.getSeconds()) + ".jpg";

imgMM.src = "MMClock/" + filename;

}

setInterval("Refresh()", 1000);

</script>

</head>

</body>

</html>

案例6：搜索框关键字搜索

复制代码代码如下:

搜索框关键字搜索

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>欢迎来到daomul的博客，欢迎再来，谢谢(文本框关键字3)</title>

function inputBlur(keyword) {

if (keyword.value.length <= 0) {

keyword.value = "请输入搜索关键词";

keyword.style.color = 'Gray';

}

function inputFocus(keyword) {

//var keyword = document.getElementById("keyword");把this传给两个方法，省去了getElementById依赖id

if (keyword.value == "请输入搜索关键词") {

keyword.value = "";

keyword.style.color = 'Black';

}

</script>

</head>

</body>

</html>

16、Form表单： Form 对象是表单的 Dom 对象。

方法： submit() 提交表单，但是不会触发 onsubmit 事件。实现 autopost ，也就是焦点离开控件以后页面立即提交，而不是只有提交 submit 按钮以后才提交，当光标离开的时候触发 onblur 事件，在 onblur 中调用 form 的 submit 方法。在点击 submit 后 form 的 onsubmit 事件被触发，在 onsubmit 中可以进行数据校验，数据有问题，返回 false 即可取消提交。

案例1：

复制代码代码如下:

Form表单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>欢迎来到daomul的博客，欢迎再来，谢谢(Form表单提交4)</title>

</script>

</head>

</select>

</form>

</body>

</html>

17、正则表达式

*JavaScript 中创建正则表达式类的方法：

var regex = new RegExp("d{5}") 或者 var regex = /d{5}/

/ 表达式 / 是 JavaScript 中专门为简化正则表达式编写而提供的语法，

写在 // 中的正则表达式就不用管转义符了。

*RegExp 对象的方法：

** test(str) 判断字符串 str 是否匹配正则表达式，相当于 IsMatch

var regex = /.+@.+/;

alert(regex.test("a@b.com"));

alert(regex.test("ab.com"));

** exec(str) 进行搜索匹配，返回值为匹配结果 ( * )

** compile 编译表达式，提高运行速度。 ( * )

*String 对象中提供了一些与正则表达式相关的方法，相当于对于

RegExp 类的包装，简化调用：

match(regexp) ,相当于调用 exec

var s = "aaa@163.com";

var regex = /(.+)@(.+)/;

var match = s.match(regex);

alert(RegExp.$1 + " ，服务器： " + RegExp.$2);

案例1：

复制代码代码如下:

正则表达式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>欢迎来到daomul的博客，欢迎再来，谢谢</title>

var s = "4444@163.com";

var regex = /(.+)@(.+)/;

s.match(regex);

alert(RegExp.$1); //取得第一组即@前面的部分

alert(RegExp.$2); //取得@后面的部分

</script>

</head>

<body>

</body>

</html>

18、不同浏览器的差异

<!--

（1、appendChild，insertCell，px

（2、获取网页中哪个元素触发事件

IE中使用srcElement

FireFox使用target

（3、使用Dom获取标签文本

IE中使用innerText

FireFox使用textContent

（4、动态网页绑定

Id:attachEvent

FireFox:addEventListener

（5、不同浏览器css样式支持不同：

哀悼网页使用的css只有IE才支持，FF不支持

（6、JQuery进行封装：可在不同浏览器中进行封装

解决不同浏览器中Dom的不同-->

19、键盘码操作以及金融框案例:

案例1：

财务相关系统中涉及到金额的文本框有如下要求：

*进入金额文本文本框不使用中文输入法不能输入非数字焦点在文本框中时文本框左对齐；焦点离开文本框时文本框右对齐，显示千分位禁用输入法：

*禁止键入非法值，只有这些才能被键入 (k == 9) || (k == 13) ||

(k==46)||(k==8)||(k==189)||(k==109)||(k==190)||(k==110)|| (k>=48 &&

k<=57)||(k>=96 && k<=105)||(k>=37 && k<=40) 。 onkeydown="return

numonKeyDown()" 不要写成 onkeydown="numonKeyDown()" 区分事件响应函数和事件响应函数调用的函数。

* 禁止粘贴 ( 伟大的 Tester) ， <input onpaste="return false;" ，太暴力，应该只是禁止粘贴非法值。在 onpaste 中通过 clipboardData.getData('Text')

取到粘贴板中的值，然后遍历每个字符，看是否是合法的值，如果全部是合法值才允许粘贴，只要有一个非法值就禁止粘贴。 charAt 、 charCodeAt添加千分位的方法

* 焦点在的时候左对齐没有千分位，焦点不在时右对齐千分位：this.style.textAlign='right'

复制代码代码如下:

金融文本框设置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>欢迎来到daomul的博客，欢迎再来，谢谢</title>

//非数字

function numonKeyDown() {

var k = window.event.keyCode;

return isValidNum(k);

}

//判断k是否为合法的Ascii

function isValidNum(k) {

return ((k == 9) || (k == 13) || (k == 46) || (k == 8) || (k == 189) || (k == 109) || (k == 190) || (k == 110) || (k >= 48 && k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40));

}

//添加千分位

function commafy(n) {

//var re = /d{1,3}(?=(d{3})+$)/g;

//var n1 = n.replace(/^(d+)/((.d+)?)$/,function(s,s1,s2){return s1.replace(re,"$,")+s2;});

re = /(d{1,3})(?=(d{3})+(?:$|D))/g;

n1 = n.replace(re, "$1,")

return n1;

}

//处理粘贴板数据

function numPaste() {

var text = window.clipboardData.getData("Text");

for (var i = 0; i < text.length; i++) {

var asc = text.charCodeAt(i); //charAt→"3",charCodeAt()取到的是ASCII码

if (!isValidNum(asc)) { //遇到一个非法值就认为要粘贴的内容是非法的return false

return false;

}

</script>

</head>

不能输入非数字:

<br />

禁用输入法:

<br />

不能输入和粘贴非数字:

<br />

添加去掉千分位:

<input id="t" type="text" value="95654784.75"

onblur="this.value=commafy(this.value);this.style.textAlign='right';"

onfocus="this.style.textAlign='left';this.value=this.value.replace(/,/g,'')" />

<br />

</body>

</html>

复制代码代码如下:

省市选择

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>欢迎来到daomul的博客，欢迎再来，谢谢（省市选择）</title>

var data = { "山东": ["济南", "青岛", "潍坊"], "河南": ["郑州", "洛阳", "三门峡"], "辽宁": ["沈阳", "鞍山", "大连"] };

function loadProv() {

var prov = document.getElementById("prov");

for (var key in data) {

var option = document.createElement("option");

option.value = key;

option.innerText = key;

prov.appendChild(option);

}

function provChange() {

var prov = document.getElementById("prov");

var city = document.getElementById("city");

/* 先清除旧的市列表

可以采取这种方式city.option.length=0;

遍历select的所有子节点，如果从前往后删，每次都会有漏网之鱼，因为有重新排号的问题

从后向前删就没顺序问题了 */

for (var i = city.childNodes.length - 1; i >= 0; i--) {

var option = city.childNodes[i];

city.removeChild(option);

}

var provName = prov.value;

var cities = data[provName]; //取出的内容["济南", "青岛", "潍坊"]

for (var i = 0; i < cities.length; i++) {

var option = document.createElement("option");

option.value = cities[i];

option.innerText = cities[i];

city.appendChild(option);

}

</script>

</head>

</select>

</select>

</body>

</html>

案例3：复选框实现全选、全不选、反选

复制代码代码如下:

复选框选择

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>欢迎来到daomul的博客，欢迎再来，谢谢（歌曲选择）</title>

function selAll() {

var div1 = document.getElementById("playlist");

var input1 = div1.getElementsByTagName("input");

for (var i = 0; i < input1.length; i++) {

if (input1[i].type == "checkbox") {

input1[i].checked = "checked";

}

function deSelAll() {

var div1 = document.getElementById("playlist");

var input1 = div1.getElementsByTagName("input");

for (var i = 0; i < input1.length; i++) {

if (input1[i].type == "checkbox") {

input1[i].checked = "";

}

function reverseSel() {

var div1 = document.getElementById("playlist");

var input1 = div1.getElementsByTagName("input");

for (var i = 0; i < input1.length; i++) {

if (input1[i].type == "checkbox") {

if (input1[i].checked == true) {

input1[i].checked = false;

}

else{

input1[i].checked = true;

}

</script>

</head>

<body>

<input type="checkbox" id="p1" /><label for="p1">leaving into the dog</label><br />

<input type="checkbox" id="p2" /><label for="p1">take a shower</label><br />

<input type="checkbox" id="p3" /><label for="p1">fire heart</label><br />

<input type="checkbox" id="p4" /><label for="p1">china</label><br />

<p>

</p>

</div>

</body>

</html>

案例4：权限选择

复制代码代码如下:

权限选择

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>欢迎来到daomul的博客，欢迎再来，谢谢（权限选择）</title>

function moveSelected(selectedSrc, selectedLast) {

for (var i = selectedSrc.childNodes.length - 1; i >= 0; i--) {

var newOption = selectedSrc.childNodes[i];

if (newOption.selected == true) {

selectedSrc.removeChild(newOption);

newOption.selected = false;

selectedLast.appendChild(newOption);

}

function moveAll(selectedSrc, selectedLast) {

for (var i = selectedSrc.childNodes.length - 1; i >= 0; i--) {

var newOption = selectedSrc.childNodes[i];

selectedSrc.removeChild(newOption);

selectedLast.appendChild(newOption);

}

</script>

</head>

<body>

</select>

<div>

</div>

</body>

</html>

【Dom 学习总结以及实例的使用介绍】相关文章：

★ nodejs怎么简单实现中英文翻译

★ JavaScript中反正弦函数Math.asin()的使用简介

★ JavaScript中Number.MIN_VALUE属性的使用示例

★ Java数据类型以及变量的定义

★ JavaScript中的italics()方法的使用介绍

★ jQuery常用知识点总结以及平时封装常用函数

★ JavaScript中的fontsize()方法使用介绍

★ 详解JavaScript中void语句的使用

★ JavaScript中valueOf()方法的使用介绍

★ JS对字符串编码的几种方式使用

上一篇： jQuery 关于伪类选择符的使用说明

下一篇：为JS扩展Array.prototype.indexOf引发的问题探讨及解决

学习工具