什么是DOM
JavaScript由ECMAScript+DOM+BOM组成的。
DOM: DOCUMENT OBJECT MODEL(文档对象模型)的缩写,是针对HTML和XML文档的一个API(应用程序编程接口)。DOC描绘了一个层次变化的节点树,允许开发人员添加,修改和删除页面的某一个部分。
DOM树:
掌握基本的DOM查找方法
1.document.getElementById() – 根据id获取唯一的一个元素
2.document.getElementsByTagName() – 返回所有的tag标签引用的集合 – 返回的是数组
3.document.getElementsByName() – 返回所有的name属性引用的集合 – 返回的是数组
4.document.getElementsByClassName() – 返回包含带有指定类名的所有元素的集合 – 返回的是数组
DOM事件
HTML事件
直接在HTML元素标签内添加的事件,执行脚本。
语法:<tag 事件=“执行脚本”>
功能:在html元素上绑定事件
说明:执行脚本可以是一个函数的调用
DOM0级事件
1.通过DOM获取HTML元素
2.(获取HTML元素).事件 = 执行脚本
3.语法:ele.事件 = 脚本
4.功能:在DOM对象上绑定事件
5.说明:执行脚本可以是一个匿名函数,也可以是一个函数的调用
鼠标事件
1.onload – 页面加载时触发
<script type="text/javascript">
//页面加载是触发事件
window.onload = function(){
//获取box元素
var b = document.getElementById("box");
//调用函数
function clickbtn(){
alert("盒子");
}
b.onclick = clickbtn;
}
</script>
2.onmouseover – 鼠标滑过时触发
3.onmouseout – 鼠标离开时触发
4.onfoucs – 获得焦点时触发
onblur – 失去焦点时触发
5.onchange – 域的内容发生改变时触发 – 一般作用在select、checkbox、radio
6.onsubmit事件 – 表单中的确认按钮被点击时发生 – 不是加在按钮上而是表单上
//需求:文本框中输入什么,提交后就显示什么
<script type="text/javascript">
window.onload = function(){
var frm = document.getElementsByTagName("form")[0];
frm.onsubmit = function(){
alert(document.getElementsByName("inp")[0].value);
}
}
</script>
<form action="#">
名字:<input type="text" name="inp">
<input type="submit" value="提交">
</form>
7.onmousedown – 鼠标按钮在元素上按下时触发
onmouseup – 在元素上松开鼠标按钮时触发 – 2和3成就了onclick事件 ----没有什么必要就不要和onclick放一起使用
8.onmousemove – 在鼠标指针移动时触发
9.onresize – 当调整浏览器窗口大小时触发
10.onscroll – 拖动滚动条滚动时触发