码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript html Dom文档对象模型

时间:2020-05-09 01:04:42      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:rip   样式   mouseover   鼠标   load()   创建   prope   seo   element   

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文档对象模型

标签:rip   样式   mouseover   鼠标   load()   创建   prope   seo   element   

原文地址:https://www.cnblogs.com/cinlon/p/12839925.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!