DOM简介
-
当网页加载时，浏览器会创建页面的文档对象模型（DOM）。通过DOM，JS可以对HTML实现以下操作：
- 改变页面中的所有HTML元素。
- 改变页面中的所有HTML属性。
- 改变页面中的所有CSS样式。
- 对页面中的所有事件作出反应。
DOM HTML
获得HTML属性的三种方式
- 通过id查找HTML元素
<script>
x=document.getElementById("intro");
document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
</script>
- 通过标签名找到元素
<script>
//查找id为main的元素
var x=document.getElementById("main");
//查找该元素中所有<p>元素，返回的为一个数组
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>
- 通过类名查找元素
<script>
x=document.getElementsByClassName("intro");
document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
</script>
改变HTML输出流
- js能够创建动态的HTML内容，比如动态获取当前时间等
- 使用document.write()可用于直接向HTML输出流写内容
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
改变HTML内容
- 修改HTML内容最简单的方法是使用innerHTML属性
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
改变HTML属性
- 改变HTML属性可以套用以下模板
document.getElementById(id).attribute=新属性值
- 使用实例如下
<script>
//改变img的src属性
document.getElementById("image").src="landscape.jpg";
</script>
改变HTML样式
- 改变HTML样式可以使用以下语法
document.getElementById(id).style.property=新样式
- 使用实例
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
HTML事件
HTML事件类型
- HTML有诸如以下几种事件类型
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交HTML表单时
- 当用户触发按键时
- ...
- ..
HTML事件属性
- 如需监听HTML元素的事件，可以使用事件属性进行分配
//监听button元素的onClick事件
<button onclick="displayDate()">点这里</button>
使用HTML DOM来分配事件
- HTML DOM允许使用js来向HTML元素分配事件
<script>
//向button元素分配onClick事件
//并将displayDate函数分配给id=“myBtn”的HTML元素
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
onload和onunload事件
- onload和onunload会在用户进入或离开页面时被触发，可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。也可用于处理cookie
//
<body onload="checkCookies()">
onchange事件
- onchange事件常结合对输入字段的验证来使用
//当用户改变输入字段的内容时，调用upperCase()函数
<input type="text" id="fname" onchange="upperCase()">
onmouseover和onmouseout事件
- onmouseover和onmouseout事件可用于在用户的鼠标移至HTML元素上方或移出元素时出发函数
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>
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);
网友评论