jsDOM用法讲解

1.HTML DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

HTML DOM模型被构造为对象的树

HTML DOM树

通过这个对象模型，javascript获得了足够的能力来创建动态的HTML

• JavaScript能够改变页面中的所有HTML元素
• JavaScript能够改变页面中的所有HTML属性
• JavaScript能够改变页面中的所有CSS样式
• JavaScript能够对页面中的所有事件作出反应

要改变HTML元素，首先要做的就是查找HTML元素。

1. 可以通过id来找到HTML元素
2. 可以通过标签名来找到HTML元素
3. 可以通过类名来找到HTML元素

等等还有很多方法，自行百度吧。

1.改变HTML元素

（1）改变HTML输出流

利用document.write()可用于直接向HTML输出流中写内容。

    不要在文档加载之后使用document.write()，这会覆盖该文档。查看帮助

（2）改变HTMl内容

利用innerHTML属性即可办到

（3）改变HTML属性

使用这个语法即可办到：

document.getElementById(id).attribute=new value

2.改变HTML元素的样式，即CSS

document.getElementById(id).style.property=new style

使用该语法就可实现。

3.对HTML事件做出反应

HTML事件的例子：

• 用户按下鼠标
• 用户松开鼠标
• 用户点击鼠标这一个完整的过程
• 用户将鼠标移动到元素上
• 用户将鼠标从元素上移开
• 输入字段被改变
• 文档已加载时
• 提交HTML表单时

4.添加和删除HTML元素节点

本文的样例见http://blog.youkuaiyun.com/f156207495/article/details/78183740