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

昨日回顾

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

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

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

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

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

举例：

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

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()方法

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

……

</script>

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

（3）表单中访问一般用name来访问元素

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

</form>

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

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

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代码。

function showInfo()

{

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

return false;

}

</script>

</head>

<body>

</body>

事件模型的分类

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

onClick：当单击发生时；

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

onMouseOver：当鼠标放上时；

onMouseOut：当鼠标移出时；

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

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

onChange：当内容改变时，如：选择上传文件

onSelect：当选择改变时，如：二级联动菜单

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

onReset：当重置表单时发生

给HTML元素增加事件的方法

（1）HTML标记加一个事件句柄属性，去调用一个函数

function showInfo()

{

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

}

</script>

（2）元素对象的事件句柄属性

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

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

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

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

</script>

（3）事件返回值

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

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

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

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

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>

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

</form>

</body>

DOM事件对象

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

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

DOM中event对象的属性

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

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

pageX：距离网页左端的距离

pageY：距离网页顶端的距离

screenX：距离屏幕左端的距离

screenY：距离屏幕顶端的距离

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

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对象。

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>

IE事件对象

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

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

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

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

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

（1）引入event对象的方式不同

function get_xy()

{

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

}

</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：网页前景色（文本颜色）

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

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

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";

}

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

本文来自投稿，不代表科技代码立场，如若转载，请注明出处https://www.cwhello.com/462.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

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