DOM简介
- 是什么:当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model);构造为对象的树
- 有什么用: 通过DOM,来访问html文档的所有元素,创建动态的html:
- 改变页面中的所有 HTML 元素
- 改变页面中的所有 HTML 属性
- 改变页面中的所有 CSS 样式
- 对页面中的所有事件做出反应
查找html元素
三种方法:通过id;通过标签;通过类名
- 通过id
var x=document.getElementById("intro");
- 通过标签
本例查找 id="main" 的元素,然后查找 "main" 中的所有 p 元素:var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
- 通过类名
var x-document.getElementsByClassName("intro")
改变html元素
- 改变html输出流
document.write(Date());
- 改变html内容
document.getElementById(id).innerHTML=new HTML text
- 改变html属性
document.getElementById(id).attribute=new value
改变html样式
document.getElementById(id).style.property=new style
响应事件
- 事件:当用户点击鼠标时;当网页已加载时;当图像已加载时;当鼠标移动到元素上时;当输入字段被改变时;当提交 HTML 表单时;当用户触发按键时
- onclick事件:
<button onclick="displayDate()">Try it</button>
- onchange事件:
常结合对输入字段的验证来使用
<input type="text" id="fname" onchange="upperCase()">
- onmouseover和onmouseout事件:
在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。 - onmousedown和onmouseup事件:
当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
- EventListener
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的(默认false,冒泡)。