DOM简介
当网页加载时,浏览器会创建页面的文档对象模型(DOM)。通过DOM,JS可以对HTML实现以下操作:
改变页面中的所有HTML元素。
改变页面中的所有HTML属性。
改变页面中的所有CSS样式。
对页面中的所有事件作出反应。
DOM HTML
获得HTML属性的三种方式
通过id查找HTML元素
x=document.getElementById("intro");
document.write("
文本来自 id 为 intro 段落: " + x.innerHTML + "
");通过标签名找到元素
//查找id为main的元素
var x=document.getElementById("main");
//查找该元素中所有
元素,返回的为一个数组
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为:' + y[0].innerHTML);
通过类名查找元素
x=document.getElementsByClassName("intro");
document.write("
文本来自 class 为 intro 段落: " + x[0].innerHTML + "
");改变HTML输出流
js能够创建动态的HTML内容,比如动态获取当前时间等
使用document.write()可用于直接向HTML输出流写内容
document.write(Date());
改变HTML内容
修改HTML内容最简单的方法是使用innerHTML属性
document.getElementById("p1").innerHTML="新文本!";
改变HTML属性
改变HTML属性可以套用以下模板
document.getElementById(id).attribute=新属性值
使用实例如下
//改变img的src属性
document.getElementById("image").src="landscape.jpg";
改变HTML样式
改变HTML样式可以使用以下语法
document.getElementById(id).style.property=新样式
使用实例
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
HTML事件
HTML事件类型
HTML有诸如以下几种事件类型
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交HTML表单时
当用户触发按键时
...
..
HTML事件属性
如需监听HTML元素的事件,可以使用事件属性进行分配
//监听button元素的onClick事件
点这里
使用HTML DOM来分配事件
HTML DOM允许使用js来向HTML元素分配事件
//向button元素分配onClick事件
//并将displayDate函数分配给id=“myBtn”的HTML元素
document.getElementById("myBtn").οnclick=function(){displayDate()};
onload和onunload事件
onload和onunload会在用户进入或离开页面时被触发,可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。也可用于处理cookie
//
onchange事件
onchange事件常结合对输入字段的验证来使用
//当用户改变输入字段的内容时,调用upperCase()函数
onmouseover和onmouseout事件
onmouseover和onmouseout事件可用于在用户的鼠标移至HTML元素上方或移出元素时出发函数
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
onmouseDown、onmouseup、以及onclick事件
这三个事件构成了鼠标点击事件的所有部分、当点击鼠标按钮时,会出发onmousedown事件,当释放鼠标时会触发onmouseup事件,最后,当完成鼠标点击时,会触发onclick事件。
DOM EventListener
addEventListener()方法
用处
1. 用于向元素添加事件监听
2. 一个元素可以添加多个监听事件
3. 可以向同个元素添加多个同类型的监听事件,比如:两个onclick事件。
4. 可以向任何DOM对象添加事件监听,不仅仅是HTML元素,比如:window对象。
5. 可以更简单的控制事件(冒泡与捕获)
6. 使用addEventListener()方法时,javascript从HTML标记中分离开来,可读性更强,在没有控制HTML标记时也可以添加事件监听。
7. 可以使用removeEventListener()方法来移除事件的监听。
语法
//第一个参数是事件类型(如click或mousedown)
//第二个参数是事件触发后调用的函数
//第三个参数是布尔值,用于描述事件是冒泡还是捕获。该参数是可选的,默认为false,冒泡传递
element.addEventListener(event, function, useCapture);
实例
//当用户点击按钮时触发监听事件
document.getElementById("myBtn").addEventListener("click", displayDate);
向原元素添加事件句柄
实例1: 当用户点击元素时弹出“hello world”
element.addEventListener("click", function(){ alert("Hello World!"); });
实例2: 使用函数名,来引用外部函数
//当用户点击元素时弹出helloworld
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
向同一元素添加多个事件句柄
向同个元素添加多个同种类型事件,注: 不会覆盖已存在的事件
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
向同个元素添加多个不同类型事件
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
向window对象添加事件句柄
addEventListener()方法允许向HTML DOM对象添加事件监听。HTML DOM对象如: HTML元素,HTML文档,window对象,或者其他支出的事件对象如: xmlHttpRequest对象。
//当用户重置窗口大小时添加事件监听
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
传递参数
当传递参数时,使用“匿名函数”调用带参数的函数
element.addEventListener("click", function(){ myFunction(p1, p2); });
事件的冒泡传递和捕获传递
事件传递有两种方式: 冒泡或捕获,这两种事件传递定义了元素事件触发的顺序。
比如: p元素插入到 div 元素中,用户点击 p 元素, 哪个元素的 "click" 事件先被触发呢?
在冒泡传递中内部事件会先被触发,然后再触发外部元素。
在捕获传递中外部元素事件会先被触发,然后才会触发内部元素的事件
removeEventListener()方法
removeEventListener()方法移除由addEventListener()方法添加事件的句柄。
element.removeEventListener("mousemove", myFunction);