【黑马程序员】DOM基础知识

最新推荐文章于 2023-01-14 13:47:33 发布

Suyueying

最新推荐文章于 2023-01-14 13:47:33 发布

阅读量636

点赞数

本文链接：https://blog.csdn.net/Suyueying/article/details/8627359

版权

---------------------- Windows Phone 7手机开发、 .Net培训、期待与您交流！ ----------------------

一、DOM入门

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

Javascript->Dom 就是C#->.NetFramwork

Dom也像winform一样，通过事件、属性、方法进行编程

CSS+javascript+DOM=DHTML

二、事件

1、事件：<bodyοnmοusedοwn=”alert(‘haha’)”>当点击鼠标的时候执行onmousedown中的代码，有时事件响应的代码太多就放到单独的函数中：

functionbodymousedown(){
alert (“网页电话了”);

alert(“逗你玩的哦”);}

</script>

bodymousedown()后的括号不能丢因为表示调用bodymousedown函数而不是onmousedown事件的响应函数是bodymousedown

2、动态设置事件

function fi(){

alert(“1”);}

furction f2(){

alert(“2”);}

三、window对象

1. window对象代表当前浏览器的窗口，使用window对象的属性、方法的时候可以省略window。

alert 方法,弹出消息框

confirm方法，显示“确定”、“取消”对话框，如果按了确定就返回true否则就false

if(confirm(“是否继续”)){

alert(“确定”);

}

Else{

Alert(“取消”);

}

重新导航到指定的地址：navigate(http://www.rupeng.com);

setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个残参数为间隔时间，返回值为定时器的标识

setInerval(“alert(‘hello’)”,5000);

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

varintervalId=setInterval(“alert(‘hello’)”,5000);

clearInterval(intervalId);

<!DOCTYPEhtmlPUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<scripttype="text/javascript">

functionconfirmdemo() {

if(confirm("是否进入？")) {

alert("进入");

}

else{

alert("取消进入¨?");

}

varintelvalId;

functionstartInterval() {

intelvalId=setInterval("alert('hello')", 1000); }

</script>

</head>

<body>

<inputtype="button" value="confirmtest" onclick="confirmdemo()" />

<inputtype="button" value="nav测a试º?"onclick="navigate('HTMLPageDom1.htm')"/>

<inputtype="button" value="setinterval测a试º?"onclick="startInterval()"/>

<inputtype="button" value="停ª¡ê止1setinterval"onclick="clearInterval(intelvalId)"/>

</body>

</html>

setTime也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一次，clearTimeout也是清除定时，很好区别：Interval：间隔；timeout：超时 vartimeout=setTimeout(“alert(‘hello’)”,2000);

四、DOM事件

1、 body、document对象的事件

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

onunload：网页关闭或者离开后触发

onbeforeunload:在网页准备关闭或者离开后触发，在事件中为”window.event.returnValue赋值（要显示的警告消息），这样窗口离开就会弹出确认消息 <body οnbefοreunlοad=”window.event.returnValue=”真的要放弃发帖退出吗？”/>

2. 其他事件：

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

五、DOM属性

1、 window对象的属性

wondow.location.href=http://www.baidu.com,重新导向新的地址，和navigate方法效果一样，window.location.reload()刷新页面

window.event属性，用来获得发生事件的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取得相关信息

altkey属性，bool类型，表示发生事件的alt属性是否被按下，类似的还有ctlkey,shiftkey属性

<input type=”button”value=”点击” onlick=”if(event.altkey){alert(“Alt点击了”)} else{alert(“普通点击”)}/>;

clientX、clientY发生事件时鼠标在客户区的坐标；screenX、screenY发生事件时

鼠标在屏幕上的坐标；offSetX、offSetY发生事件时鼠标相对于事件源

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

在超链接的onclick里面禁止访问href的页面，在表单校验时禁止提交表单到服务器。

srcElement获得事件源对象

keyCode，发生时间是的按键值

button，发生时间时鼠标按键，1为左键2为右键3为左右键同时按下

Screen对象，屏幕的消息

Alert（”分辨率:”+screen. width+”*”+screen.height）

If(screen.width<1024||sreen.height<768){

Alert(“分辨率太低”);

}

clipboardData对象，对粘贴板的操作。ClearData（”Text”）清空粘贴板;getData(“Text”)

读取粘贴板的值，返回值为粘贴板中的内容；setData(“Text”,val),设置粘贴板中的

值

Function modifyClipboard(){

clipboardData(“Text”,clipboardData.getData(‘Text’)+’文本来自传智播客技术专区，转载情报注明来源’+location.href);

}

六、Document属性

1、 document的方法：

write：想文档中写入内容

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

document.write(‘<fontcolor=red>你好</font>’)

</scipt>

Write 经常在广告代码、整合代码中被使用，

getElementById方法，根据元素的Id获得对象，网页中id不能重复，也可以直接通

过元素的id来引用元素，但是有有效范围、form1.textbox1之类的问题，因此不建议直接通过id操作元素而是通过getElementById

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

getElementByTagName(“p”)可以获得所有的<p>标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type ="text/javascript">
        function btnClick1() {
            alert(textbox1.value);
        }
        function btnClick12() {
            alert(form1.textbox2.value);
        }
        function btnClick() {
            var radios = document.getElementsByName("gender");
           /* for (var r in radios) {//在JS中这样用for不想c#中的foreach，并不会遍历每个元素而是遍历的key
                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 = "hello";
            }
        }
    </script>
</head>
<body>
<input type="text" id="textbox1" />
<input type="button" value="点一下" οnclick="btnClick1()" />
<form action="ok.apsx" id="form1">
<input type="text" id="textbox2" />
<input type="button" value="点一下" οnclick="btnClick12()" />
</form>
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
<input type="radio" name="gender" value="保密" />保密
<input type="button" value="click" οnclick="btnClick()" />
<input type="text" />
<input type="text" />
<input type="text" />

---------------------- Windows Phone 7手机开发、 .Net培训、期待与您交流！ ---------------------- 详细请查看： http://edu.csdn.net/heima/

Suyueying

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【黑马程序员】DOM基础知识

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------一、DOM入门Dom就是HTML页面的模型，将每个标签都做为一个对象javascript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象就可以读取文本框中的值、设置文本框中的值
复制链接

扫一扫