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

来源：互联网发布：mywebserver是什么软件编辑：程序博客网时间：2024/05/20 19:33

在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>

等我们看的时候，它就已经被修改了，如下截图：

得到了这个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>

它会把我们的段落的内容改成”小倩“，并且把样式中的颜色改成蓝色，截图如下：

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

0 1