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()

         JavaScript html Dom文档对象模型

相关推荐