JavaScript html Dom文档对象模型
1. Dom——Document Object Module ( 文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型。
结构树:
<html>
<head>
<title> text of title </title>
</head>
<body>
<a href="xxxxx"> text of hyper link </a>
......
</body>
</html>
2. JavaScript能改变页面中所有html元素、属性、CSS样式,以及所有事件。
3. JavaScript查找页面元素:
通过id查找:document.getElementById("id_name");
通过标签名查找:document.getElementByTagName("TagName")
通过类名查找:document.getElementByClassName("ClassName")
4. 改变标签元素内容:element.innerHTML="xxx"
如:document.getElementById("id_name").innerHTML="test text string";
5. 改变标签元素的属性:element.PROPERTY="XXX"
如:document.getElementById("id_name").src="test.jpg";
6. 改变标签元素的样式:element.CSS="XXX"
如:document.getElementById("id_name").style.color="black";
7. DOM事件:
页面事件:onload()、onunload()、onchange()、onabort()
鼠标事件:onmouseover()、onmouseout()、onmousedown、onmouseup()、onclick()、ondbclick()
焦点事件:onfocus()、onblur()
键盘事件:onkeydown()、onkeypress()、onkeyup()