FavoriteLoading
0

我的php学习第十六天之dom对象篇

昨日回顾

DOM简介:DOM可以通过脚本程序,来动态的修改网页的结构、内容、外观。

DOM只是一个概念、规范,标准。但DOM在浏览器中是通过各种各样的对象来实现。

BOM对应的浏览器对象;window、screen、history、navigator、location

       结构:就是增加节点(标记)、删除节点(标记),可以更改HTML的节点树。

       内容:添加内容、删除内容。元素对象的innerHTML属性

              举例:

                     <h1></h1>

<script>

//通过标记名称取到一个数组对象

var arr = getElementsByTagName(“h1”);

//给h1元素对象增加内容

var str = “<u onclick=“window.alert(‘OK’);”>广州PHP基础班开班啦</u>”;

//给h1元素对象增加样式,使用核心DOM中的方法

arr[0].setAttribute(“style”,”color:#990000;”);

//让h1元素对象居中对齐,使用HTML DOM中的方法

arr[0].style = “text-align:center”;  //style属性添加的是“行内样式”

arr[0].innerHTML = str;  //innerHTML的内容可以是文本、CSS代码、JS代码、子标记

</script>

                                  

                     Onclick后面是什么内容?应该是JS代码。

                     HTML的公共属性:style、id、 class、 title

                  元素对象:每一个HTML元素,都对应一个元素对象。

       外观:就是样式或格式,主要指CSS

              每一个HTML标记,都具有一个公共属性style,这个style属性在CSS DOM中又是一个对象。

              可以通过这个style对象,来引入CSS中所有属性;

                     举例:h1.style = “width:400px;”;   //表示style是一个属性,可以直接给style属性赋值

                              h1.style();     //表示style()是一个对象的方法

                              h1.style.width;   //表示style是一个对象,只有对象后面才可以跟小数点

              “width”表示是CSS属性中的一个,可以更换成其它的CSS属性

                            H1.style.height = “400px”;

                            H1.style.backgroundColor = “orange”;

                            H1.style.backgroundImage = “images/bg.gif”;  //你们测试一下路径是否要加url()

              注意:style对象的属性,每次都只能写一个,不像setAttribute()可以同时写很多个

                           

HTML DOM的特性

(1)每一个HTML标记都对应一个元素对象;

(2)每一个HTML标记的属性,都与元素对象的属性一一对应;

HTML DOM获取对象的方法

(1)使用getElementById()方法

<div id=“box”></div>

<script>

var obj = document.getElementById(“box”);

……

</script>

(2)使用getElementsByTagName(“li”)方法

(3)表单中访问一般用name来访问元素

<form name=“form1”onsubmit=“return checkForm()”>

用户名:<input type=“text” name=“username” />

<input type=“submit” value=“submit”>

</form>

onsubmit事件:当单击提交按钮时发生,执行checkForm()去验证表单中的元素是否输入合法。如果返回true,说明验证通过,可以提交表单;反之,返回false,说明数据不合法,阻止表单提交。

name属性的使用,必须以“document”开始,一级一级地写子对象。

<script>

function checkForm()

{

//取到name=username的表单对象

var username = document.form1.username;

//对username的value进行判断

if( username.value == “”)

{

return false;

}else

{

return true;

}

}

</script>

 

 

事件、事件句柄和事件处理代码

举例:<a href=http://www.sina.com.cn   onClick=“window.alert(‘这是新浪网’)”>新浪网</a>

事件句柄        事件处理代码

含义:当单击链接时(条件),弹出一个“警告对话框”(行为、动作)。

单击是事件,对应的是click,所谓“事件”都不带“on”。

当单击时的事件,对应的是onClick,onClick可以称为“事件句柄”

例如:

click事件,对应的事件句柄是:onClick;

load事件,对应的事件句柄是:onLoad

mouseover事件,对应的事件句柄是:onMouseOver

……

当事件发生时,干什么事情?去执行JS程序代码,该代码完成一项功能。

事件处理程序:是指某一个事件的值,这个值可以是任何JS代码。

<script type="text/javascript">

function showInfo()

{

window.alert("这里是一个新浪网");

return false;

}

</script>

</head>

<body>

<a href="http://www.sina.com.cn" onclick="return showInfo()">新浪网</a>

</body>

 

事件模型的分类

基本事件模型:添加了一些常用的事件类型。

onClick:当单击发生时;

onLoad:当网页中所有的标记都加载完成时;

onMouseOver:当鼠标放上时;

onMouseOut:当鼠标移出时;

onBlur:当失去焦点时(光标移走),如:当从文本框中移出后发生

onFocus:当获得焦点时(光标定位),一般用于表单中元素。如:当光标定位到文本框中时发生

onChange:当内容改变时,如:选择上传文件

onSelect:当选择改变时,如:二级联动菜单

onSubmit:当单击提交表单时发生

onReset:当重置表单时发生

 

给HTML元素增加事件的方法

(1)HTML标记加一个事件句柄属性,去调用一个函数

<a href=http://www.sina.com.cn   onclick=“showInfo()”>新浪网</a>

<script>

function showInfo()

{

Window.alert(“这里是新浪网”);

}

</script>

(2)元素对象的事件句柄属性

<div id=“box”></div>

<script>

var obj = document.getElementById(“box”);

obj.onmouseover = showInfo;  //将函数showInfo的地址(不能加括号),传给了事件句柄onmouseover

//当鼠标移出后,弹一个信息,该信息是一个匿名函数

obj.onmouseout = function(){ window.alert(‘这里是新浪’);}

</script>

 

(3)事件返回值

有的事件返回值,会影响到(阻止)某个元素的默认动作的执行。比如:onclick和onsubmit

如果事件返回true或空,则默认动作执行;反之,返回false,则阻止默认动作的执行。

onsubmit事件是在:单击提交按钮和数据发往服务器之前来执行。

<a href=http://www.sina.com.cn  onclick=“return showInfo()”>新浪网</a>

假设:单击链接时,弹出一个提示信息,但不想打开链接

function checkForm()

{

var theForm = document.form1;

if(theForm.username.value=="")

{

alert("用户名不能为空");

return false;

}else if(theForm.username.value.length<5 || theForm.username.value.length>20)

{

alert("长度应介于5-20之间");

return false;

}else

{

alert("表单提交成功");

return true;

}

}

</script>

</head>

<body>

<form name="form1" method="get" action="login.php" onsubmit="return checkForm()">

用户名:<input type="text" name="username" />

<input type="submit" value="提交表单" />

</form>

</body>

DOM事件对象

DOM事件模型,是针对IE浏览器的,主要提供了一个事件对象event对象

Event对象:当事件发生时,会向调用函数传递一个event对象参数(全小写)。

 

DOMevent对象的属性

clientX:单击时距离窗口左端的距离

clientY:单击时距离窗口顶端的距离

pageX:距离网页左端的距离

pageY:距离网页顶端的距离

screenX:距离屏幕左端的距离

screenY:距离屏幕顶端的距离

(1)通过HTML标记的事件句柄属性来使用event对象

<body style="margin:0px;padding:1000px 0px 0px;">

<img width="400" src="images/01.jpg" onclick="get_xy(event)" />

<script>

function get_xy(e)

{

var str = "浏览器窗口的左端和上端距离:clientX="+e.clientX+",clientY="+e.clientY;

str += "n网页左端的距离:pageX="+e.pageX+",pageY="+e.pageY;

str += "n屏幕左端的距离:screenX="+e.screenX+",screenY="+e.screenY;

window.alert(str);

}

</script>

 

(2)通过元素对象的事件句柄属性来使用event对象

注意:元素对象的事件句柄属性,必须全小写。

在元素对象的方式下,在给事件句柄属性,传递函数时,不能带小括号和参数;但是在定义函数时,一定要有一个“形参”来接收传递过来的event对象。

<script>

function init()

{

//取到id=img的对象

var obj = document.getElementById("img");

//给obj对象绑定事件onclick

obj.onclick = get_xy;  //传递一个函数的地址,不能加括号,当然也不能传参数

}

function get_xy(e)

{

var str = "浏览器窗口的左端和上端距离:clientX="+e.clientX+",clientY="+e.clientY;

str += "n网页左端的距离:pageX="+e.pageX+",pageY="+e.pageY;

str += "n屏幕左端的距离:screenX="+e.screenX+",screenY="+e.screenY;

window.alert(str);

}

</script>

</head>

<body onload="init()">

<img src="images/01.jpg" id="img" />

</body>

 

IE事件对象

最早事件的概念是IE中提出的,IE一直以来都使用自己的事件模型,IE中也有自己事件对象event对象。

Event对象,是window对象的属性,同时也是window的一个子对象(跟location一样),window前缀可以省略。

直接在函数中使用 window.event或event来调用event对象。

因此,在调用函数时,并不需要传递给它一个event对象参数。

IE中的event对象与DOM中的event对象有两点不同:

(1)引入event对象的方式不同

<img src=“images/01.jpg” onclick=“get_xy()”>

<script>

function get_xy()

{

var str = "浏览器窗口的左端和上端距离:clientX="+window.event.clientX+",clientY="+event.clientY;

}

</script>

元素对象方式的引入

<script>

Var obj = document.getElementById(“img”);

obj.onclick = get_xy;

</script>

 

注意:事件的存在很短暂,当下一事件发生时,上一个事件自动消失。

(2)event对象的属性不同

clientX:与DOM中的一样

clientY:与DOM中的一样

x:与DOM的pageX一样

y:与DOM的pageY一样

screenX、screenY与DOM中的一样

offsetX:当前单击的坐标,距离目标对象左端的距离(比如:距离图片左边是多远)

offsetY:当前单击的坐标,距离目标对象上端的距离(比如:距离图片顶边是多远)

 

document对象

title:网页标题

bgColor:网页背景色

fgColor:网页前景色(文本颜色)

 

综合实例:购物车中显示/隐藏功能

image001

/****************************根据据您挑选的商品,当当为您推荐部分的显示和隐藏*************************/

function shopping_commend_show(obj)

{

//取得id=shopping_commend_sort的对象

var content = document.getElementById("shopping_commend_sort");

//判断content对象是否显示

if(content.style.display=="none")

{

content.style.display="block";

obj.src = "images/shopping_arrow_up.gif";

}else

{

content.style.display="none";

obj.src = "images/shopping_arrow_down.gif";

}

}

综合实例:首页选项卡切换

 

欢迎分享本文,转载请保留出处!—重蔚自留地 站长邮箱:951076433@qq.com