第16课 元素对象

在JS程序中访问网页元素

网页文档中的每一个HTML元素都是一个对象，不同的对象有不同的属性和功能（方法），在JS程序中，可以通过元素对象可以修改其属性，调用其功能。

获取HTML元素对象

首先需要在HTML标记上添加一个id属性，每个元素的id必须是唯一的，例如：

<img src="1.jpg" id="tu"/>

然后在js代码中可以调用document对象的getElementById方法获得对象，通过元素的id。

a=document.getElementById("tu")

a变量存储的就这个元素的对象。
注意：通过元素id获取元素对象，这个JS语句要写在该元素的HTML代码之后，否则不能成功。

通过对象访问元素的属性

对象.属性=值;  例如： a.src="2.jpg";

通过对象访问元素的CSS样式

改变背景色样式：a.style.backgroundColor="red";
可以看出，对css属性名字做了一下调整，其中"-"字符去掉了，从属性的第二个单词开始以大写字母开头。

网页元素上的事件捕捉

浏览器可以捕捉用户的操作事件，触发某个JS函数执行，例如：鼠标点击、鼠标移动、键盘按下等等。

方法一：在HTML标记上添加事件属性

<img src="" onclick="JS代码"/>

例如：<img src="" onclick="ppp()"/>

常用的事件有：

onclick 鼠标单击时触发此事件
ondblclick 鼠标双击时触发此事件
onmousedown 鼠标按下时触发此事件
onmouseup 鼠标弹起时触发的事件
onmouseover 鼠标移入元素范围时触发此事件
onmouseout 鼠标移出元素范围时触发此事件
onmousemove 鼠标在元素范围内移动时触发此事件
onkeydown 当键盘上的某个按键被按下时触发此事件
onkeyup当键盘上的某个按键被按下后弹起时触发此事件
onkeypress当输入有效的字符按键时触发此事件

方二：在JS代码修改元素的事件属性

function ppp(){代码......}
tu=document.getElementById("tu");
tu.onclick=ppp; 

//注意这里不能加()，加()就是调用函数执行，函数返回值赋予tu.onclick，不加()就是将函数赋予tu.onclick变量。

编程练习

1、动感按钮，鼠标移入时高亮，移除时复原，鼠标键按下时灰暗，放开时复原。
2、鼠标点击按钮，网页上一张图片不停地变换。