JavaScript html Dom文档对象模型
SIMONDOMAIN 2020-05-09
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()
相关推荐
Vue和React是数据驱动视图，如何有效控制DOM操作?能不能把计算，更多的转移为js计算？因为js执行速度很快。patch函数-->patch,对比tag,对比tag与key,对比children