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

2014年辛星解读Javascript之DOM快速入门

时间:2014-07-26 15:30:41      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:辛星   javascript   文档对象模型   dom   教程   

    在Javascript的知识中,有一个所谓的DOM,即文档对象模型,我们可以通过它来访问HTML文档的元素,当网页被加载的时候,浏览器会去创建DOM,有了这个DOM,我们可以使用Javascript去改变页面中HTML元素和属性,改变CSS样式,能够对页面中的事件作出响应。

      首先就是查找一个HTML元素,我们可以通过三种方式来做到,即通过id、标签名和类名,通过id是使用getElementById方法,它是doucument的一个方法,通过标签名则可以使用getElementsByTagName方法,我们找到了HTML元素之后,可以通过使用innerHTML的方式来修改其值,比如看如下代码:

<html>
<p id = "tag">辛星</p>
<script type="text/javascript">
	document.getElementById("tag").innerHTML = "小倩";
</script>
</html>
等我们看的时候,它就已经被修改了,如下截图:

bubuko.com,布布扣

     得到了这个HTML元素之后就可以改写它的一些属性,这里的innerHTML是比较常见的一个,至于HTML元素由什么属性,就看我们对HTML的理解了。

要改变一个HTML的样式,我们可以通过使用得到HTML元素之后,通过它的style来进一步修改其属性,这里的写法和CSS很类似,比如如下代码:

<html>
<p id = "tag">辛星</p>
<script type="text/javascript">
	document.getElementById("tag").innerHTML = "小倩";
	document.getElementById("tag").style.color = "#00F";
</script>
</html>
它会把我们的段落的内容改成”小倩“,并且把样式中的颜色改成蓝色,截图如下:

bubuko.com,布布扣


这里和css里的写法是很相似的,只要css功底比较扎实,这里会感觉很轻松。

2014年辛星解读Javascript之DOM快速入门,布布扣,bubuko.com

2014年辛星解读Javascript之DOM快速入门

标签:辛星   javascript   文档对象模型   dom   教程   

原文地址:http://blog.csdn.net/xinguimeng/article/details/38137401

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